（虚拟滚动）react-window、react-virtualized、antd-table-infinity

工具

react-window

React组件，用于有效地渲染大列表和表格数据。

react-virtualized

用于高效渲染大型列表和表格数据的 React 组件。

antd-table-infinity

基于antd-table的无限滚动组件，支持虚拟滚动。

ahooks - usevirtuallist（hooks）

提供虚拟化列表能力的 Hook，用于解决展示海量数据渲染时首屏渲染缓慢和滚动卡顿问题。

antd-Select 使用的虚拟滚动插件

案例

import React from 'react';
import { FixedSizeList as List } from 'react-window';
import styles from './index.module.scss';
export default () => {
    const Row = ({ index, style }) => (
        <div style={{ ...style, backgroundColor: index % 2 === 0 ? '#999' : '' }}>
            虚拟滚动技术{index}
        </div>
    );
    return (
        <div className={styles.content}>
            <List
                width="100%"
                height={200}
                itemCount={100} // 总共多少行
                itemSize={30} // 每行高度
            >
                {Row}
            </List>
        </div>
    );
};