スクロール中にVirtualScrollのrowRendererメソッドが何度も呼び出されます

Question

react-virtualized's無限のスクロールリストがあります（ほとんどの設定はthis exampleからコピーされています）。私はそれにspecsのようなrowRenderer機能を提供しています。 rowRenderer関数が非常に（つまり、非常に基本的なコンポーネントを行として返します）の場合、これは問題なく動作します。 ですが、私のRowComponentのレンダリングには、一部のプロパティではArray.mapが含まれています。これは、rowRenderer関数がスクロール中に,、さらには,と呼ばれていることを除いては問題ありません。これはパフォーマンス上の問題を引き起こし、スクロールが十分に滑らかではありません。 は、これまで私が試した：

1. が、これは動作しますが、それは将来的に問題を引き起こす可能性として、私はこのソリューションを好きではない私のrowRendererをキャッシュ。
2. 私のRowComponentのレンダリング関数を純粋にして、を使用してshouldComponentUpdateを実装してください。パフォーマンスはやや向上しましたが、十分ではありませんでした。スクロールあたりthis exampleで

、rowRenderer機能とも呼ばれている何回も私は、この動作は仕様であると考えています（そこにはPERFの問題機能は非常に軽量であるため）、。 so：
キャッシュは良い解決策ですか？どのように私のアプリの状態（私は状態管理のためのreduxを使用して）それを同期するための任意のアドバイスですか？私がrowRendererへの呼び出しを減らすことができるドキュメントには欠けているものがあります（スクロール中に私の行が変わる理由はありません）？

Answer 1

ここで反応仮想化の著者。

rowRendererメソッドは、わかっているように、ユーザーがスクロールしているときに迅速に呼び出されるため、軽量でなければなりません。良いニュースは、ブラウザはUIから別のスレッドでスクロールを管理するため、通常はパフォーマンス上の問題は発生しません。何かがある場合は、スクロールしている方向にリストの端に空白の空白がいくつか表示されます。レンダラーがユーザーのスクロール速度に追いついていないことを示しています。

リアクション仮想コンポーネントまたはそのDOM祖先にタッチまたはホイールイベントハンドラを添付すると、ブラウザがメイン/ UIスレッドでスクロールするように強制されます。それは間違いなく遅さを引き起こす可能性があります。

私は現在、rowRendererのようなユーザー関数に名前付き引数を渡すメジャーアップデート（version 7）のin the middleです。これにより、スクロールの進行中に "重い"ロジックを延期できるメタ情報（リストが現在スクロールしているかどうかなど）を渡すことができます。残念なことに、doron-zavelevskyの記述にタイムアウトを使用しない限り、これはバージョン6では不可能です。

編集：this commitで、今後のバージョン7リリースでセルキャッシングが行われたことをうれしく思います。

Answer 2

私はこのライブラリで私の経験から（私は最新版を使用していません） - これは設計によるものです。 すべてのリストを一度にレンダリングするのを避け、無限のスクロールを可能にするためには、現在表示されているアイテムをレンダリングするたびに尋ねられます。 あなたの目標は、あなた自身が述べたように、レンダリング機能を最適化することです。 あなたの全体的なエクスペリエンスを向上させるもう一つのことは、itemDidMountライフサイクルメソッドに複雑なコードが含まれているか、ポストレンダリングを実行する他のコードが含まれているかを確認して確認することです。その場合、タイムアウトを指定してこれらの計算を遅らせることで高速スクロールを最適化し、タイムアウトが経過してもコンポーネントがまだマウントされている場合にのみ実行させることができます。

アイテムをすばやくスクロールして下部に移動する場合を考えてみましょう。途中で過去にスクロールしたすべてのアイテムを完全に埋め込むことには意味がありません。したがってレンダリングの結果をできるだけ早く返すことができます。アイテムの中には〜200ms待ってから、コンポーネントがまだマウントされているかどうかを確認して実際の作業を行います。

isMountedは廃止されているため、componentDidMountの間に変数をtrueに設定し、componentWillUnmountのfalseに戻すことができます。