大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

今天给大家带来的主题是React 生态不容错过的6大顶级虚拟滚动库。话不多说, 进入正题。

react-virtualized

React-virtualized 使用一组元素来实现虚拟渲染，这些元素的操作基本如下：

• 确定哪些项目在列表的显示区域（视口）内可见。
• 通过操作 top、left、width 和 height 样式值，使用容器 (div) 的相对位置与其内部子组件的绝对位置。

react-virtualized 由五个关键组成部分：

• Grid：沿水平轴和垂直轴以表格形式显示数据。
• List：内部使用 Grid 组件来呈现组件列表。
• Table：创建一个具有可滚动垂直主体和固定标题的表格。 此外，内部还使用了 Grid 组件。
• Masonry：显示用户定位的、动态缩放的单元格，具有垂直滚动的功能。
• Collection：显示随机定位和重叠的数据。

这些组件在比较对象时只需比较引用，因为它们扩展自 React.PureComponent，从而提高了效率。

另一方面，React-virtualized 还包含几个 HOC 元素：

• ArrowKeyStepper：为了让另一个组件对箭头键事件做出反应
• AutoSizer：自动修改另一个组件的宽度和高度。
• CellMeasurer：通过以对用户隐藏的方式暂时显示单元格，会自动计算该单元格的内容。
• ColumnSizer：计算网格单元的列宽。
• InfiniteLoader：当用户滚动浏览列表、表或网格时，它控制数据获取过程。
• MultiGrid：向 Grid 组件添加固定列和/或行来装饰。
• ScrollSync：两个或多个组件的滚动是同步的。
• WindowScroller：使得可以使用窗口的滚动位置来滚动表或列表组件

目前 React-virtualized 在 Github 上通过 MIT 协议开源，有超过 25.5k 的 star、3.7k 的 fork、81.5k 的项目依赖量，是一个值得关注的前端优质开源项目。

react-window

react-window 的工作原理是仅渲染大型数据集的一部分（刚好足以填充视口），从而有助于解决一些常见的性能瓶颈：

• 减少渲染初始视图和处理更新所需的工作量（和时间）
• 通过避免 DOM 节点的过度分配来减少内存占用

值得注意的是，React-Window 是 React-Virtualized 的完全重写，前者并没有尝试解决尽可能多的问题或支持尽可能多的用例。 相反，更加专注于使软件包更小、更快。 同时，React-Window 还花了很多心思让 API（和文档）尽可能适合初学者。

如果 react-window 提供了项目需要的功能，强烈建议使用它而不是 react-virtualized。 但是，如果需要仅 react-virtualized 提供的功能，有两个选择：

• 继续使用 react-virtualized ，而且也仍然被许多成功的项目广泛使用
• 创建一个组件来装饰 react-window 基元之一并添加需要的功能，甚至可以想将此组件发布到 NPM

目前 react-window 在 Github 上通过 MIT 协议开源，有超过 14.7k 的 star、125k 的项目依赖量，是一个非常优质的前端开源项目。

React Virtuoso

React Virtuoso 是一系列功能强大、易于使用的 React 组件，可使用虚拟化渲染来显示大型数据集。 与其他虚拟化解决方案不同，Virtuoso 组件自动处理具有可变大小的项目以及项目大小的变化。

React Virtuoso 包括一个平面列表 (Virtuoso )、一个带有粘性标题的分组列表 (GroupedVirtuoso)、一个具有响应式布局的网格 (VirtuosoGrid) 和一个表格 (TableVirtuoso)。 该包是 tree-shakeable 的，因此最终的 Bundle 包不会因未引用的组件而膨胀。

• 开箱即用的变量元素尺寸， 无需硬编码元素尺寸
• 支持反向（自下而上）滚动和前置项目（聊天、提要等）；
• 具有粘性标题的分组模式；
• 响应式网格布局；
• 支持 Table
• 自动处理内容调整大小；
• 自定义页眉、页脚和空列表组件；
• 固定的热门项目；
• 无限滚动，按下即可加载更多；
• 初始最上面的项目索引；
• 滚动到索引方法。

目前 React Virtuoso 在 Github 上通过 MIT 协议开源，有超过 4.3k 的 star、7.8k 的项目依赖量，是一个值得关注的前端开源项目。

TanStack Virtual

TanStack Virtual 是一个无头 UI 实用程序，用于虚拟化 JS/TS、React、Vue、Svelte 和 Solid 中的长列表元素。 它不是一个组件，因此不会附带或为开发者渲染任何标记或样式。

TanStack Virtual 需要开发者进行一些标记和样式，从而保留对样式、设计和实现的 100% 控制。

TanStack Virtual 具有以下特点：

• 专为零设计而设计：无头虚拟化意味着开发者始终可以控制标记、样式和组件，从而实现任何想要的样式 UI。
• 体积小： TanStack Virtual 使用每个字节来提供强大的性能，尽量通过减少体积来保证用户体验
• 最大的可组合性：通过单个函数/Hooks，开发者将获得垂直、水平和网格样式布局的无限虚拟化。 该 API 很小（实际上只有 1 个函数），但它的可组合性潜能却很大。

目前 TanStack Virtual 在 Github 上通过 MIT 协议开源，有超过 4.5k 的 star、是一个值得关注的前端开源项目。

react-tiny-virtual-list

react-tiny-virtual-list 是一个微小但功能强大的列表虚拟化库，具有零依赖性 。

典型特征包括：

• 体积小且无依赖性
• gzip 后仅 3kb
• 毫不费力地渲染数百万个项目
• 滚动到索引或设置初始滚动偏移
• 支持固定或可变的高度/宽度
• 支持垂直或水平列表

目前 react-tiny-virtual-list 在 Github 上通过 MIT 协议开源，有超过 2.4k 的 star、17.5k 的项目依赖量，是一个值得关注的前端开源项目。

react-cool-virtual

react-cool-virtual 是一个微小的 React hook，可以轻松渲染大型数据集。

react-cool-virtual 的典型优势包括：

• 使用 DOM 回收，以高性能方式渲染数百万个项目。
• 易于使用，基于 React hook。
• 轻松应用样式，只需少量设置。
• 支持固定、可变、动态和实时高度/宽度。
• 支持响应式网页设计（RWD）以获得更好的用户体验。
• 支持粘性标题以构建趋势列表。
• 内置加载更多回调，供您处理无限滚动+骨架屏幕。
• 用于偏移、项目和对齐的命令式滚动方法。
• 开箱即用的平滑滚动，效果可 DIY。
• 可以为聊天、提要等实现粘到底部和预先挂起的项目。
• 为您提供 isScrolling 指示器，用于 UI 占位符或性能优化。
• 支持服务器端渲染（SSR），以实现快速 FP + FCP 和更好的 SEO。
• 支持 TypeScript 类型定义。
• 超级灵活的 API 设计，在构建时考虑了 DX。
• 体积小（gzip 压缩后约 3.1kB）。 除了反应之外，没有外部依赖项。

目前 react-cool-virtual 在 Github 上通过 MIT 协议开源，有超过 1.2k 的 star、是一个值得关注的前端开源项目。

参考资料

https://github.com/petyosi/react-virtuoso

https://virtuoso.dev/

https://github.com/bvaughn/react-window

https://www.youtube.com/watch?app=desktop&v=8glwCms18rQ

https://github.com/bvaughn/react-virtualized

https://www.scaler.com/topics/react/react-virtualized/

https://github.com/TanStack/virtual

https://github.com/clauderic/react-tiny-virtual-list

https://github.com/wellyshen/react-cool-virtual

https://www.youtube.com/watch?app=desktop&v=ahpbfQybX94