react-window使用
·
1 min read
海量列表数据如果一次性全部渲染出DOM，必将降低WEB性能，为此可以使用虚拟列表进行优化，原理就是程序中维护的还是完整列表，但实际上永远只是渲染一部分，随着滚动，程序动态切换渲染部分。因此足够的快且增加一部分的内容进行预渲染，实际上用户是无感知的。react生态下，可以选择使用
react-window。这里描述下使用方法。
使用
直接上代码
<FixedSizeList height={430}
itemCount={logs.length}
itemSize={100}
width={'100%'}
className={'txlogs-vtable'}>
{
Row(logs)
}
</FixedSizeList>
const Row = (logs: TxLog[]) => memo(({ index, style }: { index: number; style: CSSProperties }) => {
const item = logs[index];
return <div key={index} style={style}>
<div className={'txlogs-item'}>
<div className={'flex meta-layout'}>
<div className={'datetime'}>
{
formatDate(new Date(item.timestamp * 1000))
}
</div>
</div>
</div>;
});
以上即基本的使用例子，完整参数支持等查看官方文档或者repo d.ts定义文件。
注意
- 比如纵向滚动，每行的高就一定要确定。
- 对于每行，
参数style需要传到行组件中，否则滚动出错/闪烁，原因是style中使用了绝对定位来确定每个行元素在整个滚动窗体中的位置。
延伸
- 如antd-react组件库表格组件中对于虚拟列表支持，使用的就是react-window。
写在最后
对于大数据的显示，无限滚动算是其中一种方案，实际上也可以在功能设计上调整来避免，比如分页，so，技术只是服务于产品设计，灵活选择方案吧。
