开始吧！

首先创建一个React 应用

create-react-app virtualization

应用将展示1000条如下这样的评论：

我们引入第三方库lorem-ipsum来生成模拟数据：

cd virtualization

npm install --save lorem-ipsum

在 src/App.js 中引入 lorem-ipsum：

import loremIpsum from 'lorem-ipsum';

接下来创造一个1000条数据的数组：

const rowCount = 1000;

class App extends Component {
  constructor() {
    super();
    this.list = Array(rowCount).fill().map((val, idx) => {
      return {
        id: idx, 
        name: 'John Doe',
        image: 'http://via.placeholder.com/40',
        text: loremIpsum({
          count: 1, 
          units: 'sentences',
          sentenceLowerBound: 4,
          sentenceUpperBound: 8 
        })
      }
    });
  }
  //...
}

以上每条数据都包含 id、用户名、图片、随机生成4~8个字评论。

在 render() 中使用这个数组：

render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">Welcome to React</h1>
      </header>
      <div className="list">
        {this.list.map(this.renderRow.bind(this))}
      </div>
    </div>
  );
}

增加 renderRow() 来创造列：

renderRow(item) {
  return (
    <div key={item.id} className="row">
      <div className="image">
        <img src={item.image} alt="" />
      </div>
      <div className="content">
        <div>{item.name}</div>
        <div>{item.text}</div>
      </div>
    </div>
  );
}

在 src/App.css 中加点样式：

.list {
  padding: 10px;
}

.row { 
  border-bottom: 1px solid #ebeced;
  text-align: left;
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.image {
  margin-right: 10px;
}

.content {
  padding: 10px;
}

好了，启动项目 yarn start，可以看到如下画面：

查看元素，我们可以看到 DOM 上挂载了非常多的 div：

我们来测测性能

如果你用的是 Chrome，只需几步，快速测试性能：

打开开发者工具
按Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) 来打开命令菜单
输入 render，下拉框中选择 Show Rendering。
点击 render 页签，FPS Meter 前打钩。
滚动列表

我们可以看到，当滚动条滚动的时候，帧率从60掉到了38左右。这还是只有1000条数据情况，如果再增大数据，浏览器会出现卡顿，甚至卡死。

接着我们来看看react-virtualized是如何提高性能的？

react-virtualized原理

核心原理：只渲染你所见的。

上面的应用渲染了1000条评论，但屏幕只为你展示了10来条数据，那另外990条的渲染就是浪费的。

如果我们只渲染可见的评论，当鼠标滚动查看更多的时候，将新的节点替换旧的节点。这样就完美解决了性能瓶颈的问题。

怎么用呢？

首先在 src/App.js 中，引入 List 组件：

import { List } from "react-virtualized";

替换 render() 原有代码：

<div className="list">

  {this.list.map(this.renderRow.bind(this))}

</div>

使用 List 组件

const listHeight = 600;

const rowHeight = 50;

const rowWidth = 800;

//...

<div className="list">

  <List

    width={rowWidth}

    height={listHeight}

    rowHeight={rowHeight}

    rowRenderer={this.renderRow.bind(this)}

    rowCount={this.list.length} />

</div>

改写 renderRow()：

renderRow({ index, key, style }) {
  return (
    <div key={key} style={style} className="row">
      <div className="image">
        <img src={this.list[index].image} alt="" />
      </div>
      <div className="content">
        <div>{this.list[index].name}</div>
        <div>{this.list[index].text}</div>
      </div>
    </div>
  );
}

启动应用 yarn start：

查看元素：

可以看到只渲染了可见的元素。

性能怎么样呢？

用上面相同的方法测试：

可以看到基本维持在60帧左右。性能杠杠的（^_^）

以上只是对react-virtualized的简单应用，感兴趣可以去试试！

感谢阅读！

本文翻译自Esteban Herrera的Rendering large lists with React Virtualized