react virtualizedで件数の多いリストデータを効率よく描画する

Reactで数万件のデータを一度に描画した時に、スクロールが重くなってしまうので react-virtualized を使って解決しました。

react virtualizedとは？

原理としてはスクロールに応じて、使っていないコンポーネントを次のデータ表示のために再利用しているといったイメージになります。

以下の記事が図を使っていてわかりやすい説明をしています。

使ってみる

インストール

$ npm install react-virtualized --save
$ # or
$ yarn add react-virtualized

導入

//これはアプリケーションの元ファイルで一度呼べばいい模様
import 'react-virtualized/styles.css'

react virtualized を使った簡単なテーブルの例です。
10万件のデータを表示してみます。

virtualizedTable.js

import React from 'react';
import {AutoSizer, Table, Column} from 'react-virtualized';

export class VirtualizedTable extends React.Component {
  render() {
    let data = new Array(100000).fill({}).map((item, i) => ({number: i, text: `product ${i}`}));
    return (
      <AutoSizer>
        {({width, height}) => {
          return (
            <Table
              rowCount={data.length}
              rowGetter={({index}) => data[index]}
              rowHeight={30}
              width={width}
              height={500}
              headerHeight={30}
            >
              <Column 
                dataKey={'number'}
                label={'No'}
                cellDataGetter={({rowData}) => rowData.number}
                width={120}
                height={30}
              />
              <Column 
                dataKey={'text'}
                label={'テキスト'}
                cellDataGetter={({rowData}) => rowData.text}
                width={120}
                height={30}
              />
            </Table>
          )
        }}
      </AutoSizer>
    );
  }
}

これで滑らかな表示が可能となりました。