跳到主要内容

入门

创建日期：2026-08-29 ｜ 最近更新：2026-08-29

react-virtuoso 是什么​

react-virtuoso 是一个 React 虚拟列表（虚拟滚动） 组件库。核心能力：不管数据有多少，始终只渲染视口附近的那几十个节点，保证滚动流畅。

它和 react-window / 手写虚拟列表的区别：

react-windowreact-virtuoso手写
动态高度需自己维护测量自动测量（ResizeObserver）自己做
特殊场景无表格 / 网格 / 分组 / 聊天内置自己做
上手成本中低（开箱即用）高
适用定高列表、极致体积动态高度、内容不可控有特殊定制需求

安装​

npm i react-virtuoso

最小示例​

import { Virtuoso } from 'react-virtuoso';

function App() {
  return (
    <Virtuoso
      style={{ height: '400px' }}     // 必须有确定高度（容器或 style）
      data={items}                     // 数据数组
      itemContent={(index, item) => (  // 渲染每一项
        <div>{item.name}</div>
      )}
    />
  );
}

三条基本规则：

  1. 给虚拟列表一个确定的高度（style 或父容器）——它是基于"视口高度 + 滚动位置"算渲染范围的；
  2. itemContent(index, item) 负责渲染每一项，函数里直接写你的行内容；
  3. 不需要自己管偏移量——定位、总高度占位、回收，virtuoso 全自动。

虚拟化原理（一句话）​

总高度占位 + 只渲染视口内（含 overscan 缓冲区）的项 + translateY 绝对定位——滚动时通过 startIndex/endIndex 算出该渲染哪些。

详细原理和量级选型，见本博客《虚拟列表大厂方案调研》。