table大量数据无分页- virtualizedtablefo

项目技术栈 react+antd+axios

antd中的table组件基本默认的是数据有分页的情况，实际业务中会有这种情况，需要一次性展示接口返回的全部数据，后台不做分页，假如有1000条数据，则直接返回1000条数据，供用户操作。

大量数据时候要对表格进行操作的话，性能就很低，会出现页面卡死的情况。这时候就需要优化表格性能了。

刚开始想用antd的list中的滚动加载无限长度列表组件，下面是对react-virtualized的介绍

结合 react-virtualized 实现滚动加载无限长列表，带有虚拟化（virtualization）功能，能够提高数据量大时候长列表的性能。
virtualized 是在大数据列表中应用的一种技术，主要是为了减少不可见区域不必要的渲染从而提高性能，特别是数据量在成千上万条效果尤为明显。了解更多

但是这个组件里面使用的list，我需要对table进行多选框的各种操作，就放弃了这种方式，当然若是不需要这种操作，可以直接使用antd这个list的组件了。

然后问度娘，度娘给我提供了个插件 virtualizedtableforantd 完美解决了我这个问题。
使用方法

import React from 'react'
import { Table,} from 'antd'
import {VTComponents} from 'virtualizedtableforantd'
class Demo extends React.Component {
render(){
  return <Table 
             className='templateTable'
             dataSource={dataSource}  //dataSource 是table的数据
             // bordered
             rowSelection={rowSelection} //多选的相关操作
             columns={this.columns} 
             pagination={false}
             rowKey={record=> record.id}
             scroll={{ x: '130%', y: 500 }}  //y: 500 it's important!!!
            /*the id is immutable   the height prop is variable */
             components={VTComponents({ id: 1000 })} // 这是最核心的代码
          />
}
}

就这样就完美的解决了性能的问题。这里y:500是确定了这个table的高度为500，加载完数据后，就展示500高度的数据，当向下滑动滚动条后，就开始加载后面的数据。这样就解决了table数据过多的性能问题了。

注意VTComponents({ id: 1000 })里面id一定是number类型，若有多个table用到了这个插件，记得id要不一样，不然会有问题。