Ant-design: ロングリストの最適化

記事を読んで最後にReactabularについて話した後、それが実現する仮想化効果は本当に良いですが、データが少ないとパフォーマンスの問題が発生するため、当面はこのテーブルが必要だとは思いません。データが多い場合はページングをお勧めします。正しい。

react-lazyloadは、ビューポートにないコンポーネントのdivもレンダリングして高さを埋め、スクロールバーを正しく表示できるようにします。これはReactabularとreact-virtualizedの実装です。

Reactabularはtrを上下にレンダリングし、高さは表示されていない行の高さに設定されます。

react-virtualizedは、リストの外側にdivを設定し、高さを支えてから、 position: absolute; top: 36700px;介して表示される要素の位置を調整することです。

反応仮想化と反応無限の両方で、各アイテムの高さを指定する必要がありますが、これは制限のように感じます。

各アイテムの行の高さを決定できるという前提の下で、 react-infiniteパッケージに基づくテーブルビューは悪くありません。

イントラネットアドレスを貼り付けないでください。 。 。

反応仮想化と反応無限の両方で、各アイテムの高さを指定する必要がありますが、これは制限のように感じます。

minItemHeightまたはminRowHeightどうですか。私によると、すべての行の最小の高さがわかっている場合は、 react-virtualizedとreact-infiniteで十分です。

うん、 heightとminHeight両方が機能します

この問題に長い間悩まされてきた昨日、私はついにあらゆる高さをサポートするスクロールリストソリューションを作成しました。 react-list-any-height

@ wangtao0101ドキュメントを書きませんか？

@benjycui兄弟、私はまだ書く時間がありませんでした。

@benjycuiドキュメントOK

このスレッドのほとんどを読むことができないので、これが関係ない場合はお詫びしますが、JaegerUIの仮想スクロールで採用したアプローチを共有したいと思いました。 現時点では一般化されていませんが、それでも一見の価値があるかもしれません。

jaegertracing / jaeger-ui-src / components / TracePage / TraceTimelineViewer / ListView / index.js

アイテムは固定の高さである必要はありません（おそらくreact-list-any-heightに似てい

src / components / TracePage / TraceTimelineViewer / ListView / index.js＃L321、L373

PRからのいくつかのメモ：

react-virtualizedから始めましたが、スクロール中のレンダリングされていない領域のフラッシュと動的なサイズ設定/定期的に変更されるコンテンツに関する問題により、本質的に同じことを行う古いプロジェクトが復活します： src/components/TracePage/TraceTimelineViewer/ListView/* 。

ListViewは、私たちのニーズに合わせて最適化されています（そして用途が狭くなっています）。 これらの最適化には次のものが含まれます。

• レンダリングの頻度を減らし、レンダリングごとに大量のアイテムをレンダリングするアプローチを採用する
• 現在のスクロール方向だけでなく、両方向のスクロール用に最適化
• 最小および通常の「オーバースキャン」の概念があります。つまり、現在レンダリングされているアイテムのリストが最小バッファーを満たしている場合は、それ以上レンダリングしませんが、そうでない場合は、最小バッファーといくつかの追加を十分に満たすようにレンダリングします。上手

また、Ant Designの最も優れた作品です！ ：+1：で作業するのは楽しいことです

追加予定のバージョンはありますか？

私は同じ問題に遭遇しました。 何か進歩はありますか？

同じ問題を抱えています。

これについて何か進展はありますか？

@ SeanCraftsman 、 @ nunohora 、 @ aindong – react-virtualizedを使用ます。

@tiffonこれはリストでは機能しますが、テーブルでこれを行う方法がわかりません。

こんにちは、react-virtualizedでTreeSelectを使用する最良の方法は何ですか？

これについて何か進展はありますか？ react-virtualizedをAntdテーブルと組み合わせることは可能ですか？

反応仮想化と反応無限の両方で、各アイテムの高さを指定する必要がありますが、これは制限のように感じます。
各アイテムの行の高さを決定できるという前提の下で、react-infiniteパッケージに基づくテーブルビューは悪くありません。

@paranoidjk @benjycuiちょうどfyi、react-virtualizedは、その場で要素のサイズを決める未知の高さの行でも機能します： https ：

また、これについての私の考え：antd内で仮想化を複製する必要はないかもしれません。 おそらく、代わりに、ユーザーが自分で仮想化を実装できるように、メニュー/テーブル行の提供を担当するレンダリングメソッドを公開することから始めるのがよいでしょう。

参考までに、react-windowは次世代のreact-virtualizedだと思います。

https://github.com/bvaughn/react-window

木、2018年7月5日には、午前4時01分AMジョナサンDumaine [email protected]
書きました：

また、これについての私の考え：複製する必要はないかもしれません
antd内の仮想化。 おそらく代わりに、レンダリングメソッドを公開します
ユーザーが実装できるようにメニュー/テーブル行の提供を担当します
仮想化自体が良いスタートになるでしょう。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/ant-design/ant-design/issues/3789#issuecomment-402638593 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ACMpUchXXaG0moutACfeWCLTQTZqoadnks5uDcfdgaJpZM4KueVV
。

それで、同様の問題がありますか？ 😳

転送コンポーネントでも非常に遅いです

react-virtualizedでantdテーブルを使用するための現在の回避策は何ですか？
私はantdテーブルをreact-virtualizedテーブルでレンダリングすることについてはわかりませんが、react-virtualizedリストはrowRendererプロパティを使用してantdのリストで使用できます。
またはantdテーブルを使用せずにカスタムスタイルでreact-virtualizedテーブルを使用しますか？

これに関する更新はありますか？

パフォーマンスの問題はまだ明らかです。できるだけ早く解決できることを願っています。

React Windowを使用して、これを解決するPRを作成することに興味があります。 この従属性を導入することについてのマンテナーの考えは何ですか？

React Windowを使用して、これを解決するPRを作成することに興味があります。 この従属性を導入することについてのマンテナーの考えは何ですか？

私はこれをしばらくの間ひどく必要としていました。 今のところ、react-windowを使用してAntDの外部にテーブルを実装することを余儀なくされる可能性があります。 これがサポートされるまで、パフォーマンスは長いリストでは受け入れられず、多くの行を持つ使用可能なテーブルが必要です（仮想化が必要です）。

私のチームの@ swillis12は、素晴らしいパフォーマンスを備えたreact-tabularを使用しています。

この問題が解決済みとしてマークされていることを確認したいのですが。現在、長いリストは使用できません。

この問題に引き続き注意を払ってください。ページングだけでビジネスニーズを解決する方法はありません〜

https://github.com/bvaughn/react-window

たぶん、これを組み込みにする必要があります。

この号は2年間発行されています。 。 。 。 。 。

遅くなるよりはましだ！ 😉

だから、何か進歩はありますか？

ねえ！ 私たちはこれが大好きです！ どうですか？

プロジェクトはツリーテーブルを使用する必要があり、ノードが多数ある可能性があるため、antdテーブルに基づいてコードを変更し、仮想読み込みを追加しました。デモの各ノードの下に1999のサブノードがあり、詳細なテストを行わないとバグが発生する可能性があります。

リアクションウィンドウプロジェクトを参照してください。最初の数階から提供された細い道路に感謝します。フロントエンドに触れたばかりなので、コードの変更が少し面倒です。再編成して投稿する時間があります。参照してください。

フォロー+1

奇妙な問題もあります。 FormとTableが兄弟コンポーネントとして存在する場合、 Formへの入力は非常にスタックします。特にTable fixed場合、ページ全体は基本的に使用できない操作の状態にあります。 Tableデータの背景はページごとに30行でページングされます。後でデモを追加します。 react tool渡します。 Form同じレベルのすべての

package.json

"antd": "^3.12.3",
 "react": "^16.3.2",

このページは、DidMountでのデータの読み込みを除いて、他のロジックを実行しません。

これが実装される予定の場合、誰かが私たちに更新を教えてもらえますか？ もしそうなら、いつ利用可能になるか教えていただけますか。 これは私たちのアプリケーションのブロッカーになりつつあり、先に進むためにAntdを削除することを検討する必要があります。これは、このフレームワークが本当に好きなので悲しいことです。

React Windowを使用して、これを解決するPRを作成することに興味があります。 この従属性を導入することについてのマンテナーの考えは何ですか？

私はこれをしばらくの間ひどく必要としていました。 今のところ、react-windowを使用してAntDの外部にテーブルを実装することを余儀なくされる可能性があります。 これがサポートされるまで、パフォーマンスは長いリストでは受け入れられず、多くの行を持つ使用可能なテーブルが必要です（仮想化が必要です）。

@ swillis12こんにちは、テーブルのパフォーマンスの問題にどのように対処しましたか？

列が多すぎる場合、要件の1つは、70を超える列を表示する必要があることです。ページングが実行されたとしても、それでも非常に遅れます。

ドキュメントにはreact-virtualizedの例があると思います。
トリック。

木、2019年3月28日には、午前4時48分AMデーン[email protected]は書きました：

列が多すぎる場合、要件の1つは、70を超える列を表示する必要があることです。ページングが実行されたとしても、それでも非常に遅れます。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/ant-design/ant-design/issues/3789#issuecomment-477502300 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ACMpUYf-yuPS8ag-mr47H7b4Z2rWHVnLks5vbIHSgaJpZM4KueVV
。

私はこの問題を1年以上フォローしています...
まだ解決されていません...
次に、react-virtualizedとreact-windowが複雑すぎて、機能が多すぎます。これらの機能ドキュメントを読むのが面倒である必要はありません。自分で小さなホイールを作成しました。<br i = "8" />この機能は、reactと各行の高さ以外に依存関係がないことです。動的にすることができ、事前に与える必要はありません

https://github.com/Autodesk/react-base-tableこれを見て

GitHub

Autodesk / react-base-table

高いパフォーマンスと柔軟性を備えた大規模なデータセットを表示するためのreactテーブルコンポーネント-Autodesk / react-base-table

懸念事項...企業は1000行のデータを表示する必要があります。

https://github.com/bvaughn/react-window

たぶん、これを組み込みにする必要があります。

それ以上の進歩はありますか？

入力とドロップダウンを使用してTimePickerを作成しようとしています。ドロップダウンは他のコンポーネントでは機能しないため、メニューを使用してドロップダウンオーバーレイで1440アイテム（24時間* 60分）をレンダリングする必要があります。

しかし、この量のデータでのドロップダウンパフォーマンスはひどいものです。

だから、私の質問は：react-windowをドロップダウンオーバーレイとして使用するにはどうすればよいですか？

ここでも私の懸念を広めたいと思います。 Google Product Taxonomyの完全なリストを含むリストの選択ドロップダウンをレンダリングしようとしていますが、ドロップダウンが表示されるまでに数秒遅れて非常に遅くなります。 これまでの進捗状況は？

今解決策があるかどうか知りたいですか？
オートコンプリートでreact-virtualizedを使用したいのですが、使用できません。 私が戻るときListのrowRendererメソッドのコンポーネントでエラーが発生します。

@jingxiawl 1つの回避策は、ドロップダウンを検索ベースのドロップダウンにすることです。 別の見方をすれば、ユーザーが手動で下にスクロールできるようにアイテムの長いリストを表示するのはあまりユーザーフレンドリーではないので、状態を使用して検索フレーズをフィルタリングすることでドロップダウン選択リストを管理します。 Reactフックを使用している場合は、 useEffectを使用して、コンポーネントの再レンダリングを最小限に抑えることができます。

これにより、遅いレンダリングの痛みが軽減されることを願っています。 それでも、選択リストが長くなったために、このコンポーネントの速度が低下しないことを願っています。

@yoonwaiyan
ありがとうございました。 しかし、今の問題は、多くのデータが除外されていることであり、長いリストでは常に問題が発生します。

@yoonwaiyanこれを行う例はありますか？

antd.Table仮想テーブル、APIは元のテーブルと完全に整合性があり、rowHeightを渡す必要はありません
https://github.com/ctq123/ant-virtual-table

@reconbotこれは、Reactフックを使用して行った簡単な例です。

完全に機能するフォームコンポーネントであるreact-windowに基づく
https://github.com/nexxLuo/tablex

@reconbotこれは、Reactフックを使用して行った簡単な例です。

それでも私には非常に遅い。

@douglasjuniorうん、それは問題を完全に解決することを意味するのではなく、少なくともユーザーに悪い読み込み体験を与えないための私のプロダクションコードの一時的な解決策ですが、それをさらに最適化する方法についての提案を受け入れています。

上記のいくつかのスレッドにリンクされているant-virtual-tableを参照して、彼らが主張しているように、テーブルのこの問題をどのように解決したかを確認できます。

ところで、このSO投稿には、長いリストの問題に対するいくつかの正当な解決策があります。antdチームがそれを見てくれることを願っています： https ：//stackoverflow.com/questions/38033442/big-list-performance-with-react

こんにちはアントチーム
この問題に関するニュースはありますか？ すぐに修正する予定はありますか？ 大量のデータがある場合、リストテーブルを使用するのは実際には非常に苦痛です
@ afc163
ちなみに素晴らしい仕事!!!

こんにちはアントチーム
遅延読み込みでTreeコンポーネントを使用しており、 TreeNode下に子として約20,000 TreeNodes TreeNodeます。 このように大量のデータがあるツリーをナビゲートするのは非常に遅く、苦痛です。 この問題について何か新しいことはありますか？

こんにちはアントチーム、
初恋愛antdコンポーネント。
私はSelectコンポーネントを使用していますが、2000を超えるオプションがあるため、コンポーネントが非常に遅くなるため、 react-windowまたはその他の方法で最適化する必要があります。 これについて何か更新があれば教えてください。

これを参考にできますか？ このリポジトリには、テーブルコンポーネントに関する重要な情報がたくさんあります。

https://github.com/wubostc/virtualized-table-for-antd

SuperSelectは、数万のデータの仮想リストをサポートするantd Selectに基づいています。これは、私のプロジェクトで正常に機能するantdSelectと同じAPIです。

今、SuperSelectはantd-virtual-select移動します

antd-virtual-selectリポジトリ

これはデモです

かっこいいもの@iblq！ ant select https://codesandbox.io/s/superselect-8xlwkとの比較を含めるために、デモを少し変更しました

こんにちはアントチーム、
初恋愛antdコンポーネント。
私はSelectコンポーネントを使用していますが、2000を超えるオプションがあるため、コンポーネントが非常に遅くなるため、 react-windowまたはその他の方法で最適化する必要があります。 これについて何か更新があれば教えてください。

https://github.com/react-component/selectアルファ版はすでに仮想スクロールを実装しています。
antd4.0がそれを持っているのを待つ必要があるだけです。

@megawaclmaoなに。 同じスレッドをフォローしていますか？ 誰かがあなたを雇うことを申し出たのはどこですか？

4.0を待たなければならないと思います⌚️

ただし、上記のSuperSelectデモは非常にすばらしいものです。 非常にパフォーマンスも優れています。 残念ながら、300行以上をコピーして貼り付けてパフォーマンスの高いSelectを取得したくありません。特に、TypeScriptを使用していてJSにあるためです。 それでもかなりクールです！

react-windowがリストだけに限定されていなかったらいいのに...

もう1つのオプションはreact-virtualized-selectですが、2つの問題があります：1）Antではありません😄、2）メンテナンスされなくなったため、問題が発生した場合は🤷‍♂

不思議に思う人のために、非ドロップダウン/選択データのこれに対する1つの解決策は、オプションのpagination小道具を備えたListコンポーネントです。 チャームのように機能します！

LazySelectInputは、レンダリングの問題なしに2000を超える読み込みを処理する必要があります。

新しいテーブルコンポーネントは仮想リストも実装します。https：//github.com/react-component/table/releases/tag/v7.0.0-alpha.16を参照して

@abenhamdine既存のant設計プロジェクトで仮想化をサポートするために新しいテーブルコンポーネントを使用する方法はありますか？

@abenhamdine既存のant設計プロジェクトで仮想化をサポートするために新しいテーブルコンポーネントを使用する方法はありますか？

おそらく、しかし私見ではantd 4.0を待つ方が良いです、新しいテーブルコンポーネントはすでに4.0prepareブランチに統合されています。

昨日、アルファ版を追加しようとしましたが、うまくいきませんでした。

了解しました。とりあえずこれを使用します。

https://github.com/wubostc/virtualized-table-for-antd

それは少し厄介なドキュメントを持っていました、私はまたcssを少し修正する必要がありました。

v4を待つ間にv3で新しいselectコンポーネントを使用する方法はありますか？ または、仮想化リストを実装し、同じantdスタイルを持つサードパーティの選択コンポーネントはありますか？

編集。
上記のSuperSelectコンポーネントを使用していますが、完全に機能しています

すべてのアップデート ？

@ shivam-ahuja antd 4、4.0.0のSelectコンポーネントを試すことができます-rc1が出ています。
https://next.ant.design/components/select/#components-select-demo-big-dataを参照して

テーブルフィルタリングは機能しましたか？ ＃11331に示すように、大量のデータセットのフィルタリングでまだ長い読み込み時間が発生しています。 アイテムが1,000を超えるテーブルでは、フィルタリングはほとんど使用できません。

ロングリストのレンダリングパフォーマンスはv4で最適化されています： https ：