支持大数据渲染下拉列表组件开发 SuperSelect(基于antd Select)

phoenixsky 发布于2019-05-23 13:53 / 2407人阅读

摘要：功能简介的组件不支持大数据量的下拉列表渲染，下拉列表数量太多会出现性能问题，基于封装实现，替换原组件下拉列表，只渲染几十条列表数据，随下拉列表滚动动态刷新可视区列表状态，实现大数据量列表高性能渲染。

功能简介

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下拉菜单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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