react虛擬列表實現(xiàn)及原理小結(jié)

更新時間：2025年09月01日 09:59:01 作者：光影少年

React虛擬列表是前端性能優(yōu)化的核心技術(shù)之一,尤其在需要渲染上萬條數(shù)據(jù)的表格或列表時很關(guān)鍵,下面就來介紹一下react虛擬列表的實現(xiàn),感興趣的可以了解一下

?? 一、為什么要用虛擬列表？

普通做法：一次性渲染所有 DOM（比如 1 萬條 <div>），會讓瀏覽器卡頓，首屏加載慢。
虛擬列表：只渲染 可視區(qū)域的元素，其他部分用空白占位，隨著滾動動態(tài)更新。
?? 這樣 DOM 數(shù)量始終保持在幾十到幾百之間，性能大幅提升。

?? 二、基本原理

虛擬列表的核心思想是 "只渲染視口范圍內(nèi)的元素 + 占位保持滾動條高度" ：

計算容器高度
- 根據(jù)數(shù)據(jù)總數(shù) × 單項高度 = 總高度（生成一個大容器，撐起滾動條）。
計算可見區(qū)域
- 監(jiān)聽滾動事件，得到 scrollTop。
- 根據(jù) scrollTop / itemHeight 算出應(yīng)該顯示哪些元素。
渲染可見元素
- 用 absolute 定位，把可見元素放在容器的正確位置。
- 其他元素不渲染，靠容器的 padding 或 translateY 占位。

?? 三、React 簡單實現(xiàn)示例

假設(shè)每行高度固定（50px），一共 10000 條數(shù)據(jù)。

import React, { useState, useRef } from "react";

const rowHeight = 50; // 每項高度
const total = 10000;  // 數(shù)據(jù)總數(shù)
const visibleCount = 10; // 可視區(qū)顯示多少項（容器高度 / rowHeight）

const data = Array.from({ length: total }, (_, i) => `Item ${i + 1}`);

export default function VirtualList() {
  const [start, setStart] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  const handleScroll = () => {
    if (!containerRef.current) return;
    const scrollTop = containerRef.current.scrollTop;
    const newStart = Math.floor(scrollTop / rowHeight);
    setStart(newStart);
  };

  const end = start + visibleCount;
  const visibleData = data.slice(start, end);

  return (
    <div
      ref={containerRef}
      onScroll={handleScroll}
      style={{
        height: rowHeight * visibleCount,
        overflowY: "auto",
        border: "1px solid #ccc",
        position: "relative",
      }}
    >
      {/* 大容器：撐起滾動條 */}
      <div style={{ height: total * rowHeight, position: "relative" }}>
        {/* 可視區(qū)元素 */}
        {visibleData.map((item, i) => (
          <div
            key={item}
            style={{
              position: "absolute",
              top: (start + i) * rowHeight,
              height: rowHeight,
              lineHeight: `${rowHeight}px`,
              borderBottom: "1px solid #eee",
              boxSizing: "border-box",
              width: "100%",
            }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  );
}

?? 效果：

容器始終只有 ~10 個 DOM 元素。
滾動時動態(tài)替換顯示的元素。
看起來就像 10000 條都在 DOM 里，但實際上只有少量渲染。

?? 四、進階優(yōu)化

動態(tài)高度支持
- 如果每項高度不同，需要預(yù)先計算累積高度（類似 “前綴和”），滾動時二分查找定位。
- 比如 react-virtualized 的 CellMeasurer。
緩沖區(qū)（overscan）
- 在可視區(qū)域上下多渲染幾條，避免快速滾動時白屏。
分片渲染（時間切片）
- 避免一次性渲染太多（requestIdleCallback 或 React 18 startTransition）。

?? 五、成熟方案

如果自己寫太復(fù)雜，可以直接用社區(qū)庫：

react-window（輕量，推薦，適合固定高度）
react-virtualized（功能強大，支持動態(tài)高度、表格、Grid）
rc-virtual-list（Ant Design 內(nèi)部用的虛擬列表）

import { FixedSizeList as List } from "react-window";

<List
  height={500}
  itemCount={10000}
  itemSize={50}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</List>