支持大數(shù)據(jù)渲染下拉列表組件開發(fā) SuperSelect(基于antd Select)

phoenixsky 發(fā)布于2019-05-23 13:53 / 2532人閱讀

摘要：功能簡介的組件不支持大數(shù)據(jù)量的下拉列表渲染，下拉列表數(shù)量太多會(huì)出現(xiàn)性能問題，基于封裝實(shí)現(xiàn)，替換原組件下拉列表，只渲染幾十條列表數(shù)據(jù)，隨下拉列表滾動(dòng)動(dòng)態(tài)刷新可視區(qū)列表狀態(tài)，實(shí)現(xiàn)大數(shù)據(jù)量列表高性能渲染。

功能簡介

antd 的 Select 組件不支持大數(shù)據(jù)量的下拉列表渲染，下拉列表數(shù)量太多會(huì)出現(xiàn)性能問題， SuperSelect 基于 antd 封裝實(shí)現(xiàn)，替換原組件下拉列表，只渲染幾十條列表數(shù)據(jù)，隨下拉列表滾動(dòng)動(dòng)態(tài)刷新可視區(qū)列表狀態(tài)，實(shí)現(xiàn)大數(shù)據(jù)量列表高性能渲染。

特性

基于 antd Select 組件，不修改組件用法

替換 antd Select 組件的下拉列表部分實(shí)現(xiàn)動(dòng)態(tài)渲染列表

初步測試 10w 條數(shù)據(jù)不卡頓

實(shí)現(xiàn)方案

使用 antd Select dropdownRender 方法自定義原組件下拉列表部分

對(duì)自定義列表項(xiàng)綁定原 Select 組件的各項(xiàng)方法和回調(diào)函數(shù)支持

同步使用 antd 組件下拉列表樣式

在線地址 使用

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

import SuperSelect from "components/SuperSelect";
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>
    );
};

問題

多選模式選擇后鼠標(biāo)點(diǎn)擊輸入框中刪除等圖標(biāo)時(shí)不能直接 hover 時(shí)獲取焦點(diǎn)直接刪除，需要點(diǎn)擊兩次

Warning: the children of `Select` should be `Select.Option` 
or `Select.OptGroup`, instead of `li`

重寫的下拉菜單沒有 isSelectOption（rc-select 源碼判斷下拉列表元素）屬性，控制臺(tái)會(huì)有 warning 提示下拉列表元素不符合 Select 組件要求

大佬們有啥更好的做法或建議請(qǐng)多多指教

附上代碼

import React, { PureComponent, Fragment } from "react";
import { Select } from "antd";

// 頁面實(shí)際渲染的下拉菜單數(shù)量，實(shí)際為 2 * ITEM_ELEMENT_NUMBER
const ITEM_ELEMENT_NUMBER = 20;
// Select size 配置
const ITEM_HEIGHT_CFG = {
    small: 24,
    large: 40,
    default: 32,
};

class Wrap extends PureComponent {
    state = {
        list: this.props.list,
        allHeight: this.props.allHeight,
    };

    reactList = (list, allHeight) => this.setState({ list, allHeight });

    render() {
        const { list } = this.state;
        const { notFoundContent } = this.props;
        // 搜索下拉列表為空時(shí)顯示 no data
        const noDataEle = (
            
                
                    
                        
                    
                    
                        {notFoundContent || "沒有匹配到數(shù)據(jù)"}
                    
                
            
        );
        return (
            
                
                    {list.length > 0 ");