状態と動作を使わずに2つの反応コンポーネントのスクロールを同期する

Question

Reactで2つの異なるコンポーネントのスクロールを同期しようとしているので、一方のコンポーネントをスクロールするともう一方のコンポーネントもスクロールします。 2つは異なる比率であるので、毎回オフセットを計算する必要があります。

私は、すべてのマウスのスクロールを再レンダリングするためにパフォーマンスが低下するため（私はディバウンスリング/スロットルを試みました）、状態と動作を使用したくありません（私はreduxを使用しています）。

私はそうのような二つの他のコンポーネントをレンダリングするラッパーコンポーネントを持っている：

class Wrapper extends React.Component { 
    render() { 
    return (
     <div> 
     <FirstComponent /> 
     <SecondComponent /> 
     </div> 
    ); 
    } 
} 

このすべてのルックスを私はrefを使用しようとしたが、それはカスタム・コンポーネントでは動作しません（私はundefinedを取得）し、どのような場合には反応/還元のための反パターンのように。

パフォーマンスを傷つけず、React/Reduxパターンのできるだけ近くにとどまることなく、達成する方法についての提案はありますか？

Answer 1

残念ながら、Reactはrefを超えたDOM操作には適していません。各イベント後に再レンダリングを実行したくないのは間違いありません。

refを使用すると、少なくともマウントが発生するまでundefinedが返されることがあるので、まだ存在しない状況を処理する必要があります。