Warper是一个基于Rust和WebAssembly开发的开源React虚拟化库，现已发布7.0版本。该版本带来了性能优化、对打包工具的兼容性提升，以及更完善的开发者工具。
Warper 7.2引入了多项新功能，包括使用TypedArrays实现零分配的热路径处理、用于帧计时的高效循环缓冲区操作、对各种打包工具的支持，以及能在不同设备视口中正常运行的演示示例。
该库采用了一种独特的虚拟化实现方式：它将滚动计算任务交由Rust编译后的WebAssembly模块来处理。那些对性能要求极高的操作，比如二分搜索、范围计算和偏移量查找，都是由编译后的WASM代码来执行的，而非JavaScript。此外，该库还维护了一个Fenwick树（二叉索引树），用于存储各项的高度信息，这使得前缀和查询的复杂度为O(log n)，而对于高度固定的元素，查找操作的时间复杂度仅为O(1)。
v7版本的一个关键变化是：在热路径中用TypedArrays（如Int32Array、Float64Array）替代了普通的数组结构，这样一来，在滚动过程中就无需进行垃圾回收操作了。此外，该版本还将用于帧计时的push()/shift()操作替换为了常数时间复杂度的循环缓冲区操作，从而避免了早期版本中存在的不必要的内存分配问题。
要开始使用Warper，只需安装一个包即可：
npm install @itsmeadarsh/warper
基本用法是使用useVirtualizer钩子，该钩子会返回用于渲染的可见范围及偏移量信息：
import { useVirtualizer } from "@itsmeadarsh/warper";
据开发者在Reddit上分享的测试数据来看，Warper相比其他成熟的虚拟化库具有显著的性能优势。例如，在测试100,000个元素的情况下，react-window的平均帧率为40 FPS，而Warper则能达到120 FPS；当元素数量增加到100万时，这一差距进一步拉大：react-window的帧率降至约12 FPS，而Warper依然保持118 FPS。
在React虚拟化领域，目前已有许多成熟的库可供选择。其中，react-window最近发布了v2.0版本，该版本具备自动调整大小和原生TypeScript支持功能，其压缩后的体积约为6KB，是目前最轻量级的选项。TanStack Virtual提供了一种与框架无关的实现方案，其体积约为12KB；而react-virtualized虽然功能丰富，体积为25KB，但通常被认为是一个较为臃肿的选择。Warper的压缩后体积约为8.7KB，它是这个类别中唯一一个使用WebAssembly引擎的库。
社区对Warper的反应褒贬不一。在Reddit上，有用户对该技术表示赞赏，但也质疑其实际应用需求：
你宣传的那些性能数据确实很棒。但是说实话，谁会真的需要渲染100万个元素呢？
另一位用户回应道：
1000万行数据这种大规模测试场景，其实是为了检验该工具在极端情况下的表现如何。不过，对于规模超过1000行的数据表来说，尤其是在金融行业，它们确实有着实际的应用价值。
有几位用户报告了在Firefox浏览器中出现的兼容性问题，其中有一位用户特别指出：
你在Chrome浏览器中的示例显示，当数据行数超过588673行时，页面就无法继续滚动下去；因此，在我尝试过的任何浏览器中，那些声称该工具能够处理100万行以上数据的说法都未经验证。
作者对此进行了回应：
我想这应该是Chrome浏览器默认设定的最大滚动限制吧。
该工具的打包文件大小也有了显著改善。在早期版本中，打包后的文件大小超过了50KB，但开发者后来通过压缩优化，将其大小降到了大约5.9KB，并且保证这样做不会对程序的性能产生任何影响。目前，Universal Bundler已经能够支持Vite、Webpack、Rollup、esbuild、Parcel以及Next.js等开发框架。
该项目的文档可以在其GitHub仓库中找到。Warper是一款基于MIT许可证开发的开源工具。
