提升 React 列表性能：深入了解 React Virtualized – wiki基地

作者： /

提升 React 列表性能：深入了解 React Virtualized

在现代 Web 应用开发中，列表是 UI 中最常见的元素之一。无论是社交媒体 feed、数据表格、文件管理器，还是简单的待办事项列表，我们都在处理和展示数据集合。对于少量数据，简单的 Array.prototype.map() 配合 React 组件渲染就能很好地工作。然而，当列表数据量达到数百、数千甚至上万条时，应用程序的性能瓶颈就会显现出来：滚动卡顿、内存占用过高、页面响应变慢，用户体验直线下降。

这些性能问题的主要根源在于，即使列表项在屏幕上并不可见，传统的渲染方式依然会创建和渲染所有列表项对应的 DOM 元素。浏览器需要处理大量的 DOM 节点，计算它们的布局、样式，并将其绘制出来。这个过程消耗大量的计算资源和内存，尤其是在用户快速滚动时，浏览器需要不断地进行这些昂贵的计算，导致页面“掉帧”，出现卡顿感。

为了解决这个问题，我们需要一种更智能的渲染策略——虚拟化 (Virtualization)，也被称为 窗口化 (Windowing)。其核心思想是：只渲染用户当前在屏幕上可见的列表项，以及上下少量缓冲区域的列表项。 当用户滚动时，不再是创建新的 DOM 元素，而是复用（或回收）那些滚出可视区域的 DOM 元素，将它们移动到新的位置，并更新其内容。这样，无论列表有多长，DOM 中存在的元素数量始终保持在一个可控的范围内，通常只有几十到几百个，极大地减轻了浏览器和 React 的渲染负担。

在 React 生态系统中，有几个库实现了这一虚拟化技术，其中最著名、功能最丰富、历史也最悠久的一个是 react-virtualized。

认识 react-virtualized

react-virtualized 是一个功能强大的 React 组件集合，专门用于高效渲染大型列表和表格数据。它由 Brian Vaughn (也是 React core team 的成员，后来创建了更轻量级的 react-window) 开发和维护。react-virtualized 提供了多种虚拟化组件，适用于不同的布局需求，包括：

  1. List: 用于渲染长、单列、固定高度或变高度的列表。
  2. Grid: 用于渲染二维网格数据，例如电子表格或图片墙。
  3. Table: 用于渲染具有列头、排序等功能的结构化表格数据。
  4. Collection: 用于渲染非线性排列的项目，如瀑布流布局（相对较少用）。
  5. 以及一些辅助组件，如 AutoSizer (自动调整虚拟化组件尺寸以适应父容器) 和 CellMeasurer (用于动态测量可变高度/宽度的单元格)。

react-virtualized 的主要优势在于其成熟、功能全面以及对各种复杂场景的支持（如动态尺寸、不同方向的列表、网格和表格）。虽然它的 API 可能比后来的 react-window 稍微复杂一些，但它提供了更多的开箱即用功能，是许多大型应用的首选。

Virtualization/Windowing 的工作原理详解

为了更好地理解 react-virtualized 如何工作，我们先深入一点了解虚拟化的基本原理：

  1. 确定可视区域 (Viewport): 虚拟化组件需要知道它所在的容器的尺寸（宽度和高度）。这个尺寸定义了列表的“窗口”。
  2. 计算可见项的范围: 基于容器的尺寸、列表项的尺寸（固定或动态计算）、以及当前的滚动位置，库能够精确计算出当前应该显示哪些列表项（例如，索引从 50 到 75 的项）。
  3. 渲染可见项: 只为计算出的可见范围内的列表项调用渲染函数（例如 rowRenderer 或 cellRenderer）。
  4. 定位可见项: 这是关键一步。虚拟化库通过设置每个渲染出来的列表项的 CSS transform 或 top/left 样式来将其精确定位到列表中的正确位置。例如，如果列表项高度是 50px，索引为 100 的项即使是第一个可见项，它的 top 样式也会被设置为 100 * 50 = 5000px，使其看起来像在滚动到了列表深处的位置。
  5. 回收和复用: 当用户滚动时，滚出可视区域的列表项的 DOM 元素并不会被销毁。它们会被“回收”并添加到渲染池中。当新的列表项进入可视区域时，库会从渲染池中取出回收的 DOM 元素，更新其内容和定位样式，使其显示新的列表项。这样就避免了频繁的 DOM 创建和销毁，提高了效率。
  6. 填充空白: 由于只渲染可见项，列表的整体高度/宽度需要通过一个占位元素（通常是一个空的 div）来撑开，使其总尺寸等于所有列表项的总尺寸，这样滚动条才能正确地显示和工作。

react-virtualized 正是基于这一原理构建其组件的。开发者需要提供关于列表总项数、每项尺寸（或如何测量尺寸）以及如何渲染单个项的信息。

react-virtualized 核心组件与概念

我们重点介绍最常用的 List 组件，并触及其他关键概念。

List 组件

List 是用于垂直虚拟化的基础组件。它非常适合渲染一个很长的、一维的数据列表，如无限滚动的 Feed 或联系人列表。

关键 Props:

  • width: List 容器的宽度 (必须)。
  • height: List 容器的高度 (必须)。
  • rowCount: 列表的总行数 (必须)。
  • rowHeight: 每行的高度。可以是固定值 (Number) 或一个函数 ({ index: number }) => number (用于可变高度)。
  • rowRenderer: 用于渲染每一行的函数 (必须)。它的签名通常是 ({ key: string, index: number, style: object, parent: object }) => ReactNode。
    • key: 用于 React 列表渲染的唯一 key。
    • index: 当前行的索引。
    • style: !!! 最重要的属性 !!! 这是 react-virtualized 用来定位行元素的 CSS 样式对象。你必须将这个 style 对象应用到你的行元素的根部，否则虚拟化将不起作用。
    • parent: 虚拟化组件实例，有时在需要测量或访问其他内部方法时有用。
  • onScroll: 滚动事件回调，用于实现无限滚动等功能。
  • scrollToIndex: 用于命令式地滚动到指定索引的行。
  • overscanRowCount: 在可视区域上方和下方额外渲染的行数作为缓冲。这有助于减少快速滚动时的空白区域闪烁。默认值通常是 10。

基本用法示例:

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

// 假设你有大量数据
const listData = Array(10000).fill(null).map((_, index) => ({
id: index,
text: This is row ${index}
}));

// 行渲染函数
const rowRenderer = ({ key, index, style }) => {
const item = listData[index];
return (

{/ 将 style 应用到根元素 /}

Item ID: {item.id}, Content: {item.text}

);
};

// 列表组件
const MyVirtualizedList = () => {
return (

);
};

export default MyVirtualizedList;
“`

理解 style 属性的重要性:

在上面的 rowRenderer 函数中，style 属性是至关重要的。react-virtualized 会计算出当前行的正确 top (或 left 对于水平列表) 和 height (或 width)，并将这些值作为对象传递给 style 属性。例如，对于索引为 100、行高为 50px 的行，style 可能包含 { position: 'absolute', top: 5000, height: 50, width: '100%' } (具体样式可能因组件而异，但 position 和定位属性是核心)。

你必须将这个 style 对象完整地应用到你的行组件的最外层 DOM 元素上。通常，直接将 {...style} 展开或 Object.assign({}, style, yourOwnStyles) 应用到 div 或其他容器元素上即可。如果你不应用这个 style，或者只应用其中的一部分，那么行将无法被正确地定位，虚拟化效果会失效。

Grid 组件

Grid 用于二维虚拟化，适合渲染电子表格、图片库等网格状数据。它需要 rowCount, columnCount, rowHeight, columnWidth 和 cellRenderer。

关键 Props:

  • width, height: 容器尺寸。
  • rowCount, columnCount: 总行数和总列数。
  • rowHeight: 行高 (固定或函数)。
  • columnWidth: 列宽 (固定或函数)。
  • cellRenderer: 单元格渲染函数 ({ columnIndex: number, key: string, rowIndex: number, style: object, parent: object }) => ReactNode。同样，style 必须应用到单元格元素根部。

Table 组件

Table 组件构建在 Grid 的基础上，提供了更贴近传统 HTML <table> 的 API，支持列定义、头部渲染、排序等。它不是通过 rowRenderer 或 cellRenderer 来渲染内容，而是通过定义 Column 组件来实现。

关键 Props:

  • width, height: 容器尺寸。
  • rowCount: 数据行数。
  • rowGetter: 函数，根据索引返回一行数据。
  • rowHeight: 行高。
  • 子组件 Column: 定义每一列。
    • label: 列头文本。
    • dataKey: 数据项中对应列的属性名。
    • width: 列宽。
    • cellRenderer: 可选，自定义单元格渲染。
    • headerRenderer: 可选，自定义列头渲染。

Table 组件使用起来感觉更像声明式地定义表格结构，而底层仍然是虚拟化的 Grid。

解决复杂场景

基础的固定高度列表很容易实现，但在实际应用中，我们经常遇到各种复杂情况。react-virtualized 提供了一些辅助组件来应对这些挑战。

1. 动态高度/宽度列表 (CellMeasurer 和 CellMeasurerCache)

这是最常见的复杂场景之一。列表项的内容长度不一（如评论、文章摘要），导致行高或列宽无法固定。手动计算或者估算并不总是准确的。

react-virtualized 提供了 CellMeasurer 组件和 CellMeasurerCache 类来解决这个问题。其原理是：

  1. 第一次渲染时，使用一个估算的高度（defaultHeight）。
  2. 在组件加载后，利用 CellMeasurer 测量实际内容的高度。
  3. 将测量结果存储在 CellMeasurerCache 中，供虚拟化组件查找。
  4. 当项滚动到可视区域时，如果缓存中有测量结果，就使用实际高度；如果没有（第一次出现），使用估算高度并触发测量。

这通常涉及到以下步骤：

  1. 创建一个 CellMeasurerCache 实例。
  2. 将 CellMeasurerCache 实例传递给 List 组件的 deferredMeasurementCache prop。
  3. 在 rowRenderer 中，用 CellMeasurer 包裹实际的行内容。
  4. 向 CellMeasurer 传递 cache 实例、当前行的 index 和 parent (即 List 实例)。
  5. 在 List 组件的 rowHeight prop 中，使用 cache 的 rowHeight 方法（因为它现在是变高的）。

示例 (List with Dynamic Row Height):

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

// 假设数据项有不同长度的文本
const listData = Array(1000).fill(null).map((_, index) => ({
id: index,
// 随机生成不同长度的文本
text: This is row ${index}. + ‘Long text ‘.repeat(Math.floor(Math.random() * 20))
}));

// 创建缓存实例
const cache = new CellMeasurerCache({
defaultHeight: 50, // 估算的默认高度
fixedWidth: true // 因为是垂直列表，宽度是固定的
});

const rowRenderer = ({ key, index, style, parent }) => {
const item = listData[index];

return (
// 使用 CellMeasurer 包裹行内容

{/ 将 style 应用到根元素 /}

Item ID: {item.id}, Content: {item.text}


);
};

const MyVirtualizedListDynamic = () => {
return (

);
};

export default MyVirtualizedListDynamic;
“`

这个模式对于 Grid 的动态单元格尺寸也同样适用，只需相应地设置 fixedWidth 或 fixedHeight，并在 cellRenderer 中使用 CellMeasurer，传递正确的 rowIndex 和 columnIndex。

2. 容器尺寸自适应 (AutoSizer)

虚拟化组件通常需要明确的 width 和 height。但在实际布局中，它们往往需要填充父容器的可用空间。手动计算并传递父容器尺寸可能会很麻烦，尤其是在响应式布局中。

AutoSizer 组件可以解决这个问题。它是一个高阶组件或 Render Prop 组件，会检测其父容器的尺寸，并将这些尺寸作为 props (或通过 Render Prop 函数) 传递给其子组件。

示例 (List with AutoSizer):

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

// … listData 和 rowRenderer (使用固定或动态高度) …

const MyVirtualizedListAutoSized = () => {
return (
// AutoSizer 需要一个有尺寸的父容器


{({ width, height }) => (

)}

);
};

export default MyVirtualizedListAutoSized;
“`

使用 AutoSizer 时，务必给 AutoSizer 的父容器一个明确的尺寸 (或者确保父容器通过其祖先获得了尺寸)。AutoSizer 本身会填满父容器，但它需要知道父容器的尺寸是多少才能告诉子组件。

3. 无限滚动 (Infinite Scroll)

无限滚动是大型列表的常见交互模式：当用户滚动到底部附近时，加载更多数据。react-virtualized 本身并不提供无限滚动的逻辑，但它提供了实现所需的回调函数 (onScroll) 和状态信息。

实现无限滚动的基本思路：

  1. 在组件 state 中维护当前已加载的数据、是否正在加载更多数据、以及是否有更多数据可加载的状态。
  2. 将 onScroll prop 传递给虚拟化组件。
  3. 在 onScroll 回调中，检查滚动位置。如果用户已经滚动到列表底部附近（例如，滚动距离 + 容器高度 >= 内容总高度 – 某个阈值），并且当前没有正在加载数据，并且还有更多数据可加载，则触发加载更多数据的操作。
  4. 加载数据操作完成后，更新组件 state，向列表中添加新数据，并更新总行数 (rowCount)。

react-virtualized 的 onScroll 回调会接收一个包含滚动信息的对象：{ clientHeight, scrollHeight, scrollTop }。

  • clientHeight: 容器的高度。
  • scrollHeight: 整个可滚动区域的总高度 (所有行的总高度，包括未渲染的)。
  • scrollTop: 当前滚动条距离顶部的距离。

判断是否滚动到底部的逻辑大致是：scrollTop + clientHeight >= scrollHeight - THRESHOLD。

简化的 Infinite Scroll 示例:

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

// 模拟异步数据加载函数
const fetchMoreData = (offset, limit) => {
return new Promise(resolve => {
setTimeout(() => {
const newData = Array(limit).fill(null).map((_, index) => ({
id: offset + index,
text: Loaded item ${offset + index}
}));
resolve(newData);
}, 500); // 模拟网络延迟
});
};

const ITEM_HEIGHT = 50;
const PAGE_SIZE = 20;
const INITIAL_COUNT = 40; // 初始加载数量
const TOTAL_ITEMS = 1000; // 假设总共有 1000 项

const MyInfiniteScrollList = () => {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);

// 初始加载数据
useEffect(() => {
setLoading(true);
fetchMoreData(0, INITIAL_COUNT).then(data => {
setItems(data);
setLoading(false);
setHasMore(data.length < TOTAL_ITEMS);
});
}, []); // 仅在组件挂载时执行

// 滚动处理函数
const handleScroll = ({ clientHeight, scrollHeight, scrollTop }) => {
// 检查是否滚动到底部附近
const isNearBottom = scrollTop + clientHeight >= scrollHeight – ITEM_HEIGHT * 2; // 阈值设为两行高度

if (isNearBottom && !loading && hasMore) {
  setLoading(true);
  const currentCount = items.length;
  fetchMoreData(currentCount, PAGE_SIZE).then(newData => {
    setItems([...items, ...newData]);
    setLoading(false);
    setHasMore(items.length + newData.length < TOTAL_ITEMS);
  });
}

};

// 行渲染函数
const rowRenderer = ({ key, index, style }) => {
const item = items[index];
// 如果是最后一项且正在加载，可以显示加载提示
if (!item && loading) {
return (

Loading more…

);
}
if (!item) return null; // 数据还没加载到，或总数有误

return (
  <div key={key} style={style} className="list-row">
    <div className="row-content">
      Item ID: {item.id}, Content: {item.text}
    </div>
  </div>
);

};

return (


{({ width, height }) => (

)}

);
};

export default MyInfiniteScrollList;
“`

请注意，上面的示例为了简洁，对数据总数做了假设。在实际应用中，你可能需要从后端获取总数，或者通过检查返回的数据量是否小于请求的 limit 来判断是否还有更多数据。同时，加载中的提示行也需要计算在 rowCount 内，并确保它的高度合适。

react-virtualized 的优化技巧与注意事项

即使使用了虚拟化，不恰当的使用方式仍然可能导致性能问题。以下是一些优化技巧和注意事项：

  1. 确保容器有明确尺寸: List, Grid, Table 组件必须有明确的 width 和 height props，或者包裹在提供了尺寸的 AutoSizer 中。没有尺寸，组件就无法计算可视区域和定位项。
  2. 正确应用 style Prop: 重申：rowRenderer 或 cellRenderer 接收的 style 对象必须完整地应用到渲染出的根元素上。这是虚拟化定位工作的关键。
  3. 使用稳定的 key: 在 rowRenderer 或 cellRenderer 中，为渲染的元素提供一个稳定且唯一的 key。使用数据项自身的 ID 是最佳实践，避免使用索引作为 key，除非列表项的顺序永不改变且没有插入/删除操作（这在大列表中几乎不可能）。不稳定的 key 会导致 React 在滚动时销毁并重新创建 DOM 元素，而不是复用，影响性能。
  4. 优化 rowRenderer/cellRenderer: 确保渲染函数内部的代码高效。避免在渲染函数中执行复杂的计算或副作用。如果你的行/单元格组件很复杂，考虑将其提取为一个单独的 React 组件，并使用 React.memo (对于函数组件) 或继承 React.PureComponent (对于类组件) 来避免不必要的内部重渲染。因为当列表滚动时，即使数据没变，rowRenderer 函数也可能因为父组件（虚拟化列表）的重新渲染而被调用。
  5. 合理设置 overscanRowCount/overscanColumnCount: 增加这个值可以减少快速滚动时的空白闪烁，但会增加渲染的元素数量，轻微增加开销。根据实际情况调整，找到一个平衡点。
  6. 动态尺寸测量问题: 使用 CellMeasurer 时，如果单元格内容是异步加载的（如图片），在内容加载完成后需要手动触发重新测量，可以使用 CellMeasurerCache 实例上的 clear 或 clearRow/clearColumn 方法，然后调用虚拟化组件实例的 recomputeRowHeights/recomputeGridSize 等方法。这通常通过获取虚拟化组件的 ref 来完成。
  7. 避免在虚拟化组件内放置其他会改变布局的内容: 例如，避免在 List 的同一个父容器内放置其他兄弟元素，然后期望 List 自动避开它们。虚拟化组件需要对其容器有相对独立的控制，AutoSizer 是处理这种情况的推荐方式。
  8. CSS 和布局: 使用 position: absolute 和 top/left 定位是虚拟化常见的实现方式。确保你的 CSS 不会干扰这些定位样式。使用 box-sizing: border-box 可以帮助更容易地管理尺寸。

react-virtualized vs react-window

前面提到，react-virtualized 的作者后来创建了 react-window。了解这两者之间的关系和区别有助于你做出选择：

  • react-virtualized:
    • 优点: 功能更全面，支持更多组件类型 (List, Grid, Table, Collection)，内置了一些高级功能（如 CellMeasurer, AutoSizer 等）。社区使用广泛，文档和示例丰富（尽管有些老旧）。
    • 缺点: Bundle size 较大，API 相对复杂，一些设计模式可能略显过时（如类组件的使用较多）。性能在一些非常简单的场景下可能略逊于 react-window。
  • react-window:
    • 优点: API 设计更简洁、更现代化（更倾向于函数组件和 Hooks）。Bundle size 小得多。性能非常高，是处理长列表的首选。
    • 缺点: 功能相对基础，只提供了 FixedSizeList, VariableSizeList, FixedSizeGrid, VariableSizeGrid。没有内置 Table 或 Collection 组件。处理一些复杂场景（如非常复杂的动态内容测量、非线性布局）可能需要更多手动工作。

选择建议:

  • 如果你需要一个功能齐全的表格组件 (Table)，或者需要渲染复杂的非线性数据 (Collection)，或者你已经在一个使用 react-virtualized 的老项目中，那么继续使用 react-virtualized 是合理的选择。
  • 如果你的需求主要是渲染简单的垂直或水平列表、或固定/可变尺寸的网格，并且追求最小的 bundle size 和最简洁的 API，那么 react-window 通常是更好的选择。
  • 对于新手，react-window 的入门可能更容易一些。

然而，无论选择哪个库，核心的虚拟化原理和大部分优化技巧是相通的。

何时不使用 react-virtualized (或任何虚拟化库)

虽然虚拟化是解决长列表性能问题的利器，但并非所有列表都需要它：

  1. 列表项数量不多: 如果你的列表通常只有几十或最多一两百个项目，传统的 map 渲染通常性能足够好，引入虚拟化库只会增加复杂性。
  2. 需要所有列表项都在 DOM 中: 有些特殊场景可能依赖于所有列表项都存在于 DOM 中，例如：
    • 使用 Ctrl+F 或其他浏览器查找功能查找所有文本。
    • 需要对所有列表项应用依赖于兄弟元素的复杂 CSS 选择器（如 :nth-child 应用于整个列表）。
    • 需要对所有列表项进行复杂的跨项拖放操作，且拖放库不原生支持虚拟化。
    • 需要平滑动画效果，其中动画涉及隐藏的元素（不在可视区域内的元素是不会被渲染的）。
  3. 列表项之间存在复杂的布局或状态依赖: 如果列表项的渲染或行为严重依赖于其非相邻兄弟元素的状态或布局，虚拟化可能会使这变得困难，因为那些兄弟元素可能不在 DOM 中。

在这些情况下，你可能需要权衡性能需求和功能实现难度，或者寻找其他优化方法（如分页、延迟加载整个数据块而不是单项）。

总结

处理大型列表是前端性能优化的经典挑战之一。react-virtualized 提供了一套成熟、强大且灵活的工具集，通过实现列表和网格的虚拟化，极大地降低了渲染大量 DOM 元素的开销，从而显著提升了应用程序的性能和响应速度。

理解虚拟化的核心原理——只渲染可视区域的内容，并正确应用 react-virtualized 提供的组件和 props（尤其是 width, height, rowCount, rowHeight/columnWidth, 以及最关键的 style prop），是成功优化长列表的关键。同时，掌握 AutoSizer 处理容器尺寸自适应和 CellMeasurer 处理动态内容尺寸的技巧，能够帮助你应对更复杂的实际场景。

虽然 react-window 是一个更轻量和现代的替代品，但 react-virtualized 凭借其丰富的功能集（特别是 Table 组件）在许多应用中仍然是不可或缺的。选择哪个库取决于你的具体需求。

通过本文的深入了解，你应该对 react-virtualized 的工作原理、核心用法以及如何解决常见问题有了清晰的认识。在你的下一个大型列表项目中，勇敢地引入虚拟化技术吧，你会看到性能上的巨大飞跃，为用户带来更流畅、更愉悦的体验。

发表评论

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

滚动至顶部