react虚拟列表实现及原理小结

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

const rowHeight = 50; // 每项高度
const total = 10000;  // 数据总数
const visibleCount = 10; // 可视区显示多少项（容器高度 / 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" }}>
        {/* 可视区元素 */}
        {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>
  );
}

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>