React Virtuoso：为长列表渲染而生的 React 工具

React Virtuoso：为长列表渲染而生的 React 工具

React Virtuoso 目前累计获得 6,359 Star，是一个专注于大列表渲染优化的组件库，目标是在保持性能的同时，减少开发者在高度计算、滚动定位、响应式布局上的重复劳动。

功能覆盖

项目同时提供多个组件，分别处理不同类型的列表场景。

Virtuoso 组件适合常规的无限滚动列表，支持变量高度条目，无需提前测量或硬编码高度。前端页面常见的聊天消息列表可以直接套用。

GroupedVirtuoso 在数据需要分组展示时使用，支持固定分组头部，适合联系人列表、按首字母排序的索引页等结构化内容。

VirtuosoGrid 负责同尺寸网格布局，通过 CSS 即可控制列数和响应式断点，适合商品陈列、相册缩略图等场景。

Masonry 处理不等高瀑布流，常见于图片墙和产品展示页。TableVirtuoso 则把虚拟化能力带入 HTML 表格，保留固定表头和固定列，同时兼容 Tanstack Table 和 MUI Table。

此外，组件还暴露了顶部固定项、底部加载更多、滚动到指定索引等常用交互能力，能够覆盖大多数长列表产品的滚动需求。

适用场景

如果一个页面需要渲染超过几百条数据，鼠标滚轮一滑就有明显卡顿，通常可以考虑虚拟化。React Virtuoso 在聊天、通知中心、商品列表、评论流等场景中可以直接使用。对于社交媒体内容流、客服会话窗口、邮件列表等需要保留滚动位置并在数据更新时保持体验的场景，这个库会减少不少边界处理工作。

上手方式

通过 npm 安装后，最简示例只需要指定高度和条目数量即可运行。库的官方站点提供了不同场景的在线示例和 API 说明，按需查阅比较直接。

整体来看，React Virtuoso 在虚拟化这个细分方向上做得比较完整，组件拆分清晰，常见长列表场景基本都能找到对应实现。如果你正在找一套 React 虚拟列表方案，可以把这个仓库列为候选之一。

找一套 React 虚拟列表方案，可以把这个仓库列为候选之一。