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

phoenixsky 發布于2019-05-23 13:53 / 2522人閱讀

摘要：功能簡介的組件不支持大數據量的下拉列表渲染，下拉列表數量太多會出現性能問題，基于封裝實現，替換原組件下拉列表，只渲染幾十條列表數據，隨下拉列表滾動動態刷新可視區列表狀態，實現大數據量列表高性能渲染。

功能簡介

antd 的 Select 組件不支持大數據量的下拉列表渲染，下拉列表數量太多會出現性能問題， SuperSelect 基于 antd 封裝實現，替換原組件下拉列表，只渲染幾十條列表數據，隨下拉列表滾動動態刷新可視區列表狀態，實現大數據量列表高性能渲染。

特性

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

替換 antd Select 組件的下拉列表部分實現動態渲染列表

初步測試 10w 條數據不卡頓

實現方案

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

對自定義列表項綁定原 Select 組件的各項方法和回調函數支持

同步使用 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>
    );
};

問題

多選模式選擇后鼠標點擊輸入框中刪除等圖標時不能直接 hover 時獲取焦點直接刪除，需要點擊兩次

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

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

大佬們有啥更好的做法或建議請多多指教

附上代碼

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

// 頁面實際渲染的下拉菜單數量，實際為 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;
        // 搜索下拉列表為空時顯示 no data
        const noDataEle = (
            
                
                    
                        
                    
                    
                        {notFoundContent || "沒有匹配到數據"}
                    
                
            
        );
        return (
            
                
                    {list.length > 0 ");

云服務器 GPU云服務器下拉列表組件 antd Select 大數據開發組件 select下拉菜單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6970.html

babel在提升前端效率的實踐

摘要：配置涵蓋了目前的業務場景的基本需求，但是可擴展性很低。最終決定采用的生態鏈來解決上述遇到的問題。在指定的路徑下寫入對應的文件。大綱遇到的問題場景及解決方案對比什么是babel？解決過程目前遺留的問題目前實現功能API 參考遇到的問題場景及解決方案對比我們目前采用的是antd + react(umi)的框架做業務開發。在業務開發過程中會有較多頻繁出現并且相似度很高的場...

huayeluoliuhen 2019-08-26 13:51 評論0 收藏0
Babel 在提升前端效率的實踐

摘要：經過一周左右的時間完成了基礎組件的編寫。配置涵蓋了目前的業務場景的基本需求，但是可擴展性很低。最終決定采用的生態鏈來解決上述遇到的問題。在指定的路徑下寫入對應的文件。大綱遇到的問題場景及解決方案對比什么是babel？解決過程目前遺留的問題目前實現功能API 參考遇到的問題場景及解決方案對比我們目前采用的是antd + react(umi)的框架做業務開發。在業務開發過程中會...

chanthuang 2019-05-21 16:37 評論0 收藏0
面試官(6): 寫過『通用前端組件』嗎?

摘要：很久沒上掘金發現草稿箱里存了好幾篇沒發的文章最近梳理下發出來往期面試官系列如何實現深克隆面試官系列的實現面試官系列前端路由的實現面試官系列基于數據劫持的雙向綁定優勢所在面試官系列你為什么使用前端框架前言設計前端組件是最能考驗開發者基本功的測很久沒上掘金,發現草稿箱里存了好幾篇沒發的文章,最近梳理下發出來往期面試官系列(1): 如何實現深克隆面試官系列(2): Event Bus...

waltr 2019-05-27 17:43 評論0 收藏0
JSON生成Form表單

摘要：是校驗表單組件數據正確性的字段，其值為數組，里面的數組元素可以為。所以數組元素如果為的話，其內容就是的。到目前為止，表單適合大部分的表單應用場景。 JSON表單描述 JSON表單是一個基于React的抽象組件，它可以把JSON數據格式描述的表單轉換成項目中的表單，它可以用簡短的幾行代碼，快速的生成Form表單。JSON表單的優點是：可以快速構建出一個表單表單的數據、邏輯、視圖分...

bingchen 2019-08-26 13:22 評論0 收藏0
前端項目發布后的問題總結

摘要：引言最近做的項目已經接近尾聲剛剛發到線上回顧和總結一下這段時間遇到的問題和個人的一些想法。通過在指令中比較前后值以及設置避免不必要更新導致的彈窗渲染。引言最近做的項目已經接近尾聲,剛剛發到線上,回顧和總結一下這段時間遇到的問題和個人的一些想法。 select下拉修改和復原 //部分下拉選項 {{o...

endless_road 2019-08-20 17:24 評論0 收藏0