FixedSizeList：数千項目のレンダリング

パッケージマネージャーを使って、プロジェクトに react-window を追加します。たとえば、react-window パッケージをインストールします。小規模で、重い依存関係はありません。

インストール後、必要なリストコンポーネントを import します。最も一般的なのは、すべての行の高さが同じ場合に使う FixedSizeList です。

FixedSizeList を動作させるには、いくつかの props が必要です。height と width はスクロールコンテナのサイズを定義し、itemCount は存在する項目数を、itemSize は各行の高さをピクセル単位で指定します。

children prop は、1 行を描画する render 関数です。これらの値によって、コンポーネントは正しく windowing するために必要なジオメトリを把握できます。

children の render 関数は、index と style を持つオブジェクトを受け取ります。index はレンダリングする項目を示すため、適切なデータを参照できます。style は仮想リスト内で行を配置します。

その 1 行分の JSX を返すと、react-window が現在ウィンドウ内にある行に対してのみこの関数を呼び出します。

style prop は必須であり、行の要素に適用しなければなりません。react-window は各行を絶対位置に配置し、top を使って高さのあるスクロールコンテナ内の正しいオフセットに配置します。

style を適用しないと、すべての行が同じ位置に重なり、仮想化が見た目上機能しなくなります。

react-window で最もよくある間違いは、行に style prop を設定し忘れることです。行が上部で重なり、スクロールも正しく動作せず、リストが壊れているように見えます。

位置を正しく保つため、渡された style は必ず行の最も外側の要素にスプレッドするか、割り当ててください。

render 関数内で配列をクロージャとして参照する代わりに、itemData prop を介して渡すことができます。react-window はそれを index や style と同じように、data フィールドとして行に転送します。

これにより、行コンポーネントを疎結合に保てます。また、行がデータを明示的に受け取るため、メモ化にも役立ちます。

FixedSizeList は、layout prop を horizontal に設定することで水平方向のリストに対応します。バージョンによっては direction オプションを使用します。この場合、itemSize は高さではなく幅を表します。

これは、多数の項目を含む水平方向にスクロールするカルーセルやタイムラインに便利です。

overscanCount prop は、表示ウィンドウのすぐ外側にある行を数行余分にレンダリングします。このバッファによって、高速スクロール中に新しい行がマウントされるまで空白が見える可能性を抑えられます。

小さな overscan は操作感を滑らかにしますが、大きすぎると画面外の行をマウントしすぎて、仮想化のメリットを損ないます。

FixedSizeList には明示的なピクセル単位のサイズが必要なため、レスポンシブなレイアウトでは扱いにくいことがあります。関連する AutoSizer コンポーネントは親要素のサイズを測定し、render prop を介して width と height をリストに渡します。

リストを AutoSizer でラップすると、サイズをハードコードせずに可変コンテナいっぱいに広げられ、レイアウトの変更にも適応できます。

動作する FixedSizeList では、height、width、itemCount、itemSize を設定し、style prop を適用する children 関数を通じて行をレンダリングします。必要に応じて AutoSizer からサイズを渡し、overscanCount でバッファを追加できます。

これで、リストの長さに関係なく、スクロール中は表示中の行だけがマウントされた状態になります。

行を正しくレンダリングするために、FixedSizeList に何を指定する必要があるか思い出してください。

FixedSizeList は、height、width、itemCount、itemSize、および index と style を受け取る children の render 関数を使って、同じ高さの行をレンダリングします。style prop の適用は必須です。適用しないと行が重なります。

itemData でデータを渡し、水平方向のレイアウトに対応させ、小さな overscanCount バッファを追加してください。また、AutoSizer を使えば、サイズをハードコードせずにレスポンシブなコンテナいっぱいに広げられます。