Function introduction

Antd’s Select component does not support rendering of dropdown lists with large amounts of data. Too many dropdown lists may cause performance problems.

Antd-virtual-select, based on ANTD encapsulation, replaces the drop-down list of the original component, only renders dozens of list data, dynamically refreshes the list state of the visual area with the scrolling of the drop-down list, and achieves high-performance rendering of the list with more than 10,000 pieces of large data. Based on the ANTD Select component, the component usage is not modified.

  • Implementation scheme
    1. Using antd SelectdropdownRenderMethod to customize the original component drop-down list section
    2. Virtual scrolling rendering, rendering only the viewable list, scrolling dynamically loading other lists
    3. Support for custom list items bound to methods and callback functions of the original Select component
    4. Synchronizes using the ANTD component drop-down list style
    5. With antd select API

Online address

Code warehouse

At present, there are a variety of community drop-down list implementation schemes, but also have imperfect places, more visible ANTD long list rendering performance discussion issue 3789

The ANTD 4.0 Select component natively supports virtual list rendering, so this will not be an issue after 4.0, but you will have to do it yourself if you are ie9 compatible…

Use the sample

Use the same basic antD Select, but use SuperSelect instead of Select

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

const Example = (a)= > {
    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>
    );
};
Copy the code