react-virtualized React 应用中高效渲染大型列表和表格数据的库
react-virtualized 是一个用于 React 应用中高效渲染大型列表和表格数据的库，它通过 “虚拟化”（Virtualization）技术，只渲染当前可视区域内的元素，从而大幅提升性能，特别适合处理 超长列表、大数据表格、瀑布流等场景。
✅ 一、什么是 “虚拟化（Virtualization）”？
在传统的 React 开发中，如果你渲染一个包含 1万条数据 的列表：
{bigList.map((item) => <div key={item.id}>{item.name}</div>)}👉 那么 React 会在 DOM 中 真实创建 1万个 <div> 元素，即使它们同时不可见（比如在屏幕外），这会导致：
- 卡顿（性能差）
- 内存占用高
- 滚动不流畅
✅ 虚拟化技术（Virtual List）的解决思路：
只渲染当前用户可以看到的那部分 DOM 元素（可视区域内的 items），对于屏幕之外的元素，则不渲染或回收。当用户滚动时，动态替换渲染的内容。
这就是 虚拟列表（Virtual List） 的核心思想，而 react-virtualized 就是实现这一技术的流行 React 库之一。
✅ 二、react-virtualized 是什么？
**react-virtualized 是由社区开发者 Brian Vaughn 开发维护的一个 高性能 React 虚拟化组件库**，它提供了一系列经过优化的组件，用于高效渲染：
- 大型列表（
List） - 表格（
Table） - 网格（
Grid，二维布局） - 瀑布流（
Collection） - 等等
🔗 官网（已归档，但仍可用）：
👉 https://github.com/bvaughn/react-virtualized
⚠️ 注意：虽然这个库已经比较久没有大更新（最后更新是 2020 年左右），但它 仍然非常稳定、可靠，被很多大型项目使用，比如 Jira、Notion（早期）、一些后台管理系统等。
✅ 三、react-virtualized 提供的主要组件
| 组件 | 用途 | 说明 |
|---|---|---|
**List** | 虚拟化一维垂直列表 | 适用于简单的滚动列表，比如长文本列表、消息列表等 |
**Table** | 虚拟化表格（带表头） | 支持固定表头、列宽、排序等，适用于数据表格 |
**Grid** | 虚拟化二维网格布局 | 适用于像图片墙、卡片瀑布流等二维排列的场景 |
**Collection** | 更灵活的虚拟化布局（瀑布流等） | 适合非均匀尺寸的复杂布局，但使用较复杂 |
**WindowScroller** | 让虚拟列表支持随窗口滚动 | 常与 List 或 Grid 配合使用，实现页面级滚动虚拟化 |
✅ 四、为什么选择 react-virtualized？
✅ 优点：
- 高性能： 只渲染可见区域的 DOM，极大提升渲染性能和滚动流畅度
- 成熟稳定： 社区使用广泛，文档较全，被许多知名产品采用
- 灵活： 提供多种虚拟化组件，适应不同 UI 场景
- 支持定制： 可以自定义每个 cell/item 的渲染方式
⚠️ 缺点（或注意事项）：
- 体积较大： 如果你只需要一个简单的虚拟列表，引入整个库可能有点重
- 更新停滞： 最新更新停留在 2020 年左右，但功能已经很完整，一般够用
- API 稍复杂： 比如
List和Grid需要计算rowHeight、overscan等参数
✅ 五、简单使用示例：虚拟化长列表（使用 List 组件）
安装：
npm install react-virtualized
# 或
yarn add react-virtualized示例代码 —— 渲染一个包含 10000 条数据的列表，但只渲染可见部分：
import React from 'react';
import { List } from 'react-virtualized';const listData = Array.from({ length: 10000 }, (_, i) => ({id: i,name: `Item ${i + 1}`,
}));// 每一项的高度（固定高度列表）
const rowHeight = 50;function VirtualizedList() {const rowRenderer = ({ index, key, style }) => {const item = listData[index];return (<div key={key} style={style}>{item.name}</div>);};return (<Listwidth={300}height={400}rowCount={listData.length}rowHeight={rowHeight}rowRenderer={rowRenderer}/>);
}export default VirtualizedList;说明：
width,height: 虚拟列表容器的尺寸rowCount: 数据总条数rowHeight: 每一行的固定高度（如果是动态高度，可以使用CellMeasurer）rowRenderer: 渲染每一行的函数，style用于定位该元素的位置
✅ 六、替代方案（现代轻量级方案）
虽然 react-virtualized 很强大，但也有一些更现代、更轻量的替代库，根据你的需求可以选择：
| 库名 | 特点 | 适用场景 |
|---|---|---|
| react-window（推荐 👍） | 由 react-virtualized 作者 Brian Vaughn 开发的轻量级替代品，API 更简单，性能优秀，适合大多数场景 | 推荐优先使用，特别是你只需要简单的虚拟列表 |
| react-virtuoso | 功能强大，支持动态高度、反向列表、分组列表等高级功能 | 如果你需要更灵活强大的虚拟列表，比如聊天记录、带粘性头部的列表 |
@tanstack/react-virtual（原 react-virtual） | 轻量、灵活，支持多种布局，社区活跃 | 也是一个非常好的现代选择 |
✅ 推荐：如果你是新手，或者只需要一个高性能虚拟列表，优先考虑
react-window，它更简单、更轻量，而且作者是同一个人！
✅ 七、总结
| 项目 | 说明 |
|---|---|
| react-virtualized 是什么？ | 一个用于 React 的高性能 虚拟化列表/表格/网格组件库，通过只渲染可见区域元素来优化长列表性能 |
| 解决了什么问题？ | 避免一次性渲染成千上万 DOM 节点，提升渲染性能、滚动流畅度、降低内存占用 |
| 提供了哪些组件？ | List、Table、Grid、Collection 等，支持一维、二维、表格、瀑布流等布局 |
| 优点 | 成熟稳定、功能强大、支持定制 |
| 缺点 | 体积较大、更新较慢（但依然可用） |
| 现代替代方案 | react-window（更轻量、更简单，推荐）、react-virtuoso、@tanstack/react-virtual |
✅ 一句话总结
**
react-virtualized是一个用于 React 的高性能虚拟化组件库，通过只渲染可视区域内的内容，极大优化超长列表或大数据表格的渲染性能与用户体验，适合数据量大的场景，但现代也有更轻量的替代方案如react-window。**