Repolode
提交项目
bvaughn

bvaughn/react-window

用于高效渲染大型列表和表格数据的 React 组件，只挂载当前可见的行和单元格。

在 GitHub 查看官网
Star
17,199
Fork
815
未关闭 Issue
0
最近提交
4小时前

这是什么？

react-window 是一个 React 组件库，用于展示长列表和网格数据。它避免了一次性渲染大量 DOM 节点带来的性能问题：组件只渲染视口内可见的条目，外加可配置的预渲染缓冲区。

库中提供两个组件：List 用于按行展示数据，Grid 用于按行和列排布的数据。两者都通过传入行或单元格渲染组件与数量来工作，并支持固定或动态尺寸、百分比尺寸、自定义 key 以及滚动位置控制。滚动容器可以是组件自身、祖先元素或 window，同时还提供命令式 ref 用于调用滚动方法。npm 包内附带 TypeScript 类型定义。

核心功能

  • 01只渲染可见的行或单元格，大数据集下 DOM 规模保持较小
  • 02提供用于行数据的 List 和用于二维表格数据的 Grid
  • 03支持固定、百分比和函数计算的行高与列宽
  • 04通过 hook 支持动态行高测量
  • 05可通过 scrollElement 跟随 window 或祖先元素滚动
  • 06提供用于滚动的命令式 ref API 以及 TypeScript 类型

适用场景

  • 在 React 应用中渲染成千上万条聊天消息、日志或信息流
  • 在 Web 仪表盘中构建数据表格或类电子表格的网格
  • 流畅展示很长的下拉或选择列表
  • 在随页面整体滚动的页面中嵌入虚拟化列表

快速上手

  1. 1

    从 NPM 安装该库

    npm install react-window
  2. 2

    TypeScript 类型定义已包含在发布的 dist 文件夹中；用法请参阅文档网站

使用前须知

  • 根据 README，动态行高的效率低于预先确定的尺寸。

标签

#react#virtualization#list#grid#performance#typescript#ui-components

常见问题

react-window 是什么？
用于高效渲染大型列表和表格数据的 React 组件，只挂载当前可见的行和单元格。 react-window 是一个 React 组件库，用于展示长列表和网格数据。它避免了一次性渲染大量 DOM 节点带来的性能问题：组件只渲染视口内可见的条目，外加可配置的预渲染缓冲区。
react-window 可以免费使用吗？用的什么许可证？
react-window 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
react-window 还在维护吗？
活跃维护中。react-window 最近一次提交是在 2026年10月22日。
react-window 适合用来做什么？
在 React 应用中渲染成千上万条聊天消息、日志或信息流 在 Web 仪表盘中构建数据表格或类电子表格的网格 流畅展示很长的下拉或选择列表 在随页面整体滚动的页面中嵌入虚拟化列表
react-window 怎么安装和运行？
从 NPM 安装该库: npm install react-window TypeScript 类型定义已包含在发布的 dist 文件夹中；用法请参阅文档网站
在哪里获取 react-window？
源代码和安装说明在 GitHub 上：https://github.com/bvaughn/react-window

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目