react-window 大数据列表和表格数据渲染组件之虚拟滚动

简介

React Window 是一个高效的 React 组件库，专为渲染大数据列表和表格数据而设计。它通过”虚拟化”技术（也称为”窗口化”或”列表虚拟化”）解决了在 React 应用中渲染大量数据时的性能问题。与传统方法不同，React Window 只渲染用户当前可见的元素，而不是整个列表，从而显著提高了渲染性能和内存使用效率。

主要特性

• 高性能渲染：只渲染可视区域内的元素，大幅提升性能
• 灵活的布局：支持固定大小和可变大小的列表项
• 多种列表类型：支持垂直列表、水平列表和网格布局
• 轻量级：体积小，依赖少，易于集成
• 滚动优化：平滑的滚动体验，支持自动滚动到指定位置
• TypeScript 支持：完整的类型定义

安装方法

npm install react-window
# 或
yarn add react-window

使用示例

固定大小的列表

import { FixedSizeList } from "react-window";

const Example = () => {
  const items = Array(1000)
    .fill()
    .map((_, index) => `Item ${index}`);

  const Row = ({ index, style }) => (
    <div
      style={style}
      className="px-4 py-2 border-b border-gray-200 hover:bg-gray-50 transition-colors cursor-pointer"
    >
      {items[index]}
    </div>
  );

  return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100">
      <div className="bg-white rounded-lg shadow-lg overflow-hidden">
        <FixedSizeList
          height={400}
          width={300}
          itemCount={items.length}
          itemSize={40}
          className="scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100"
        >
          {Row}
        </FixedSizeList>
      </div>
    </div>
  );
};

export default Example;