Repolode
提交项目
bvaughn

bvaughn/react-virtualized

用于高效渲染大型列表和表格数据的 React 组件库，只绘制可见的行和单元格。

在 GitHub 查看官网
Star
27,069
Fork
3,017
未关闭 Issue
0
最近提交
3天前

这是什么？

react-virtualized 是一组 React 组件，用于展示大型列表、网格和表格，而不是一次性渲染所有条目。List、Grid、Table、Masonry 等组件只挂载当前视口内可见的单元格，数据量大时依然能保持较快的渲染速度。

该库还提供 CellMeasurer，用于测量事先无法确定尺寸的单元格；同时提供 InfiniteLoader、ScrollSync、ColumnSizer、ArrowKeyStepper 等高阶组件，分别用于无限加载、滚动同步、列宽调整和键盘导航。Grid、List、Masonry 和 Table 还可以绑定窗口或其他可滚动元素。通过 npm 安装，附带 TypeScript 类型定义。

自 10 版本起，AutoSizer 已拆分为独立的 react-virtualized-auto-sizer 包。对于新项目，可考虑体积更轻的 react-window。

核心功能

  • 01提供 List、Grid、Table、Masonry 等虚拟化组件，只渲染可见单元格。
  • 02通过 CellMeasurer 测量尺寸动态变化的单元格。
  • 03通过 InfiniteLoader 实现滚动时按需加载数据。
  • 04通过 ScrollSync 保持多个滚动区域同步。
  • 05借助 scrollElement 属性支持窗口滚动。
  • 06提供 ES 与 CommonJS 双格式构建及 TypeScript 类型，支持按需摇树优化。

适用场景

  • 在 React 管理后台中渲染包含数千行的表格。
  • 构建带固定表头和固定列的类电子表格网格。
  • 实现分页加载的无限滚动列表或信息流。
  • 展示高度不固定的长列表，例如聊天消息或日志。

快速上手

  1. 1

    使用 npm 安装 react-virtualized

    npm install react-virtualized --save

使用前须知

  • README 建议新项目考虑更轻量的替代方案 react-window。
  • 项目必须自行安装对等依赖 react 和 react-dom。

标签

#react#virtualization#windowing#table#list#grid#performance#typescript#listview#react-components

常见问题

react-virtualized 是什么？
用于高效渲染大型列表和表格数据的 React 组件库，只绘制可见的行和单元格。 react-virtualized 是一组 React 组件，用于展示大型列表、网格和表格，而不是一次性渲染所有条目。List、Grid、Table、Masonry 等组件只挂载当前视口内可见的单元格，数据量大时依然能保持较快的渲染速度。
react-virtualized 可以免费使用吗？用的什么许可证？
react-virtualized 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
react-virtualized 还在维护吗？
活跃维护中。react-virtualized 最近一次提交是在 2026年10月19日。
react-virtualized 适合用来做什么？
在 React 管理后台中渲染包含数千行的表格。 构建带固定表头和固定列的类电子表格网格。 实现分页加载的无限滚动列表或信息流。 展示高度不固定的长列表，例如聊天消息或日志。
react-virtualized 怎么安装和运行？
使用 npm 安装 react-virtualized: npm install react-virtualized --save
在哪里获取 react-virtualized？
源代码和安装说明在 GitHub 上：https://github.com/bvaughn/react-virtualized

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

相关项目