リスト仮想化

目次

• 使用する場合
• 使用しない場合
• 手順
• 詳細
• ソース

リスト仮想化（ウィンドウイングとも呼ばれます）は、リスト全体ではなく、動的リストの表示領域にある行のみをレンダリングするという考え方です。レンダリングされる行は、ユーザーがスクロールするときに移動する表示領域（ウィンドウ）内の、リスト全体のほんのサブセットです。これによってレンダリングパフォーマンスを向上させることができます。

Reactを使用していて、大量のデータを効率的に表示する必要がある場合、react-virtualizedに精通しているかもしれません。これはBrian Vaughnによる、ウィンドウイングライブラリで、現在表示されているリスト内のアイテムのみをレンダリングします（スクロール「ビューポート」内）。つまり、数千行のデータを一度にレンダリングするコストを払う必要がありません。

使用する場合

• パフォーマンスの問題を引き起こす大量のリストまたはグリッド（数百～数千のアイテム）をレンダリングする場合に使用します
• 初期レンダリング時間を削減し、スクロールパフォーマンスを向上させるのに役立ちます

使用しない場合

• 仮想化なしで十分に高速なネイティブレンダリングを備えた短いリスト（約100アイテム未満）
• アクセシビリティ要件によってすべてのリストアイテムがスクリーンリーダーのDOMに含まれる必要がある場合
• リストアイテムの高さが予測不可能で、コンテンツに依存しており、仮想化の測定を信頼できなくする場合

手順

• react-window（またはreact-virtualized）を使用して、スクロール可能なコンテナ内の表示されているアイテムのみをレンダリングします
• 高さが同じアイテムの場合はFixedSizeListを、異なる高さのアイテムの場合はVariableSizeListを選択します
• ユーザーがスクロールするときにデータを段階的に読み込むにはreact-window-infinite-loaderを使用します
• 完全な仮想化が必要ない単純な場合には、CSSのcontent-visibility: autoを検討してください

詳細

リスト仮想化はどのように機能しますか？

アイテムのリストを「仮想化」することは、ウィンドウを維持してリストの周囲でそのウィンドウを移動させることを含みます。react-virtualized のウィンドウイングは以下のように機能します：

• 相対位置決めされた小さなコンテナDOM要素（例：<ul>）を持つ（ウィンドウ）
• スクロール用の大きなDOM要素を持つ
• コンテナ内に子を絶対位置決めし、top、left、width、heightのスタイルを設定します

一度に1000個のリスト要素をレンダリングする代わりに（初期レンダリングを遅くしたり、スクロールパフォーマンスに影響を与える可能性があります）、仮想化はユーザーに表示されているアイテムのみをレンダリングすることに焦点を当てます。

これは、中低性能デバイスでリストレンダリングを高速に保つのに役立ちます。ユーザーがスクロールするときに、以前のエントリをアンロードして新しいエントリに置き換えながら、より多くのアイテムをフェッチ/表示できます。

react-virtualized の小さい代替案

react-windowは同じ著者によるreact-virtualized の書き直しで、より小さく、より高速で、よりtree-shakeableであることを目指しています。

tree-shakeable ライブラリでは、サイズはどのAPI表面を使用するかの関数です。react-virtualized の代わりに使用すると、約20～30KB（gzip圧縮時）のサイズ削減が見られます。

両方のパッケージのAPIは同様で、異なる場合、react-window はより単純になる傾向があります。react-window のコンポーネントは以下のとおりです：

List

Lists は**要素のウィンドウ化されたリスト（行）**をレンダリングします。つまり、表示されている行のみがユーザーに表示されます（例：FixedSizeList、VariableSizeList）。Lists は Grid（内部的に）を使用して行をレンダリングし、propsをその内部Gridに中継します。

React を使用したデータリストのレンダリング

以下は、React を使用して単純なデータ（itemsArray）のリストをレンダリングする例です：

import React from "react";
import ReactDOM from "react-dom";

const itemsArray = [
  { name: "Drake" },
  { name: "Halsey" },
  { name: "Camillo Cabello" },
  { name: "Travis Scott" },
  { name: "Bazzi" },
  { name: "Flume" },
  { name: "Nicki Minaj" },
  { name: "Kodak Black" },
  { name: "Tyga" },
  { name: "Buno Mars" },
  { name: "Lil Wayne" }, ...
]; // our data

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    {itemsArray[index].name}
  </div>
);

const Example = () => (
  <div
    style={{
      height: 150,
      width: 300
    }}
    class="List"
  >
    {itemsArray.map((item, index) => Row({ index }))}
  </div>
);

ReactDOM.render(<Example />, document.getElementById("root"));

react-window を使用したリストのレンダリング

以下は、react-window のFixedSizeListを使用した同じ例です。これはいくつかのprops（width、height、itemCount、itemSize）と、子として渡される行レンダリング関数を取ります：

import React from "react";
import ReactDOM from "react-dom";
import { FixedSizeList as List } from "react-window";

const itemsArray = [...]; // our data

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    {itemsArray[index].name}
  </div>
);

const Example = () => (
  <List
    className="List"
    height={150}
    itemCount={itemsArray.length}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

ReactDOM.render(<Example />, document.getElementById("root"));

CodeSandboxでFixedSizeListを試すことができます。

Grid

Grid は、垂直軸と水平軸に沿った仮想化を備えた表形式データをレンダリングします（例：FixedSizeGrid、VariableSizeGrid）。現在の水平/垂直スクロール位置に基づいて自身を埋めるために必要なGrid セルのみをレンダリングします。

import React from 'react';
import ReactDOM from 'react-dom';
import { FixedSizeGrid as Grid } from 'react-window';

const itemsArray = [
  [{},{},{},...],
  [{},{},{},...],
  [{},{},{},...],
  [{},{},{},...],
];

const Cell = ({ columnIndex, rowIndex, style }) => (
  <div
    className={
      columnIndex % 2
        ? rowIndex % 2 === 0
          ? 'GridItemOdd'
          : 'GridItemEven'
        : rowIndex % 2
          ? 'GridItemOdd'
          : 'GridItemEven'
    }
    style={style}
  >
    {itemsArray[rowIndex][columnIndex].name}
  </div>
);

const Example = () => (
  <Grid
    className="Grid"
    columnCount={5}
    columnWidth={100}
    height={150}
    rowCount={5}
    rowHeight={35}
    width={300}
  >
    {Cell}
  </Grid>
);

ReactDOM.render(<Example />, document.getElementById('root'));

CodeSandboxでFixedSizeGridも試すことができます。

より詳細なreact-window の例

Scott Taylorは、react-windowとFixedSizeGridを使用してオープンソースのPitchfork 音楽レビュースクレーパーを実装しました（ソース）。

Pitchfork スクレーパーはreact-window-infinite-loader（デモ）を使用しており、大規模なデータセットをチャンクに分割して、スクロール時に読み込むことができます。

このアプリで react-window-infinite-loader がどのように組み込まれているかのスニペットは次のとおりです：

import React, { Component } from 'react';
import { FixedSizeGrid as Grid } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';

// ...

render() {
  return (
    <InfiniteLoader
      isItemLoaded={this.isItemLoaded}
      loadMoreItems={this.loadMoreItems}
      itemCount={this.state.count + 1}
    >
      {({ onItemsRendered, ref }) => (
        <Grid
          onItemsRendered={this.onItemsRendered(onItemsRendered)}
          columnCount={COLUMN_SIZE}
          columnWidth={180}
          height={800}
          rowCount={Math.max(this.state.count / COLUMN_SIZE)}
          rowHeight={220}
          width={1024}
          ref={ref}
        >
          {this.renderCell}
        </Grid>
      )}
    </InfiniteLoader>
  );
}

react-virtualizedからこのアプリを移植するコミットが役立つかもしれません。

FixedSizeListを使用した実装も利用可能です：

return (
  <InfiniteLoader
    isItemLoaded={this.isItemLoaded}
    loadMoreItems={this.loadMoreItems}
    itemCount={this.state.count}
  >
    {({ onItemsRendered, ref }) => (
      <section>
        <FixedSizeList
          itemCount={this.state.count}
          itemSize={ROW_HEIGHT}
          onItemsRendered={onItemsRendered}
          height={this.state.height}
          width={this.state.width}
          ref={ref}
        >
          {this.renderCell}
        </FixedSizeList>
      </section>
    )}
  </InfiniteLoader>
);

さらに複雑なニーズのために、The Movie Databaseデモアプリは react-virtualized と Infinite Loader を内部で使用しました。移植して react-window と react-window-infinite-loader に変更するのに長い時間はかかりませんでしたが、いくつかのコンポーネントがまだサポートされていないことを発見しました。それでも、最終的な機能はかなり近いです。

足りないコンポーネントは WindowScroller と AutoSizer で、これらについては次を見てみましょう。

// ...
return (
  <section>
    <AutoSizer disableHeight>
      {({width}) => {
        const {movies, hasMore} = this.props;
        const rowCount = getRowsAmount(width, movies.length, hasMore);
        // ...
        return (
          <InfiniteLoader
            ref={this.infiniteLoaderRef}
            // ...
            {({onRowsRendered, registerChild}) => (
              <WindowScroller>
                {({height, scrollTop}) => (

react-window に足りないものは何ですか？

react-window はまだ react-virtualized の完全なAPI表面を持っていないため、検討している場合は比較ドキュメントを確認してください。足りないものは何ですか？

• WindowScroller - これは react-virtualized コンポーネントで、ウィンドウのスクロール位置に基づいてLists をスクロールできるようにします。react-window に対してこれを実装する予定はないため、userland でこれを解決する必要があります。
• AutoSizer - すべての利用可能なスペースを埋めるために成長するHOC で、単一の子の幅と高さを自動的に調整します。Brian はこれをスタンドアロンパッケージとして実装しました。最新情報についてはこちらの issueをフォローしてください。
• CellMeasurer - HOC で、セルのコンテンツをユーザーに見えない方法でレンダリングして自動的に測定します。サポートについてはこちらで議論を参照してください。

それはさておき、react-window はそのままで含まれているもので、ほとんどのニーズに十分であることがわかりました。

ウェブプラットフォームの改善

一部のモダンブラウザはCSS content-visibilityをサポートするようになりました。content-visibility:autoを使用すると、必要になるまでオフスクリーンコンテンツのレンダリングと描画をスキップできます。レンダリングコストが高い長いHTML文書がある場合は、このプロパティを試してみてください。

動的コンテンツのリストをレンダリングする場合、react-window のようなライブラリを使用することをお勧めします。多くのリスト仮想化ライブラリが今日行うようなdisplay:noneまたはオフスクリーンのときにDOMノードを削除するcontent-visibility:hiddenバージョンのライブラリが、積極的に使用するバージョンに勝つのは困難でしょう。

ソース

• patterns.dev/vanilla/virtual-lists

参考資料

• Rendering performant lists with react-window
• Creating More Efficient React Views with Windowing
• Rendering lists with react-virtualized
• Rendering large lists with react-virtualized