深入理解React Virtual：高性能列表虚拟化解决方案

黎云香

于 2025-06-07 09:02:47 发布

阅读量353

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00118/article/details/148487685

深入理解React Virtual：高性能列表虚拟化解决方案

virtual 项目地址: https://gitcode.com/gh_mirrors/virtu/virtual

什么是React Virtual？

React Virtual是一个无头UI工具库，专门用于在React应用中实现长列表元素的虚拟化渲染。所谓"虚拟化"（Virtualization），是指只渲染用户当前可见区域内的元素，而非一次性渲染整个长列表中的所有元素。这种技术能显著提升应用性能，特别是在处理包含成千上万条数据的列表时。

核心概念解析

虚拟化器（Virtualizer）

React Virtual的核心是Virtualizer，它负责计算哪些列表项应该被渲染到视图中。虚拟化器可以配置为垂直方向（默认）或水平方向，通过组合这两种轴向配置，甚至可以实现网格布局的虚拟化。

无头UI设计理念

React Virtual采用了"无头UI"（Headless UI）的设计理念，这意味着它不提供任何预设的UI组件或样式。开发者需要自行处理DOM结构和样式，这种设计带来了以下优势：

100%的样式控制权
完美适配任何设计系统
灵活的实现方式

基础使用示例

让我们通过一个简单的代码示例来理解React Virtual的基本用法：

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList() {
  // 1. 创建列表容器的引用
  const parentRef = React.useRef<HTMLDivElement>(null);

  // 2. 初始化虚拟化器
  const rowVirtualizer = useVirtualizer({
    count: 10000, // 列表项总数
    getScrollElement: () => parentRef.current, // 获取滚动容器
    estimateSize: () => 35, // 预估每个列表项的高度
  });

  return (
    <div
      ref={parentRef}
      style={{ height: '400px', overflow: 'auto' }}
    >
      {/* 3. 创建虚拟列表的容器 */}
      <div
        style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {/* 4. 只渲染可见的列表项 */}
        {rowVirtualizer.getVirtualItems().map((virtualItem) => (
          <div
            key={virtualItem.key}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`,
            }}
          >
            第 {virtualItem.index + 1} 行
          </div>
        ))}
      </div>
    </div>
  );
}