用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)){
             //进行需求处理的部分
            }
          })
        }