antd mobile(十) 性能优化PureRender的使用

不得不吐槽react，确实不是新手玩的东西，一句话就是水深坑多啊。如果是前台新手我还是不建议直接使用这种框架开发。

搜索react的性能优化，都提到了用pureRender来优化其性能，其实就是减少虚拟dom跟实际dom的diff的计算。但在dva这种架子下面，根本没法使用pureRender来进行性能优化，因为返回的永远是true，根本就做不到减少渲染的效果。

分析下了pureRender源代码，将props和nextProps打印出来看看。

    console.log(this.props);
    console.log(nextProps);
    //这里shallowEqual是react-addons-pure-render-mixin提供的对象浅对比方法
    console.log(!shallowEqual(this.props, nextProps));

只要通过了reducer进行了值的变更，如果只是简单的用眼观察，会发现this.props跟nextProps是一样的，但是通过shollowEqual则返回的却是false，跟踪代码会发现问题出现在this.props跟nextProps里面的reducer对象不是同一个对象造成的。

function is(x, y) {
     if (x === y) {
        console.log("-----------是同一对象----")
        console.log(x);
        // Steps 1-5, 7-10
        // Steps 6.b-6.e: +0 != -0
        // Added the nonzero y check to make Flow happy, but it is redundant
        return x !== 0 || y !== 0 || 1 / x === 1 / y;
      } else {
        console.log("-----------不是同一对象----")
        console.log(x);
        // Step 6.a: NaN == NaN
        return x !== x && y !== y;
      }
}

比如我界面注册了singlePlanMd的reducer对象

export default connect((singlePlanMd) => ({singlePlanMd}))(SinglePlan)

这时候只要通过dispatch对参数进行过修改，会发现is(this.props.singlePlanMd.singlePlanMd, nextProps.singlePlanMd.singlePlanMd)就是false咯。
再对该值取反，则永远是true 也就是每次都会render

  shouldComponentUpdate(nextProps, nextState) {
     return !is(this.props.singlePlanMd.singlePlanMd, nextProps.singlePlanMd.singlePlanMd)
  }

按理来说这样是没问题的因为每次修改就是希望重新渲染界面，但在有些场合并不希望如此操作。

    dispatch({
      type: 'singlePlanMd/setCurAnimate',
      curAnimate: 'left',
      scroll: {
        taskList: 0
      }
    });

比如现在有这么个需求，就是界面滚动后，界面的滚动位置保存到全局的Md里面，然后跳转界面后，再回到当前界面时，读取对应的滚动参数，并将界面滚动指定位置。
这时候如果每次记录滚动位置都render自然就太费性能咯，这种存储参数值的应该不触发更新操作，才比较合理。

为了实现该效果，为了提高性能所以项目组约定如果是nextProps与this.props的属性长度不一样时触发刷新，如果是nextProps与this.props的第一层属性是常规属性而且值不一样时才刷新，如果第一层属性是对象则判断该对象的属性长度是否一致，如果一致则不需要刷新，如果不一致则刷新，而不对值的变化进行监听。

比如在this.props里面设置一个scroll对象，如果对scroll对象的值进行变更则不会触发刷新功能。
这是封装后的组件更新代码如下：

  shouldComponentUpdate(nextProps, nextState) {
    return goingComponentUpdate(this, nextProps, nextState,"singlePlanMd");
  }

goingComponentUpdate的代码大概如下：

function shallowEqual(objA, objB) {
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }

  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  for (var i = 0; i < keysA.length; i++) {
    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
      return false;
    }
  }
  return true;
}
export function goingComponentUpdate(pageObj,nextProps, nextState,mdName) {
  return (
    !shallowEqual(pageObj.props, nextProps) || !shallowEqual(pageObj.state, nextState)||
    !shallowEqual(pageObj.props[mdName][mdName], nextProps[mdName][mdName]) ||!shallowEqual(pageObj.props[mdName]["AppMd"], nextProps[mdName]["AppMd"])
  );
}