react-window使用

发表于 更新于 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 2 分钟

海量列表数据如果一次性全部渲染出DOM，必将降低WEB性能，为此可以使用虚拟列表进行优化，原理就是程序中维护的还是完整列表，但实际上永远只是渲染一部分，随着滚动，程序动态切换渲染部分。因此足够的快且增加一部分的内容进行预渲染，实际上用户是无感知的。react生态下，可以选择使用react-window。这里描述下使用方法。

使用

直接上代码

1
2
3
4
5
6
7
8
9
<FixedSizeList height={430}
                         itemCount={logs.length}
                         itemSize={100}
                         width={'100%'}
                         className={'txlogs-vtable'}>
          {
            Row(logs)
          }
        </FixedSizeList>
1
2
3
4
5
6
7
8
9
10
11
12
13
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定义文件。

注意

  1. 比如纵向滚动，每行的高就一定要确定。
  2. 对于每行，参数style需要传到行组件中，否则滚动出错/闪烁，原因是style中使用了绝对定位来确定每个行元素在整个滚动窗体中的位置。

延伸

  • 如antd-react组件库表格组件中对于虚拟列表支持，使用的就是react-window。

写在最后

对于大数据的显示，无限滚动算是其中一种方案，实际上也可以在功能设计上调整来避免，比如分页，so，技术只是服务于产品设计，灵活选择方案吧。