用React做移動端的項目記錄

最近做了一個關於移動端的項目 剛接觸的時候以爲是要用ReactNative這種寫呢  結果大佬跟我說 我們現在做的這個項目就類似於在手機瀏覽器中打開頁面  然後只是套了一個APP的外殼  用React寫就足夠了

先分享一些用到的實用組件或者插件吧

1、吹爆antd呀 移動端也涉及了 我用的最多的比如菜單欄啦 tab頁啦 的組件都是來自於antd的（當然有些改antd的太費勁了我就自己手寫組件了哈哈哈哈哈） 下面放上網址 Ant Design Mobile of React

2、項目中需要添加一下數據分析的圖表  我用的就是下面這個F2也是ant的呦 只不過是antv  網址如下 F2 功能很強大哦  以前用的eCharts 和BizChart比較多  圖表的樣式是沒有這兩個的資源豐富啦 但是 也是很多種類可以用的  日常的需求是可以滿足了 截個目錄的圖叭

關於F2的一些使用心得我會抽空（不定啥時候再能想起來更新了 23333）寫一篇詳細的

3、 移動端是很注重用戶體驗的比如下拉列表的滾動啥的   大佬在GitHub上面找到了一個插件 better-Scroll（日常爲大佬打Call !!!）  我放下網址僅供參考 Better-Scroll中文文檔 這個網址不是GitHub上的 是找的一箇中文文檔 很詳細的說明了better-scroll的用法 愛了愛了

然後是最近項目中get到的lodash的超好用方法

1、_groupBy：創建一個對象，key 是 iteratee 遍歷 collection(集合) 中的每個元素返回的結果。 分組值的順序是由他們出現在 collection(集合) 中的順序確定的。每個鍵對應的值負責生成 key 的元素組成的數組。iteratee 調用 1 個參數： (value)。

2、_orderBy：此方法類似於_.sortBy，除了它允許指定 iteratee（迭代函數）結果如何排序。 如果沒指定 orders（排序），所有值以升序排序。 否則，指定爲"desc" 降序，或者指定爲 "asc" 升序，排序對應值

3、_filter：遍歷 collection（集合）元素，返回 predicate（斷言函數）返回真值 的所有元素的數組。 predicate（斷言函數）調用三個參數：(value, index|key, collection)。

 最後  讓我打開眼界的並行發送請求的 all 方法

let yieldCallList=[];
        for (let i = 0; i < indexIdxLists.length; i++) {
          const { idxBh, dwzdBh, periodType, periodFreq } = indexIdxLists[i].dataSource
          let instDateListFinal = ''
          instDateList.forEach((item, i) => {
            if (i == instDateList.length - 1) {
              instDateListFinal += item
            } else {
              instDateListFinal += item + ','
            }
          })
            //請求Params
          const targetsParam = getTargetsParam(
            idxBh,
            instDateListFinal,
            dwzdBh,
            periodType,
            indexIdxLists[i],
            periodFreq
          )
        // 組織一個數組 裏面存放yield call 
          yieldCallList.push(call(xds, 'sys/XIndexData/v1_0', {
            reqMethod: 'CUSTOM',
            reqParam: targetsParam,
          }));
        }
        //用yield all 發送個並行請求 節省時間
        const resaultList = yield all(yieldCallList)
        //返回的也是個數組 是每個請求的返回信息
        if(!_isEmpty(resaultList)){
          _forEach( resaultList ,item=>{
        //要對每個信息進行判斷 是否是返回的有效數據
            if(checkResult(item)){
             //進行需求處理的部分
            }
          })
        }