antd多选框选项太多数据量太大出现页面卡顿怎么解决

Question

如题，数据从后台读，有些多选框的选项太多数据量太大，结果页面直接就卡住了好几秒无法进行操作，这样应该怎么解决
补充，数据有6000+
代码如下：

{getFieldDecorator(`dimensions-${this.state.dimensionList[k]}`, {
})(
    <Select multiple
            style={{width: '70%', marginRight: 8}}
            placeholder="请选择"
            onChange={this.onLevelChange}>
        {this.state.level[k].map((item,idx) => <Option key={item.level_id || "未选择维度"}>{item.level_name || ''}</Option>)}
    </Select>
)}

Answer 1

选项这么多的情况下，用搜索模式，然后服务端返回结果会更加合理： https://ant.design/components...

Answer 2

单纯渲染dom的话, 感觉几百几千条选项都不会有什么影响.
可能是你的渲染方法有问题.

还有假如真的有很多条选项建议写一个模态组件中放置选择框 而不要用select, 这样不便于操作.

Answer 3

拿一个数组Lsit去记录所有的数据，初始Select为前50条，通过Select的onsearch方法，判断输入值不为null和’‘，使select的数据为所有数据，如果不搜索且滚动条到底!使用官方select中扩展菜单例子，'+'的方法变为赋值所有数据，再使用select的onbulr方法，失去焦点后变为初始50条的状态