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

╰半橙微兮° 2022-06-09 09:57 248阅读 0赞

不得不吐槽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对象不是同一个对象造成的。

比如我界面注册了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的代码大概如下：