react-window

react-windowは、すべての項目に対して一度に要素を作成することによるパフォーマンスコストを回避しながら、大規模なデータセットをレンダリングするためのReactコンポーネントを提供します。主に2つのコンポーネントを提供します。多数の行を持つデータ用のListと、多数の行と列を持つデータ用のGridです。 Listコンポーネントには、rowComponent、rowCount、rowHeight、rowPropsが必要です。行の高さは、ピクセル、パーセンテージ、インデックスとセルpropsの関数、またはuseDynamicRowHeightからの動的行高キャッシュとして指定できます。ドキュメントでは、動的な高さは事前に決定されたサイズよりも効率が低いと述べられています。オプション機能には、オーバースキャンレンダリング、カスタム行キー、リサイズおよび可視範囲のコールバック、サーバーレンダリング時のデフォルト高さ、カスタムCSSクラスとスタイル、ルート要素のオーバーライド、スクロールとDOMアクセスのための命令的ref APIが含まれます。 Gridコンポーネントには、cellComponent、cellProps、columnCount、columnWidth、rowCount、rowHeightが必要です。列と行のサイズはピクセル値、パーセンテージ、または関数で指定できますが、Listの行とは異なり、Gridのセルサイズはレンダリングせずに決定可能でなければなりません。Gridはまた、両方向のオーバースキャン、カスタム行キーと列キー、方向性テキスト、サーバーレンダリング用のデフォルト寸法、リサイズおよびレンダリング済みセルのコールバック、オーバーレイまたはツールチップの子要素、命令的グリッドrefをサポートします。 パッケージはnpmから「npm install react-window」でインストールされ、TypeScript定義は公開されている配布物に含まれています。ドキュメントはreact-window.vercel.appで入手でき、バージョン1.xのドキュメントは別にあります。READMEにはReact DevToolsやReplayブラウザを含むプロジェクトでの使用が記載されていますが、特定のパフォーマンスベンチマークの主張は行っていません。