README.zh-CN.md

@rc-component/virtual-list

_{Ant Design 生态的一部分。}

📜 React 虚拟列表组件，用于高性能渲染长列表。

English | 简体中文

特性

• 面向 React 构建，并由 rc-component 团队维护。
• 被 Ant Design 使用和其他 React 组件库使用。
• 提供 TypeScript 类型声明，同时输出 ES module 和 CommonJS 产物。
• 示例、测试和预览构建与包源码保持一致。

安装

npm install @rc-component/virtual-list

使用

import List from '@rc-component/virtual-list';

const data = Array.from({ length: 1000 }).map((_, index) => ({
  id: index,
  label: `Item ${index}`,
}));

export default () => (
  <List data={data} height={240} itemHeight={32} itemKey="id">
    {(item) => <div>{item.label}</div>}
  </List>
);

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

List

属性	说明	类型	默认值
children	每一项的渲染函数。第三个参数包含旧浏览器兼容路径使用的测量 props。	(item, index, props) => ReactElement	-
component	自定义列表容器元素。	string | ComponentType	div
data	虚拟列表渲染的数据项。	T[]	-
disabled	禁用滚动位置检查，通常用于配合动画。	boolean	false
fullHeight	holder 是否保持完整高度。	boolean	true
height	可视列表高度。	number	-
itemHeight	用于计算虚拟范围的最小项高度。	number	-
itemKey	数据项 key 字段或 key 获取函数。	string | (item) => React.Key	-
onScroll	列表滚动时调用。	React.UIEventHandler<HTMLElement>	-
styles	自定义滚动条部位样式。	object	-
virtual	启用虚拟渲染。	boolean	true

本地开发

npm install
npm start
npm test
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/virtual-list 基于 MIT 许可证发布。