React 虚拟列表

// 错误示范：长列表直接渲染，性能爆炸
const LongList = ({ data }) => {
  return <div className="list-container">{data.map(item => <Item key={item.id} data={item} />)}</div>
}

可视区域可展示数量 = Math.ceil(视口容器高度 / 单个列表项高度) + 2

起始渲染索引 = Math.floor(滚动偏移量(scrollTop) / 单个列表项高度)

结束渲染索引 = 起始渲染索引 + 可视区域可展示数量

空白占位高度 = 起始渲染索引 × 单个列表项高度

import { useState, useRef, useEffect } from 'react';

// 单个列表项组件 - 固定高度50px
const ListItem = ({ index, data }) => {
  return (
    <div 
      className="list-item" 
      style={{ height: '50px', lineHeight: '50px', borderBottom: '1px solid #eee', padding: '0 10px' }}
    >
      第{index + 1}条数据 - {data}
    </div>
  );
};

// 核心：虚拟列表组件
const VirtualList = ({ dataList }) => {
  // 1. 核心常量配置（可抽离成props，灵活配置）
  const ITEM_HEIGHT = 50; // 单个列表项固定高度
  const VIEWPORT_HEIGHT = 500; // 列表容器固定高度
  // 可视区域可展示数量 + 2个缓冲区，避免滚动闪烁
  const VISIBLE_COUNT = Math.ceil(VIEWPORT_HEIGHT / ITEM_HEIGHT) + 2;

  // 2. 状态管理：存储当前要渲染的列表数据
  const [renderList, setRenderList] = useState([]);
  // 3. 容器Ref：获取真实DOM的scrollTop/clientHeight等属性
  const listContainerRef = useRef(null);
  // 4. 状态管理：存储空白占位高度（paddingTop）
  const [paddingTop, setPaddingTop] = useState(0);

  // 核心方法：处理滚动事件，计算所有关键参数
  const handleScroll = () => {
    const container = listContainerRef.current;
    if (!container) return;
    const { scrollTop } = container; // 获取滚动偏移量

    // 1. 计算起始渲染索引
    const startIndex = Math.floor(scrollTop / ITEM_HEIGHT);
    // 2. 计算结束渲染索引
    const endIndex = startIndex + VISIBLE_COUNT;
    // 3. 截取需要渲染的数据（核心：只渲染视口内的部分数据）
    const showList = dataList.slice(startIndex, endIndex);
    // 4. 计算空白占位高度（模拟视口上方的未渲染内容）
    const top = startIndex * ITEM_HEIGHT;

    // 更新状态：渲染数据 + 空白占位高度
    setRenderList(showList);
    setPaddingTop(top);
  };

  // 初始化渲染：页面加载时，渲染第一屏数据
  useEffect(() => {
    const container = listContainerRef.current;
    if (!container) return;
    handleScroll(); // 首次执行滚动逻辑
    // 绑定滚动事件
    container.addEventListener('scroll', handleScroll);
    // 组件卸载：解绑滚动事件，避免内存泄漏
    return () => container.removeEventListener('scroll', handleScroll);
  }, [dataList]); // 依赖：列表数据源变化时重新初始化

  return (
    <div 
      ref={listContainerRef}
      style={{ 
        height: `${VIEWPORT_HEIGHT}px`, 
        overflow: 'auto',
        border: '1px solid #ccc',
        width: '500px',
        margin: '20px auto'
      }}
    >
      {/* 核心：滚动容器内部的列表区域 */}
      <div 
        style={{ 
          paddingTop: `${paddingTop}px`, // 空白占位区，模拟上方未渲染内容
          transition: 'padding-top 0ms' // 取消过渡，避免滚动时paddingTop变化的动画卡顿
        }}
      >
        {/* 只渲染截取后的少量数据 */}
        {renderList.map((item, index) => (
          <ListItem 
            key={item.id} 
            index={Math.floor(paddingTop / ITEM_HEIGHT) + index} 
            data={item.content} 
          />
        ))}
      </div>
    </div>
  );
};

// 页面入口组件
const App = () => {
  // 生成10000条测试数据，模拟超长列表
  const generateData = () => {
    const list = [];
    for (let i = 0; i < 10000; i++) {
      list.push({ id: i, content: `我是测试数据-${Math.random().toFixed(4)}` });
    }
    return list;
  };
  const dataList = generateData();

  return (
    <div>
      <h2 style={{ textAlign: 'center' }}>React 手写虚拟列表（10000条数据）</h2>
      <VirtualList dataList={dataList} />
    </div>
  );
};

export default App;

// 简单节流函数
const throttle = (fn, delay = 100) => {
  let timer = null;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        fn(...args);
        timer = null;
      }, delay);
    }
  };
};
// 滚动事件用节流包裹
const handleScroll = throttle(() => {
  // 原有计算逻辑不变
});

import { FixedSizeList } from 'react-window';

const MyVirtualList = ({ data }) => {
  const Row = ({ index, style }) => (
    <div style={style}>第{index}条数据：{data[index].content}</div>
  );

  return (
    <FixedSizeList
      height={500} // 容器高度
      width="100%" // 容器宽度
      itemCount={data.length} // 总数据量
      itemSize={50} // 单个列表项高度
    >
      {Row}
    </FixedSizeList>
  );
};