React如何渲染大数据量的列表？

本文参考自: 原文地址

我们经常会遇到这种需求，根据数据展示列表。这种代码估计你已经撸过成百上千次了。

但如果你需要同时展示成千上万条数据呢，必然会造成浏览器卡顿，丢帧，甚至卡死的问题。

本文将介绍利用react-virtualized来高效渲染大数据量列表。

开始吧！

首先创建一个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',