React Virtualized 原理与应用解析 – wiki基地

作者： /

React Virtualized 原理与应用解析：优化大规模列表性能的利器

在现代 Web 应用中，展示大量数据是一个常见的需求。无论是社交媒体的动态流、电子邮件列表、文件浏览器、数据表格还是大型相册，我们都可能需要渲染数千甚至数万个列表项。然而，直接将所有数据项一次性渲染到 DOM 中，会迅速导致浏览器性能急剧下降，用户界面变得卡顿甚至无响应。这就是著名的“长列表性能问题”。

React 作为流行的前端框架，通过其高效的虚拟 DOM (Virtual DOM) Diffing 机制，在大多数场景下都能提供出色的性能。然而，当面对数千个 DOM 节点时，即使是虚拟 DOM 的管理和更新也会变得非常耗时。浏览器需要花费大量时间进行布局计算 (Layout)、绘制 (Paint) 和合成 (Composite)，从而导致滚动不流畅、内存占用过高甚至页面崩溃。

为了解决这一问题，前端社区发展出了一种名为“列表虚拟化”（List Virtualization）或“窗口化”（Windowing）的技术。其核心思想是：只渲染当前用户在视口（Viewport）中可见的列表项，以及少量位于视口边缘的缓冲区域内的列表项。随着用户滚动，动态地计算需要渲染的新项，并回收或重用已滚出视口的项所占用的 DOM 节点。这样一来，无论列表有多长，DOM 中实际存在的节点数量总是保持在一个可控且较小的范围内。

React Virtualized 就是一个为 React 应用量身打造的、功能强大且灵活的列表虚拟化库。它提供了一系列组件，帮助开发者轻松实现高性能的长列表、表格、网格等。本文将深入解析 React Virtualized 的核心原理、关键组件及其应用场景，并探讨如何优化其使用以达到最佳性能。

一、长列表性能问题的根源

在深入 React Virtualized 之前，理解为什么简单的 map 方法渲染大量数据会造成性能问题至关重要。

  1. 大量的 DOM 节点： 每渲染一个列表项，通常会创建一个或多个 DOM 节点。数千个列表项意味着数千个 DOM 节点。浏览器维护和管理这些节点（包括它们的属性、事件监听器、样式等）需要消耗大量的内存。
  2. 样式计算与布局： 即使节点存在，浏览器的渲染引擎也需要计算每个节点最终的样式，并确定它们在页面上的精确位置和大小（布局）。大量节点的布局计算是一个层层依赖、耗时巨大的过程，尤其是在滚动时，如果列表项尺寸发生变化或需要重新计算，会导致“布局抖动”（Layout Thrashing），严重影响滚动流畅性。
  3. 绘制与合成： 计算完布局后，浏览器需要将每个节点绘制到屏幕上，并将其与页面的其他部分合成为最终的图像。节点越多，绘制和合成的工作量越大。
  4. React 的开销： 尽管 React 使用虚拟 DOM，但当数据变化时，它仍然需要遍历新旧虚拟 DOM 树进行 Diffing，找出差异，然后批量更新实际 DOM。当列表项数量巨大时，虚拟 DOM 树也会非常庞大，Diffing 过程本身的计算开销就不可忽视。而且，最终的 DOM 更新操作（创建、删除、修改节点）仍然是性能瓶颈。

因此，问题的核心在于一次性创建和管理了远超用户当前所需的大量 DOM 节点。

二、React Virtualized 的核心原理：虚拟化与窗口化

React Virtualized 解决长列表问题的核心思想就是前面提到的“列表虚拟化”或“窗口化”。它基于以下几个关键原理：

  1. 只渲染可见区域 + 缓冲： React Virtualized 不会渲染列表中的所有项。它会监听容器的滚动事件，根据容器的尺寸和滚动位置，精确计算出当前用户在视口中可见的列表项的索引范围。同时，为了提供更流畅的滚动体验（避免在快速滚动时出现空白区域），它还会额外渲染视口上方和下方一定数量的列表项，这部分区域被称为“缓冲区域”（Overscan Area）。
  2. 动态计算项的位置： 为了实现精确的滚动和定位，React Virtualized 需要知道每个列表项的尺寸（高度或宽度）。
    • 固定尺寸 (Fixed Size)： 这是最简单高效的情况。如果所有列表项的高度（或宽度）都相同且已知，React Virtualized 可以通过简单的乘法计算出任意索引项的位置和总高度。
    • 动态尺寸 (Dynamic Size)： 如果列表项的高度各不相同，或者在渲染之前无法确定，这就更复杂了。React Virtualized 提供 CellMeasurer 等工具来解决这个问题。它会在项被渲染到缓冲区域或视口中时测量其实际尺寸，并将结果缓存起来。后续在滚动计算时，优先使用缓存的尺寸；对于尚未渲染（因此尺寸未知）的项，可能会先使用一个预估尺寸，并在它们进入视口附近时进行精确测量和更新。
  3. 回收与重用（通过 React 的协调）： 虽然 React Virtualized 本身不直接操作 DOM 节点进行物理上的“回收并重用”（React 的 Diffing 机制更擅长管理组件实例和 DOM 更新），但它的作用在于 极大地减少了 React 需要渲染和 Diff 的组件数量。当一个列表项滚出视口和缓冲区域时，React Virtualized 会停止渲染对应的组件；当新的列表项滚入时，它会渲染新的组件。React 的 Diffing 算法会发现这些组件的变化，并高效地更新 DOM。因此，虽然不是像原生滚动那样物理重用 DOM 节点，但通过控制 React 的渲染范围，同样达到了减少 DOM 节点数量、降低 Diffing 开销的目的。
  4. 样式定位： 关键之处在于，React Virtualized 渲染的列表项并不是一个接一个自然流淌布局的。为了让它们出现在正确的位置，React Virtualized 会通过内联样式 (position: absolute; top: ...; left: ...; width: ...; height: ...;) 来精确地定位每一个渲染出来的列表项。这意味着你必须将 React Virtualized 提供的 style prop 应用到你的列表项根元素上。

通过这些原理，React Virtualized 确保了在任何时候，DOM 中存在的列表项数量都只与容器尺寸和缓冲区域大小有关，而与数据总量无关。

三、React Virtualized 的核心组件

React Virtualized 提供了多种组件来应对不同的列表结构需求。最常用的包括：

  1. List： 用于渲染长型、一维的垂直列表。这是最基础也是最常用的组件。

    • 关键 Props：

      • height: 容器高度。必需。
      • width: 容器宽度。必需。
      • rowCount: 列表中总共有多少行数据。必需。
      • rowHeight: 每一行的高度。可以是固定数值，也可以是一个根据索引返回高度的函数，或者使用 CellMeasurer。必需（或由 CellMeasurer 提供）。
      • rowRenderer: 一个函数，用于渲染每一行列表项。接收参数 { index, key, style, parent }。必须将 style prop 应用到你的行元素的根上。
      • overscanRowCount: 在可见区域上方和下方渲染的额外行数（缓冲）。默认为一些合理的值，可调整以平衡流畅度和性能。
      • scrollToIndex: 可以通过改变这个 prop 的值来编程控制列表滚动到指定的行。
      • onScroll: 滚动事件回调，接收 { clientHeight, scrollHeight, scrollTop } 参数。
      • noRowsRenderer: 当 rowCount 为 0 时渲染的内容。

    • rowRenderer 示例：
      “`jsx
      function MyRowRenderer({ index, key, style }) {
      const item = myData[index];
      return (

      {/ 渲染 item 数据 /}
      {item.name}

      );
      }

      // 在 List 组件中使用

      ``
      **注意：      style` Prop 是强制性的，它包含了 React Virtualized 计算出的项的位置和尺寸信息。**

  2. Grid： 用于渲染二维网格数据，支持水平和垂直虚拟化。

    • 关键 Props：

      • height, width: 容器尺寸。必需。
      • columnCount, rowCount: 网格的总列数和总行数。必需。
      • columnWidth, rowHeight: 列宽度和行高度。可以是固定数值或函数，或使用 CellMeasurer。必需。
      • cellRenderer: 一个函数，用于渲染网格中的每一个单元格。接收参数 { columnIndex, rowIndex, key, style, parent }。必须将 style prop 应用到单元格的根元素上。
      • overscanColumnCount, overscanRowCount: 水平/垂直方向的缓冲单元格数量。
      • scrollToColumn, scrollToRow: 编程控制滚动到指定的列/行。

    • cellRenderer 示例：
      “`jsx
      function MyCellRenderer({ columnIndex, rowIndex, key, style }) {
      const item = myGridData[rowIndex][columnIndex]; // 假设数据是二维数组
      return (

      {/ 渲染 item 数据 /}
      Row {rowIndex}, Col {columnIndex}: {item}

      );
      }

      // 在 Grid 组件中使用

      ``
      **注意：      style` Prop 对于单元格渲染器同样是强制性的。**

  3. Table： 用于渲染表格数据，支持行虚拟化和固定表头。它是 Grid 的一个封装，提供了更符合表格结构的 API。

    • 关键 Props：

      • height, width: 容器尺寸。必需。
      • rowCount: 总行数（不包括表头）。必需。
      • rowHeight: 行高（数据行）。必需。
      • headerHeight: 表头行高。必需。
      • rowGetter: 一个函数，接收行索引 index，返回该行的数据对象。
      • rowRenderer: 渲染数据行的函数（通常由内部 Column 组件调用）。
      • headerRenderer: 渲染表头单元格的函数。
      • children: Table 组件的子元素应该是 Column 组件，用于定义表格的列。

    • Column 组件 Props：

      • label: 列的标题（显示在表头）。
      • dataKey: 数据对象中对应此列数据的 key。
      • width: 列的宽度。必需。
      • cellRenderer: 渲染此列中每个数据单元格的函数。接收 { cellData, columnData, dataKey, rowData, rowIndex } 参数。
      • headerRenderer: 渲染此列表头单元格的函数。接收 { columnData, dataKey, disableSort, label, sortBy, sortDirection } 参数。

    • Table 示例：
      “`jsx
      import { Table, Column } from ‘react-virtualized’;

      // … myData 数组，每个元素是一个对象 { name, age, city }

      myData[index]}





      ``Table组件内部会协调rowGetter和Column定义的dataKey或cellRenderer来渲染数据行，并使用headerRenderer或label` 来渲染表头。

四、处理动态高度：CellMeasurer

在实际应用中，列表项的高度往往不是固定的，例如聊天消息、评论、文章摘要等，其内容长度不一，导致高度不同。如果使用固定高度的 List，会出现布局错乱（项重叠或间隔过大）以及滚动条计算不准确的问题。

CellMeasurer 和 CellMeasurerCache 就是用来解决动态高度问题的。

  • CellMeasurerCache： 负责存储测量过的每个列表项的高度（或宽度）。它需要知道每个项的索引，并提供方法来获取、设置和判断某个索引的尺寸是否已缓存。根据需求，可以选择使用 createMasonryCellMeasurerCache (用于瀑布流等复杂布局) 或 createListKeyCache / createCollectionCellCache 等。对于简单的垂直列表，createMasonryCellMeasurerCache 也可以工作，或者自己实现一个简单的基于索引的缓存。一个常见的模式是在组件 state 或 ref 中创建一个 CellMeasurerCache 实例，并在组件生命周期内维护它。
  • CellMeasurer： 这是一个组件，用作需要测量尺寸的列表项的包装器。它需要一个 cache 实例和一个 index (或其他标识符，如 key)。当包裹的内容被渲染时，CellMeasurer 会测量其尺寸，并调用 cache.set() 方法将结果存储到缓存中。

工作流程：

  1. 你创建一个 CellMeasurerCache 实例。
  2. 在 List（或其他虚拟化组件）的 rowHeight (或 columnWidth) prop 中，不再提供固定数值，而是提供一个函数，这个函数会尝试从 cache 中获取给定索引的高度。如果缓存中没有，它可能返回一个预估高度，或者触发测量。
  3. 在 rowRenderer (或 cellRenderer) 中，使用 CellMeasurer 组件包裹你的列表项内容。
    • CellMeasurer 接收 cache 和当前的 index (或 key) 作为 prop。
    • CellMeasurer 内部会渲染其子元素（即你的列表项内容）。
    • 一旦子元素被渲染并测量出实际尺寸，CellMeasurer 会调用 cache.set(index, actualHeight) 更新缓存。
    • 同时，CellMeasurer 会通知父级虚拟化组件（如 List），告诉它索引 index 的高度现在已知且为 actualHeight。
  4. List 接收到高度更新通知后，会重新计算布局，并可能触发重新渲染，从而使用新的精确高度来定位该项及后续项。

由于虚拟化组件会渲染视口和缓冲区域内的项，那些即将进入视口的项会在缓冲区域内被 CellMeasurer 提前测量并缓存高度。当它们真正进入视口时，虚拟化组件已经知道它们的精确高度，从而实现平滑的滚动。

使用 CellMeasurer 的 List 示例：

“`jsx
import React, { useRef } from ‘react’;
import { List, AutoSizer, CellMeasurer, CellMeasurerCache } from ‘react-virtualized’;

function DynamicHeightList({ data }) {
// 创建一个 CellMeasurerCache 实例
// fixedWidth={true} 表示我们只关心高度测量，宽度是固定的（由容器决定）
// defaultHeight 可以在测量前提供一个预估高度，帮助计算滚动条位置
const cache = useRef(
new CellMeasurerCache({
fixedWidth: true,
defaultHeight: 50 // 预估高度
})
).current;

// rowRenderer 现在需要包裹 CellMeasurer
const rowRenderer = ({ index, key, style, parent }) => {
const item = data[index];
return (

{/ 这里是你的实际列表项内容 /}

{/ 注意：这里的 style={style} 仍然是必需的，由 List 提供定位信息 /}

Item {index}

{item.description}

{/ item.description 长度可能不同 /}


);
};

// rowHeight prop 现在是一个函数，从缓存获取高度
const rowHeight = ({ index }) => cache.rowHeight({ index });

return (
// AutoSizer 用于让 List 充满父容器，并获取父容器的精确尺寸

{({ height, width }) => (

)}

);
}
``
**注意：**
*CellMeasurer需要将List组件实例作为parentprop 传递过去，以便在测量完成后通知父组件。
*CellMeasurer包裹的实际列表项内容的根元素仍然需要接收并应用List传递过来的style` prop。

五、集成 AutoSizer

虚拟化组件（List、Grid 等）通常需要明确指定 height 和 width。但在响应式布局中，列表容器的尺寸可能由其父容器决定，并且是动态变化的。手动计算和传递尺寸会很麻烦。

AutoSizer 组件就是用来解决这个问题的。它是一个简单的包装器组件，它会创建一个 div 元素，测量其父容器赋予它的尺寸，然后使用 Render Props 模式将测量的 height 和 width 传递给其子组件。

使用 AutoSizer 示例：

“`jsx
import { AutoSizer, List } from ‘react-virtualized’;

function MyResizableList({ data }) {
const rowRenderer = ({ index, key, style }) => {
// … 渲染逻辑
return

Item {index}

;
};

return (

{/ 例如，让父容器通过 flexbox 决定尺寸 /}

{({ height, width }) => (

)}

);
}
``
通过AutoSizer`，你可以让虚拟化列表自动适应其父容器的大小，无需手动监听窗口 resize 事件或父容器尺寸变化。

六、其他实用组件

  • WindowScroller： 当你希望列表使用整个浏览器窗口作为滚动容器时使用。它会监听 window 的滚动事件，并将滚动位置传递给子级的虚拟化组件。常与 AutoSizer 结合使用，其中 AutoSizer 提供宽度，WindowScroller 提供高度和滚动位置。
  • Collection： 用于渲染更复杂的二维数据，其中项的大小和位置可能不规则，甚至交错排列（如瀑布流）。它需要一个 cellRenderer 和一个 cellSizeAndPositionGetter 函数来提供每个项的尺寸和坐标。
  • Masonry： Collection 的一个特定实现，用于创建响应式瀑布流布局。常与 CellMeasurer 一起使用来处理动态高度的项。

七、应用场景

React Virtualized 适用于任何需要高效展示大量同构或异构列表项、网格或表格数据的场景：

  • 社交媒体 Feed： 渲染无限滚动的帖子列表。
  • 电子邮件客户端： 展示大量邮件列表。
  • 数据表格： 渲染包含数千行的大型数据集。
  • 文件/目录列表： 在文件管理器界面中展示大量文件。
  • 图片/视频画廊： 使用 Grid 或 Collection/Masonry 展示大量媒体缩略图。
  • 日历或排班表： 展示长范围的日期或时间段。
  • 代码编辑器中的行显示： 展示大量代码行。

八、性能优化与最佳实践

即使使用了 React Virtualized，不恰当的使用方式也可能导致性能问题。以下是一些优化建议和最佳实践：

  1. 确保提供正确的尺寸信息：
    • 固定高度/宽度是最优的。
    • 如果高度/宽度是动态的，正确使用 CellMeasurer。为 CellMeasurerCache 提供一个合理的 defaultHeight 或 defaultWidth 可以帮助虚拟化组件在测量完成前做出更准确的预估。
    • 确保 rowHeight 或 columnWidth 函数是高效的，避免在其中进行复杂计算。
  2. 将 rowRenderer / cellRenderer 定义在组件外部或使用 useCallback： 避免在每次父组件渲染时创建新的渲染函数实例。这有助于 React 的 Diffing 机制识别组件类型未变。
    javascript
    // Good: 定义在组件外部或使用 useCallback
    const rowRenderer = useCallback(({ index, key, style }) => {
    const item = data[index];
    return <div key={key} style={style}>{item.name}</div>;
    }, [data]); // 依赖项是 data，当 data 变化时才重新创建函数
  3. 优化列表项组件： 即使只有少量列表项被渲染，如果每个项本身的渲染非常耗时，仍然会影响性能。确保 rowRenderer 或 cellRenderer 内部渲染的组件是轻量级的，或者使用 React.memo 或 PureComponent 进行性能优化，避免不必要的子组件重渲染。
  4. 为列表项提供稳定的 key： 和 React 中其他列表渲染一样，为每个列表项（在 rowRenderer 的 key 参数中）提供一个稳定、唯一的 key 非常重要。这帮助 React 和 React Virtualized 更高效地跟踪和更新列表项，尤其是在数据变化、排序或过滤时。避免使用索引作为 key，除非列表项的顺序永不改变且没有增删操作。
  5. 调整 overscan 值： overscanRowCount 和 overscanColumnCount 控制缓冲区域的大小。增加这个值可以减少滚动时出现空白区域的可能性，使滚动看起来更流畅，但会增加需要渲染的项数量，从而增加初始渲染和滚动时的计算开销。找到一个平衡点，通常较小的值（如 1 到 5）已经足够。
  6. 注意 style Prop： 再次强调，你提供的 rowRenderer 或 cellRenderer 必须将其接收到的 style prop 应用到其根元素上。这是 React Virtualized 定位列表项的关键。
  7. 避免在 onScroll 中执行昂贵操作： 滚动事件可能非常频繁。如果在 onScroll 回调中执行耗时的计算或状态更新，可能会导致滚动卡顿。如果需要执行这类操作（如懒加载数据），考虑使用节流（throttle）或防抖（debounce）技术限制回调的触发频率。
  8. 数据不可变性： 像在其他 React 应用中一样，使用不可变数据结构可以帮助 React Virtualized 和 React 更快地检测到数据变化，从而优化更新。

九、React Virtualized 的替代品

值得一提的是，React Virtualized 虽然功能强大，但代码量较大。其作者 Brian Vaughn 后来又开发了更轻量级、API 更简洁的库 React Window。对于大多数简单的垂直或水平列表需求，React Window 通常是更好的选择，因为它更小、更快。它提供了 FixedSizeList 和 VariableSizeList 等组件，概念与 React Virtualized 类似但实现更精简。

此外，还有一些“Headless”（无头）虚拟化库，如 TanStack Virtual (之前是 React Query Virtual)，它们不提供 UI 组件，只提供计算虚拟化所需逻辑的 Hook 或函数，将渲染控制权完全留给开发者。这提供了最大的灵活性，但也需要更多手动工作来处理 DOM 元素的创建和定位。

选择哪个库取决于具体需求：React Virtualized 功能全面，适用于各种复杂的表格、网格、瀑布流等；React Window 轻量高效，适用于简单的列表；TanStack Virtual 提供最大灵活性，适用于需要自定义渲染和复杂交互的场景。

十、总结

长列表是前端性能优化的一个重要挑战。React Virtualized 通过实现列表虚拟化和窗口化技术，极大地减少了 DOM 节点的数量和 React 的渲染开销，从而显著提升了大规模列表的渲染性能和用户体验。理解其核心原理——只渲染可见内容和缓冲、动态计算位置、通过样式定位——是正确使用它的关键。

通过 List、Grid、Table 等核心组件，以及 CellMeasurer 处理动态高度、AutoSizer 适应容器尺寸，React Virtualized 提供了构建高性能列表应用的强大工具集。遵循性能优化最佳实践，如提供稳定的 key、优化列表项组件、合理使用 overscan，将能帮助你在面对海量数据时，依然保持应用界面的流畅和响应。尽管存在更轻量级的替代品，React Virtualized 依然是处理复杂虚拟化需求的成熟可靠选择。掌握 React Virtualized 的原理和应用，是每个需要处理长列表的 React 开发者必备的技能。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部