antd-virtual-select 万条数据流畅滚动渲染

10,048 阅读1分钟

功能简介

antd 的 Select 组件不支持大数据量的下拉列表渲染,下拉列表数量太多会出现性能问题.

antd-virtual-select 基于 antd 封装实现,替换原组件下拉列表,只渲染几十条列表数据,随下拉列表滚动动态刷新可视区列表状态,实现万条以上大数据量列表高性能渲染。基于 antd Select 组件,不修改组件用法。

  • 实现方案
    1. 使用 antd Select dropdownRender 方法自定义原组件下拉列表部分
    2. 虚拟滚动渲染,只渲染可视区列表,滚动动态加载其他列表
    3. 对自定义列表项绑定原 Select 组件的各项方法和回调函数支持
    4. 同步使用 antd 组件下拉列表样式
    5. 同 antd select api

在线地址

代码仓库

目前社区下拉列表实现方案多种多样,也都有不完美的地方 ,更多可见 antd 长列表渲染性能问题讨论 issue 3789

antd 4.0 select 组件原生支持虚拟列表渲染,所以 4.0 以后这也不是问题了,但需要兼容 ie9 只好自己动手了。。。

使用示例

基本使用同 antd Select,只是使用 SuperSelect 代替 Select

import SuperSelect from 'antd-virtual-select';
import { Select } from 'antd';
const Option = Select.Option;

const Example = () => {
    const children = [];

    for (let i = 0; i < 100000; i++) {
        children.push(
            <Option value={i + ''} key={i}>
                {i}
            </Option>
        );
    }

    return (
        <SuperSelect
            showSearch
            // mode="multiple"
            // onChange={onChange}
            // onSearch={onSearch}
            // onSelect={onSelect}
        >
            {children}
        </SuperSelect>
    );
};