分享一些React虚拟列表的实现方法

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

const BasicVirtualList = ({
  items,          // 所有列表数据
  itemHeight = 50, // 每个项目的固定高度
  visibleCount = 10 // 可视区域可显示的项目数量
}) => {
  const [startIndex, setStartIndex] = useState(0);
  const listRef = useRef(null);
  const containerRef = useRef(null);

  // 计算可视区域内的项目范围
  const handleScroll = () => {
    if (!containerRef.current) return;
    
    // 滚动距离 / 项目高度 = 起始索引
    const scrollTop = containerRef.current.scrollTop;
    const newStartIndex = Math.floor(scrollTop / itemHeight);
    
    // 避免频繁更新
    if (newStartIndex !== startIndex) {
      setStartIndex(newStartIndex);
    }
  };

  // 计算需要渲染的项目（可视区域 + 缓冲区）
  const endIndex = Math.min(
    startIndex + visibleCount + 5, // 额外渲染5个作为缓冲区
    items.length
  );
  const visibleItems = items.slice(startIndex, endIndex);

  // 计算偏移量（让可视项目显示在正确位置）
  const offsetTop = startIndex * itemHeight;

  useEffect(() => {
    const container = containerRef.current;
    if (container) {
      container.addEventListener('scroll', handleScroll);
      return () => container.removeEventListener('scroll', handleScroll);
    }
  }, [startIndex]);

  return (
    <div
      ref={containerRef}
      style={{
        height: `${visibleCount * itemHeight}px`, // 可视区域高度
        overflow: 'auto',
        position: 'relative',
        border: '1px solid #ccc'
      }}
    >
      {/* 占位容器，维持滚动条高度 */}
      <div
        style={{
          height: `${items.length * itemHeight}px`,
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0
        }}
      />
      
      {/* 实际渲染的项目区域 */}
      <div
        ref={listRef}
        style={{
          position: 'absolute',
          top: offsetTop,
          left: 0,
          right: 0
        }}
      >
        {visibleItems.map((item, index) => (
          <div
            key={item.id}
            style={{
              height: `${itemHeight}px`,
              padding: '12px',
              borderBottom: '1px solid #eee',
              boxSizing: 'border-box'
            }}
          >
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
};

export default BasicVirtualList;

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

const ReactWindowList = ({ items }) => {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].content}
    </div>
  );

  return (
    <List
      height={500}       // 可视区域高度
      width="100%"       // 宽度
      itemCount={items.length} // 总项目数
      itemSize={50}      // 每个项目高度
    >
      {Row}
    </List>
  );
};

import { List } from 'react-virtualized';

const ReactVirtualizedList = ({ items }) => {
  const rowRenderer = ({ index, key, style }) => (
    <div key={key} style={style}>
      {items[index].content}
    </div>
  );

  return (
    <List
      height={500}
      width="100%"
      rowCount={items.length}
      rowHeight={50}
      rowRenderer={rowRenderer}
    />
  );
};