react-window 多条列表数据加载（虚拟滚动）

Z时代
2024-01-10
分类：综合

react

React Window是一个有效呈现大型列表和表格数据的组件，是React-virtualized的完全重写。

React Window专注于使软件包更小，更快，同时API（和文档）对初学者尽可能友好。

安装

Npm

npm i react-window

Yarn

yarn add react-window

使用

import { FixedSizeList as List } from 'react-window';
const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);
const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);