Antd-Select組件的深刻用法

1、Antd-Select提供幾種類型

1. 最基礎版只提供下拉功能的選擇器

2. 帶搜索功能的下拉選擇器

3. 可多選的下拉選擇器

4. 可搜索、可多選、可隨意輸入內容的tag下拉選擇器(支持自動分詞)

5. 多級聯動下拉選擇器

6. 搜索遠程數據下拉框

2、一些潛在用法

若是Select.Option選項的數量特別大:2k、3k...

假設請求數據時間咱們都解決好了,信心滿滿地準備把數據填充到<Select.Option>後下班!過會你會發現有多絕望..

這下拉框加載了10s還沒出來！?這時候先想着去antd文檔上找解決方法,無果後百度、SF、google....由於antd每次都會從新渲染<Select.Option>,因此要下降卡頓時間,惟一辦法就是減小渲染的數量

能夠來體驗一下:《antd-Select加載2k條數據演示》

發現問的人倒挺多,真正解決的回答沒見到幾個(我還沒找到..)
有的勸着放棄吧,加了那麼多用戶也不會看(確實如此),改作成一個搜索下拉框.稍微固執一點的繼續掙扎,終於找到了一個能優化加載速度的插件《react-select-fast-filter-options》
而後過會又發現,搜索功能確定也須要的呀!總不能讓用戶翻那2000條數據.否則可能半夜還在被投訴.

帶着最後一點但願,找了一下github上antd的Issues,裏面給的回答卻是挺有啓發的,可是仍是沒有正確的解決辦法.《ant-design:Issues》

因而就本身設計了一個,新手代碼請見諒,但願對你有幫助.

//render
const { optionsData } = this.state;

<Select style={{ width: 200 }} 
    showSearch
    onChange={this.handleSecChange}
    placeholder="請輸入/選擇xxx"   
    onSearch={this.handleSerach}
>
{
    optionsData.length && optionsData.map( (item, index) => (
        <Select.Option key={index} value={item}>{item}</Select.Option>)
    ) 
}
</Select>

//搜索Value值改變觸發回調函數
handleSerach(e){
  let { clusterValue } = this.state;
  let that = this;
  //相似函數節流
  setTimeout(function(){
    that.loadOption(clusterValue, e)
  },300)
  
}

loadOption(clusterValue, keyWords){
    const { options } = this.props.data;   //得到2k條數據
    let newOptionsData = [];
    let arrData = options[clusterValue]; 
    if(Object.keys(options).length){
      let len;
      if(arrData.length > 100)  len = 100;
      else len = arrData.length;
      
      //初始化
      if(keyWords == ''){
        for(var i=0;i<len;i++){
          newOptionsData.push(arrData[i])
        } 
      }
        
      //用戶搜索
      else{
        newOptionsData = [];
        for(var j = 0; j < arrData.length; j++){
          if(arrData[j].indexOf(keyWords) != -1){
            newOptionsData.push(arrData[j]);
            if(newOptionsData.length > 100) break;
          }
        }         
      } 
    }

    // return newOptionsData
    this.setState({
      optionsData: newOptionsData
    })
}

• 在handleSearch函數添加定時是爲了解決每次輸入都馬上請求,致使卡頓;用戶輸入完成後再統一查找,雖然會致使在搜索的時候增長300ms空白期,可是比用戶輸入卡頓要好
• 把渲染數量控制在100條內,防止卡頓,通常用戶查找一個數據,也會輸入得比較完整,不可能會在100條內查找。
• 區分初始化和搜索兩個不一樣狀況,用戶剛進入界面的時候,並無關鍵字搜索,因此這時候要初始化前100條內容給用戶,固然你也能夠按照必定的條件渲染數據給用戶,只要保證合理數量之內便可
• 由於個人數據是多級聯動的

options:{
'key': [xxx,xxx1,xxx2...],
'key1': [xxx,xxx1,xxx2...]
}

因此個人寫法是options[xxx],而後遍歷相應的數組便可

固然這僅僅是一種思路,更好的實現方法有不少！但願這能成爲你的方法的一個墊腳石

有時候多看看官方文檔真的頗有幫助.學習的不只僅是它的方法,還有它的思路。若是遇到它的一些特殊語法(語法糖),也能夠到ant-design-pro裏查閱

《ant-design-pro》