虚拟列表与大数据渲染

import { useState, type UIEvent } from "react";

const ROW_H = 40;    // 固定行高
const VIEW_H = 600;  // 视口高度
const OVERSCAN = 5;  // 上下各多渲染 5 行缓冲
const TOTAL = 10_000;

function MiniVirtualList() {
  const [scrollTop, setScrollTop] = useState(0);

  function handleScroll(e: UIEvent<HTMLDivElement>) {
    setScrollTop(e.currentTarget.scrollTop);
  }

  // 1. scrollTop → 起始行号：除以行高取整，再往前让出缓冲
  const start = Math.max(0, Math.floor(scrollTop / ROW_H) - OVERSCAN);
  // 2. 可视行数 + 两倍缓冲 = 本次要渲染的行数
  const count = Math.ceil(VIEW_H / ROW_H) + OVERSCAN * 2;
  const end = Math.min(TOTAL, start + count);
  // 3. 切片：只把 [start, end) 这段数据变成 DOM
  const rows: number[] = [];
  for (let i = start; i < end; i++) rows.push(i);

  return (
    <div onScroll={handleScroll} style={{ height: VIEW_H, overflowY: "auto" }}>
      {/* 4. 内层容器撑出真实滚动条，并充当绝对定位的坐标系 */}
      <div style={{ height: TOTAL * ROW_H, position: "relative" }}>
        {rows.map((i) => (
          <div
            key={i}
            style={{
              position: "absolute",
              top: i * ROW_H,        // 5. 每行钉在自己的坐标上
              left: 0,
              right: 0,
              height: ROW_H,
              lineHeight: "40px",
              borderBottom: "1px solid #eee",
            }}
          >
            第 {i + 1} 行
          </div>
        ))}
      </div>
    </div>
  );
}

import { FixedSizeList, type ListChildComponentProps } from "react-window";

// 全集已在内存：日志查看器、导入预览这类场景
const data: string[] = Array.from(
  { length: 10_000 },
  (_, i) => `第 ${i + 1} 行数据`
);

function Row({ index, style, data }: ListChildComponentProps<string[]>) {
  return (
    <div style={style}>  // style 必须透传：内含定位坐标与行高
      {data[index]}
    </div>
  );
}

export default function BigList() {
  return (
    <FixedSizeList
      height={600}          // 视口高度
      width="100%"
      itemSize={40}         // 固定行高
      itemCount={data.length}
      itemData={data}       // 透传给 Row 的数据
      overscanCount={5}     // 上下缓冲
    >
      {Row}
    </FixedSizeList>
  );
}