説明
react-virtualized でレンダリングされるアイテムの潜在的に長いリストがありますVirtualScroll。
リスト内の各項目 (行) にはかなりの量の要素があり、そのうちの 1 つがコンテキスト メニューを開きます。react-tetherHTMLでそのメニューをレンダリングしてbody（アイテムがスクロール可能なリストの下部/上部にあるときに非表示にならないように）、ユーザーがリストをスクロールしている間、メニューをアイテムに「固定」したままにしようとしています.
私の問題は、テザー メニューの位置の更新に顕著な遅延があることです。
これまでに行った手順のいくつか:
- なしで単純なリストをレンダリングしました
VirtualScroll。テザリングされたメニューはスムーズにレンダリングされ、目立ったジャンクはありませんでした. それが私が問題があると結論付けた方法ですreact-virtualized - ここで推奨され
rowRendererているように、メニュートリガーのみに簡略化しました。 shouldComponentUpdate行コンポーネントに実装されています。これにより、認識されるパフォーマンスが大幅に改善され、遅延が大幅に減少しましたが、それでもまだ顕著です.- Chrome devtools のタイムラインを確認しました。
Grid.jsとの両方によってトリガーされるリフローが表示されtether.jsます。
ライブラリのバージョン:
- react-virtualized v. 7.24.3 (大規模なプロジェクトであり、8.x への移行はまだ準備ができていません)
- 反応テザー v. 0.5.2
- 反応するv。15.2.1
ワーキングデモ
https://plnkr.co/edit/f7OhCoCXkDsWbyjxhR3f
スクリーンショット:
