react-virtualized 长列表页面性能优化

文档https://www.npmjs.com/package/react-virtualized
npm安装npm install react-virtualized --save

注：ui使用了antd

下面是代码：

import React, { Component } from 'react';
import './App.css';
import { Card } from 'antd';
import 'react-virtualized/styles.css';
import { List } from 'react-virtualized/dist/commonjs/List';


export default class App extends Component{

  constructor(props) {
    super(props)
    this.state = {
      list: []
    }
  }

  componentDidMount(){
    let list = [];
    for (let i = 0; i < 1000000; i++) {
      list.push({});
    }
    this.setState({list});
  }


  render(){
    const { list } = this.state;
    return (
      <div className="App">
        <List
            width={500}
            height={window.innerHeight}
            overscanRowCount={10}
            rowCount={list.length}
            rowHeight={200}
            rowRenderer={(obj) => {
              return (
                <div key={obj.key} style={obj.style}>
                  <Card size="small" title="Small size card" extra={<a href="#">More</a>}>
                    <p>Card content</p>
                    <p>Card content</p>
                    <p>Card content</p>
                  </Card>
                </div>
              )
            }}
        />
      </div>
    );
  }
}

测试1000000条数据都不会卡