**优化肯定要知道为什么会卡,首先要判断是否由于后端返回的数据过大导致页面DOM过多卡死浏览器,我们可以截取后端数据只取前一百条
{fundList_.map(item => <Option key={item.fund} value={item.fund}>{item.name}</Option>)}
select组件
<Select
mode="multiple"
maxTagCount={0}
placeholder="请选择"
showSearch={true}
onBlur={this.handleOnBlur}
onSearch={this.handleOnSearch}
allowClear={true}
onChange={(value)=>{this.modalChangeSelect(value,"1")}}
style={{width:"223px"}}
value={record["1"]||undefined}
disabled={this.state.visibleType==="修改"?true:false}
>
{fundList_.map(item => <Option key={item.fund} value={item.fund}>{item.name}</Option>)}
</Select>
handleOnSearch = value => {
// 函数节流,防止数据频繁更新,每300毫秒才搜索一次
let that = this
if (!this.timer) {
this.timer = setTimeout(function(){
that.searchValue(value)
that.timer = null
},300)
}
}
searchValue = (value) => {
const datas = []
const {fundList} = this.state
// 对fundList进行遍历,将符合搜索条件的数据放入datas中
fundList.forEach(item => {
if (item.name.indexOf(value) > -1) {
datas.push(item)
}
})
// 然后只显示符合搜索条件的所有数据中的前100条
this.setState({fundList_: datas.slice(0,100)})
}
//当select失焦的时候,将数据恢复原样(只显示fundList中的前100条数据):
handleOnBlur = () => {
this.setState({fundList_: this.state.fundList.slice(0,100)})
}