平时使用antd中Select的下拉一般就几十几百条，这时候直接使用组件模糊查询就能实现大部分业务场景需求。

今天遇到一个需要模糊查询并且总量上万条的下拉框，如果一次性怼上去上万条，会造成浏览器卡顿。所以这边采用后端分页，前端触底加载刷新的方式去优化这个模糊查询。

<Select
   allowClear  //支持清除
   showSearch  //支持输入
   filterOption={false}   //这个参数false才能支持接口数据动态刷新
   style={{ width: '100%' }}
   onSearch={this.diagNameonSearch}  //输入
   onChange={this.diagNameChange}
   onPopupScroll={this.onPopupScroll}  //监听下拉事件
   placeholder={'请选择诊断'}
   getPopupContainer={triggerNode => (triggerNode.parentElement || document.body)} //防止页面滚动导致下拉框错位
 >
   {Array.isArray(diagNameList) && diagNameList.map((item: any) => {
     if (item.itemName) {
       return <Option value={item.itemName}>11{item.itemName}</Option>
     }
   })
   }
 </Select>

diagNameChange = (e: any, action: any) => { //选择事件
  this.updateState({ diagName: e, });
  console.log(action, 'action')
  if (action === undefined) {
    this.props.dispatch({
      type: 'admissionRecordCheck/pageGet',
      payload: {
        keyword: '',
        pageNum: 1,
        pageSize: 10,
      },
    })
  }
};
diagNameonSearch = (e: any) => { //输入事件
  clearTimeout(this.state.antiShake) //加入防抖  防止输入时反复调用接口
  this.setState({
    antiShake: setTimeout(() => {
      this.updateState({ //保存当前输入值  用于后续触底刷新
        keyword: e,
      })
      this.props.dispatch({
        type: 'admissionRecordCheck/pageGet',
        payload: {
          keyword: e,
          pageNum: 1,
          pageSize: 10,
        },
      })
    }, 1000)
  })
}
onPopupScroll = (e: any) => { //滚动事件 用于判断触底刷新
  const { pageGetpageNum, pageGetpageSize, diagNameList, keyword } = this.props.admissionRecordCheck
  const { target } = e;
  const { scrollTop, scrollHeight, clientHeight } = target;
  if (scrollTop + clientHeight == scrollHeight) { //触底 触发分页查询接口！
    this.props.dispatch({
      type: 'admissionRecordCheck/pageGetScroll',
      payload: {
        keyword,
        pageNum: pageGetpageNum + 1,
        pageSize: 10,
      },
    }).then((res: any) => {
      if (res && res.resultCode == "000000") {
        let dataList = Array.isArray(res.data.dataList) ? res.data.dataList : []
        this.updateState({
          diagNameList: diagNameList.concat(dataList), //合并原数组
          pageGetpageNum: pageGetpageNum + 1,
        })
      } else {
        (res && res.resultMsg) ? message.warning(`${res.resultMsg}`) : message.error('请求错误！')
      }
    })
  }

}