antd-virtual-select рендеринг с плавной прокруткой 10 000 фрагментов данных

React.js

Введение в функцию

Компонент Select в antd не поддерживает отрисовку раскрывающихся списков с большим объемом данных. Слишком большое количество раскрывающихся списков вызовет проблемы с производительностью.

antd-virtual-select реализован на основе инкапсуляции antd, заменяет выпадающий список оригинального компонента, рендерит только десятки данных списка и динамически обновляет состояние списка визуальной области при прокрутке выпадающего списка.万条以上Высокопроизводительный рендеринг списков больших объемов данных. На основе компонента antd Select использование компонента не изменяется.

  • План реализации
    1. Использование и выборdropdownRenderМетод настройки части раскрывающегося списка исходного компонента
    2. Рендеринг виртуальной прокрутки, отображает только список видимых областей, прокрутка динамически загружает другие списки
    3. Поддерживает различные методы и функции обратного вызова пользовательских элементов списка, привязанных к исходному компоненту Select.
    4. Синхронное использование стилей выпадающего списка компонентов antd
    5. с помощью antd выберите API

онлайн-адрес

репозиторий кода

В настоящее время выпадающий список сообщества представляет собой множество решений, и есть несовершенные места. Более заметное обсуждение проблемы производительности рендеринга длинного списка ANTDissue 3789

Компонент выбора antd 4.0 изначально поддерживает рендеринг виртуального списка, так что это не проблема после 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>
    );
};
Категории