亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

phoenixsky / 2594人閱讀

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

功能簡(jiǎn)介

antd 的 Select 組件不支持大數(shù)據(jù)量的下拉列表渲染，下拉列表數(shù)量太多會(huì)出現(xiàn)性能問(wè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)渲染列表

    初步測(cè)試 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>
    );
};
問(wèn)題

多選模式選擇后鼠標(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`

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

大佬們有啥更好的做法或建議請(qǐng)多多指教
附上代碼 
import React, { PureComponent, Fragment } from "react";
import { Select } from "antd";

// 頁(yè)面實(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 || "沒(méi)有匹配到數(shù)據(jù)"}
                    
    
                
    
            
    • 
        );
        return (
            
    
                
      
                    {list.length > 0 ");

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/6970.html

    相關(guān)文章

    • babel在提升前端效率的實(shí)踐

      摘要：配置涵蓋了目前的業(yè)務(wù)場(chǎng)景的基本需求，但是可擴(kuò)展性很低。最終決定采用的生態(tài)鏈來(lái)解決上述遇到的問(wèn)題。在指定的路徑下寫(xiě)入對(duì)應(yīng)的文件。 大綱 遇到的問(wèn)題場(chǎng)景及解決方案對(duì)比 什么是babel？ 解決過(guò)程 目前遺留的問(wèn)題 目前實(shí)現(xiàn)功能API 參考 遇到的問(wèn)題場(chǎng)景及解決方案對(duì)比 我們目前采用的是antd + react(umi)的框架做業(yè)務(wù)開(kāi)發(fā)。在業(yè)務(wù)開(kāi)發(fā)過(guò)程中會(huì)有較多頻繁出現(xiàn)并且相似度很高的場(chǎng)...

      huayeluoliuhen 評(píng)論0 收藏0

    • Babel 在提升前端效率的實(shí)踐

      摘要：經(jīng)過(guò)一周左右的時(shí)間完成了基礎(chǔ)組件的編寫(xiě)。配置涵蓋了目前的業(yè)務(wù)場(chǎng)景的基本需求，但是可擴(kuò)展性很低。最終決定采用的生態(tài)鏈來(lái)解決上述遇到的問(wèn)題。在指定的路徑下寫(xiě)入對(duì)應(yīng)的文件。大綱 遇到的問(wèn)題場(chǎng)景及解決方案對(duì)比 什么是babel？ 解決過(guò)程 目前遺留的問(wèn)題 目前實(shí)現(xiàn)功能API 參考 遇到的問(wèn)題場(chǎng)景及解決方案對(duì)比 我們目前采用的是antd + react(umi)的框架做業(yè)務(wù)開(kāi)發(fā)。在業(yè)務(wù)開(kāi)發(fā)過(guò)程中會(huì)...

      chanthuang 評(píng)論0 收藏0

    • 面試官(6): 寫(xiě)過(guò)『通用前端組件』嗎?

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

      waltr 評(píng)論0 收藏0

    • JSON生成Form表單

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

      bingchen 評(píng)論0 收藏0

    • 前端項(xiàng)目發(fā)布后的問(wèn)題總結(jié)

      摘要：引言最近做的項(xiàng)目已經(jīng)接近尾聲剛剛發(fā)到線上回顧和總結(jié)一下這段時(shí)間遇到的問(wèn)題和個(gè)人的一些想法。通過(guò)在指令中比較前后值以及設(shè)置避免不必要更新導(dǎo)致的彈窗渲染。 引言 最近做的項(xiàng)目已經(jīng)接近尾聲,剛剛發(fā)到線上,回顧和總結(jié)一下這段時(shí)間遇到的問(wèn)題和個(gè)人的一些想法。 select下拉修改和復(fù)原 //部分下拉選項(xiàng) {{o...

      endless_road 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <