問題タブ [react-virtualized]

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

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

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

全て、

FlexTable と AutoSizer (react-virtualized から) を組み合わせようとしていますが、理由がよくわからないエラーが発生し続けます。私が見る限り、私は例に従っていますが、間違いを犯しているに違いありません.

私の render メソッドは次で終わります

何が起こるかというと、コンソールに次の警告が表示され、テーブルがレンダリングされません。

警告: 失敗した propType:childrenに指定された prop が無効AutoSizerです。単一の ReactElement が必要です。のレンダリング方法を確認してくださいTable。

と

Uncaught Invariant Violation: onlyChild には、1 つの子を持つ子を渡す必要があります。

これで、AutoSizer タグに 1 つ以上の子が与えられる方法がわかりません。唯一の子は FlexTable コンポーネントではありませんか?

よろしくお願いします

ダニエル・セドリング

反応仮想化と酵素を一緒に使用することは可能ですか? それらを一緒に使用しようとすると、グリッド内のアイテムの空のリストが表示されるようです。

AutoSizer の幅によって適切な値が得られるのに対し、Autosizer の高さは一貫して 0 になるため、VirtualScroll コンポーネントが表示されません。ただし、disableHeight prop を使用して VirtualScroll に高さの固定値 (つまり 200px) を指定すると、VirtualScroll は期待どおりに行を表示します。誰が何が悪いのか見ることができますか?

最終的に、Autosizer は Material-ui Dialog コンポーネント内に存在することを意図していますが、オートサイザーを単純に div にレンダリングすることも試みました。同じ問題。

Grid の CellMeasurer と FlexTable のように、すべてのセル コンテンツが常に表示される (長いテキスト) 方法で FlexTable のセルをレンダリングすることは可能ですか?

ありがとう！

fixed-data-table のように、react-virtualized に 2 つのヘッダー行を追加することは可能ですか? 最初のヘッダー行の列の一部をいくつかの列にまたがらせて、2 行目の列を分類できるようにしたいと考えています。

効率的なニュース フィードを作成するために、react-virtualized ライブラリを使用しています。図書館はすごいです。WindowScroller、AutoSizer、および VirtualScroll コンポーネントを組み合わせて、無限のスクロール動作を実現しました。問題は、VirtualScroll の高さを手動で設定し、WindowScroller を使用しない場合、すべてのブラウザーでパフォーマンスが優れていることです。ただし、WindowScroller コンポーネントを追加すると、特に Firefox (v47.0) でパフォーマンスが大幅に低下します。ウィンドウのスクロールを使用できるように、これを最適化するにはどうすればよいですか?

これは、react-virtualized が使用されるニュース コンポーネントです。ヘッダー アイテムと単純なアイテムの 2 種類のリスト アイテムがあります。ヘッダー アイテムにはニュース グループの日付が含まれているため、少し長くなります。

リスト項目は次のコンポーネントです。

ここでの NewsItemContent はロジックのない単純な純粋なコンポーネントなので、ここには入れません。

ありがとうございました！

更新: ウィンドウのスクロールとブロックのスクロールの両方の場合に、Firefox でパフォーマンス タイムラインを記録しました。

• ブロックスクロール
• ウィンドウのスクロール

反応仮想化を開始し、InfiniteLoader->AutoSizer->VirtualScroller をセットアップしました。残念ながら、遅延ロードされた行はすぐに小道具を取得しません。props が null または未定義であるかのようにレンダリングします。それらを過ぎてスクロールしてからそれらに戻ると、それらは正しくレンダリングされます。また、最初にプリフェッチされた行を除いて、ゆっくりスクロールすると、すべての新しい行が正常にレンダリングされます。ただし、スクロール ホイールを飛ばすと、「サブレンダリングされた」行のセットに「着地」します。以下のコードを考えると、何が間違っていますか?