問題タブ [react-window]

私の反応プロジェクトでは、react-windowパッケージを使用してネストされたリストをレンダリングしています。各親FixedSizeList行は、別の を使用するコンポーネントをレンダリングしますFixedSizeList。現在、親リストには 14 行しかありません。ただし、子リストには最大 2000 行を含めることができます。今私の問題は、親リストをスクロールしようとすると、ビューポート内のすべての子リスト項目が再レンダリングされているように見えることです。d3js私の子リスト項目では、トランジション効果のある棒グラフを描画するために使用しているため、これは私にとって少し問題です。したがって、これらの不要な再レンダリングは、全体的に奇妙な UI を与えています。これらの不要なレンダリングを停止する方法を教えてください。

これは、私の問題の非常に単純な例へのコードサンドボックス リンクです。コンソール ログを開いてください。初期ロード後、最上位のログは次のようになります: initial console log .

次に、コンソールをクリアして親リストをスクロールすると、次のようなログが表示されます: console log after parent scrolling . ここでは、子リスト 0 の子リスト項目が再レンダリングされていることがわかりますが、これは私には必要ありません。

これらの再レンダリングを停止できるソリューションを誰かに教えてもらえますか?

*PS すべての行が独自に dom を更新しているため、メモは使用していません。

編集

親リストがスクロールイベントを子に伝播するのをやめれば、この問題は解決すると思います。event.stopPropagation()親リストの行にandを追加しようとしevent.stopImmediatePropagation()ましたが、出力は以前と同じでした。