antd的select下拉框因为数据量太大造成卡顿的解决方案

相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。

所以这个时候，业务人员就提需求，需要改善优化。我就需要像办法来解决渲染卡顿的问题了。

我的想法是这样的：任何时候都只渲染前100条数据以保证不卡顿，然后当需要搜索的时候对从后台拿到的数据进行过滤，也只取前100条，然后当select框不下拉的时候也就是失焦的时候将数据回复原样。

下面是我的具体实现：

先从后台拿到数据，保存到变量fundList中（作为数据源，永远不改动），然后取其中的前100条数据保存到fundList_中，用来下拉框的数据渲染

{fundList_.map(item => {item.name})}

这是整个select组件

1.  <Select
1.  mode="multiple"
1.  maxTagCount={0}
1.  placeholder="请选择"
1.  showSearch={true}
1.  onBlur={this.handleOnBlur}
1.  onSearch={this.handleOnSearch}
1.  allowClear={true}
1.  onChange={(value)=>{this.modalChangeSelect(value,'1')}}
1.  style={{width:'223px'}}
1.  value={record['1']||undefined}
1.  disabled={this.state.visibleType==='修改'?true:false}
1.  >
1.  {fundList_.map(item => <Option key={item.fund} value={item.fund}>{item.name}</Option>)}
1.  </Select>

然后写search里面的功能

1.  <Select
1.  mode="multiple"
1.  maxTagCount={0}
1.  placeholder="请选择"
1.  showSearch={true}
1.  onBlur={this.handleOnBlur}
1.  onSearch={this.handleOnSearch}
1.  allowClear={true}
1.  onChange={(value)=>{this.modalChangeSelect(value,'1')}}
1.  style={{width:'223px'}}
1.  value={record['1']||undefined}
1.  disabled={this.state.visibleType==='修改'?true:false}
1.  >
1.  {fundList_.map(item => <Option key={item.fund} value={item.fund}>{item.name}</Option>)}
1.  </Select>

当select失焦的时候，将数据恢复原样（只显示fundList中的前100条数据）

1.  handleOnBlur = () => {
1.  this.setState({fundList_: this.state.fundList.slice(0,100)})
1.  }