React实现虚拟列表的优秀库介绍

在 React 中，有一些优秀的库可以帮助你实现高效的虚拟列表渲染。以下是几个常用的库：

1. react-window

react-window 是一个轻量级的虚拟列表库，适用于大多数虚拟列表需求。它提供了简单易用的 API 和良好的性能。

安装

npm install react-window

示例代码

import React, { useCallback } from 'react';
import { FixedSizeList as List } from 'react-window';const generateUniqueKey = () => `${new Date().getTime()}-${Math.random().toString(36).substr(2, 9)}`;const DATA_LIST = Array.from({ length: 100000 }, (_, index) => ({key: generateUniqueKey(),slogan: `Item ${index + 1}`,bgColor: `hsl(${Math.random() * 360}, 100%, 75%)`
}));const ITEM_HEIGHT = 35;const Row = ({ index, style }) => (<div style={{ ...style, backgroundColor: DATA_LIST[index].bgColor }}>{DATA_LIST[index].slogan}</div>
);const VirtualListPage = () => (<Listheight={window.innerHeight}itemCount={DATA_LIST.length}itemSize={ITEM_HEIGHT}width={'100%'}>{Row}</List>
);export default VirtualListPage;

2. react-virtualized

react-virtualized 是一个功能强大的虚拟列表库，提供了更多的功能和配置选项，适用于复杂的虚拟列表需求。

安装

npm install react-virtualized

示例代码

import React from 'react';
import { List } from 'react-virtualized';const generateUniqueKey = () => `${new Date().getTime()}-${Math.random().toString(36).substr(2, 9)}`;const DATA_LIST = Array.from({ length: 100000 }, (_, index) => ({key: generateUniqueKey(),slogan: `Item ${index + 1}`,bgColor: `hsl(${Math.random() * 360}, 100%, 75%)`
}));const ITEM_HEIGHT = 35;const rowRenderer = ({ key, index, style }) => (<div key={key} style={{ ...style, backgroundColor: DATA_LIST[index].bgColor }}>{DATA_LIST[index].slogan}</div>
);const VirtualListPage = () => (<Listwidth={window.innerWidth}height={window.innerHeight}rowCount={DATA_LIST.length}rowHeight={ITEM_HEIGHT}rowRenderer={rowRenderer}/>
);export default VirtualListPage;

3. react-virtual

react-virtual 是一个现代的虚拟列表库，提供了简单的 API 和良好的性能。

安装

npm install @tanstack/react-virtual

示例代码

import React from 'react';
import { useVirtual } from '@tanstack/react-virtual';const generateUniqueKey = () => `${new Date().getTime()}-${Math.random().toString(36).substr(2, 9)}`;const DATA_LIST = Array.from({ length: 100000 }, (_, index) => ({key: generateUniqueKey(),slogan: `Item ${index + 1}`,bgColor: `hsl(${Math.random() * 360}, 100%, 75%)`
}));const ITEM_HEIGHT = 35;const VirtualListPage = () => {const parentRef = React.useRef();const rowVirtualizer = useVirtual({size: DATA_LIST.length,parentRef,estimateSize: React.useCallback(() => ITEM_HEIGHT, []),});return (<divref={parentRef}style={{height: '100vh',width: '100%',overflow: 'auto',}}><divstyle={{height: `${rowVirtualizer.totalSize}px`,width: '100%',position: 'relative',}}>{rowVirtualizer.virtualItems.map(virtualRow => (<divkey={virtualRow.index}ref={virtualRow.measureRef}style={{position: 'absolute',top: 0,left: 0,width: '100%',height: `${ITEM_HEIGHT}px`,transform: `translateY(${virtualRow.start}px)`,backgroundColor: DATA_LIST[virtualRow.index].bgColor,}}>{DATA_LIST[virtualRow.index].slogan}</div>))}</div></div>);
};export default VirtualListPage;

4. antd 库：优秀的 React 库，这里不多介绍，详情看官网。

总结

• react-window：轻量级，适用于大多数虚拟列表需求。
• react-virtualized：功能强大，适用于复杂的虚拟列表需求。
• react-virtual：现代化，提供简单的 API 和良好的性能。
• antd 库：优秀的 React 库，不多介绍。

根据你的具体需求选择合适的库，可以大大简化虚拟列表的实现，并提高性能。