3

反応仮想化の無限スクロール リストがあります (セットアップのほとんどはこの例からコピーされます)。スペックrowRenderer通りの機能を提供しています。関数が非常に軽量である場合 (つまり、非常に基本的なコンポーネントを行として返す場合)、これは問題なく機能します。しかし、私のレンダリングにはいくつかのプロパティが含まれています。これは、スクロール中に関数が数十回または数百回呼び出されることを除いて、問題を引き起こすことはありません。これにより、パフォーマンスの問題が発生し、スクロールが十分にスムーズになりません。これまでのところ、私は試しました：rowRendererRowComponentArray.maprowRenderer

  1. これrowRendererは機能しますが、将来問題が発生する可能性があるため、このソリューションは好きではありません。
  2. myRowComponentの render 関数を pure にして、shouldComponentUpdateを使用して実装しreact-addons-shallow-compareます。これにより、パフォーマンスがわずかに改善されましたが、十分ではありませんでした。

この例では、rowRenderer関数はスクロールごとに何度も呼び出されています (関数は非常に軽量であるため、パフォーマンスの問題はありません)。この動作は設計によるものだと思われます。so:
キャッシングは良い解決策ですか? アプリの状態と同期する方法に関するアドバイスはありますか (状態管理に redux を使用しています)。への呼び出しを減らすことができるドキュメントで見逃したものはありますかrowRenderer(スクロール中に行が変更される理由はありません)?

4

2 に答える 2

4

react-virtualized の作者はこちら。

ご覧のrowRendererとおり、ユーザーがスクロールしているときにメソッドが急速に呼び出される可能性があるため、メソッドは軽量である必要があります。幸いなことに、ブラウザーは UI とは別のスレッドでスクロールを管理するため、通常はパフォーマンスの問題は発生しません。どちらかといえば、スクロールしている方向のリストの端に空白/空白があることに気付くかもしれません。これは、レンダラーがユーザーのスクロール速度に追いついていないことを示しています.

ただし、注意すべき 1 つの注意点は、タッチまたはホイール イベント ハンドラーを反応仮想化コンポーネントまたはその DOM 祖先の 1 つにアタッチすると、ブラウザーがメイン/UI スレッドで強制的にスクロールされることです。それは間違いなく速度低下を引き起こす可能性があります。

私は現在、主要な更新 (バージョン 7 )の最中にあり、とりわけ、名前付き引数を のようなユーザー関数に渡します。これにより、メタ情報 (リストが現在スクロールしているかどうかなど) を渡すことができるようになり、スクロールの進行中に「重い」ロジックを延期できるようになります。残念ながら、doron-zavelevsky が言及しているようにタイムアウトを使用する意思がない限り、これはバージョン 6 では不可能です。rowRenderer

編集:このコミットにより、セル キャッシングが次期バージョン 7 リリースに組み込まれたことを知って喜んでいるかもしれません。

于 2016-05-05T15:42:11.980 に答える