虚拟滚动（react-window）

虚拟滚动（Virtual Scrolling）是一种优化长列表性能的技术，通过只渲染可视区域内的列表项，从而减少 DOM 节点的数量，提高页面性能。在 React 中，可以使用第三方库 react-window 来实现虚拟滚动。

首先，安装 react-window：

npm install react-window

然后，使用 react-window 的 FixedSizeList 组件实现虚拟滚动：

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

const Row = ({ index, style }) => {
  return (
    <div style={style}>
      {/* 渲染列表项内容 */}
      {`列表项 ${index}`}
    </div>
  );
};

const VirtualScroll = () => {
  const itemCount = 1000; // 列表项总数
  const itemSize = 50; // 每个列表项的高度

  return (
    <List
      height={300} // 可视区域高度
      itemCount={itemCount}
      itemSize={itemSize}
      width="100%" // 可视区域宽度
    >
      {Row}
    </List>
  );
};

export default VirtualScroll;

在这个例子中，我们创建了一个包含 1000 个列表项的虚拟滚动列表。每个列表项的高度为 50px，可视区域的高度为 300px。react-window 会根据滚动位置自动计算并渲染可视区域内的列表项。