項(xiàng)目技術(shù)棧 react+antd+axios

antd中的table組件基本默認(rèn)的是數(shù)據(jù)有分頁(yè)的情況，實(shí)際業(yè)務(wù)中會(huì)有這種情況，需要一次性展示接口返回的全部數(shù)據(jù)，后臺(tái)不做分頁(yè)，假如有1000條數(shù)據(jù)，則直接返回1000條數(shù)據(jù)，供用戶(hù)操作。

大量數(shù)據(jù)時(shí)候要對(duì)表格進(jìn)行操作的話(huà)，性能就很低，會(huì)出現(xiàn)頁(yè)面卡死的情況。這時(shí)候就需要優(yōu)化表格性能了。

剛開(kāi)始想用antd的list中的滾動(dòng)加載無(wú)限長(zhǎng)度列表組件，下面是對(duì)react-virtualized的介紹

結(jié)合 react-virtualized 實(shí)現(xiàn)滾動(dòng)加載無(wú)限長(zhǎng)列表，帶有虛擬化（virtualization）功能，能夠提高數(shù)據(jù)量大時(shí)候長(zhǎng)列表的性能。
virtualized 是在大數(shù)據(jù)列表中應(yīng)用的一種技術(shù)，主要是為了減少不可見(jiàn)區(qū)域不必要的渲染從而提高性能，特別是數(shù)據(jù)量在成千上萬(wàn)條效果尤為明顯。了解更多

但是這個(gè)組件里面使用的list，我需要對(duì)table進(jìn)行多選框的各種操作，就放棄了這種方式，當(dāng)然若是不需要這種操作，可以直接使用antd這個(gè)list的組件了。

然后問(wèn)度娘，度娘給我提供了個(gè)插件 virtualizedtableforantd 完美解決了我這個(gè)問(wèn)題。
使用方法

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的數(shù)據(jù)
             // bordered
             rowSelection={rowSelection} //多選的相關(guān)操作
             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 })} // 這是最核心的代碼
          />
}
}

就這樣就完美的解決了性能的問(wèn)題。這里y:500是確定了這個(gè)table的高度為500，加載完數(shù)據(jù)后，就展示500高度的數(shù)據(jù)，當(dāng)向下滑動(dòng)滾動(dòng)條后，就開(kāi)始加載后面的數(shù)據(jù)。這樣就解決了table數(shù)據(jù)過(guò)多的性能問(wèn)題了。

注意VTComponents({ id: 1000 })里面id一定是number類(lèi)型，若有多個(gè)table用到了這個(gè)插件，記得id要不一樣，不然會(huì)有問(wèn)題。