React Redux使用的一些小优化

史占广发布于2019-08-20 13:54 / 391人阅读

摘要：要做多余的检查同样，内部数据，如果数据相同，尽量使用原数据。注所说的选择使用原来的对象，是确定数据没有发生改变的时候，使用原对象。多余提一句，在使用的时候，要谨慎使用。当组件够大，够复杂，可以考虑使用这个方法来减少的消耗。

之前画了一张redux的流程图，可以看看右下角的部分，可以看出来怎么进行优化。

在reducer里面，尽量减少数据的变动 不要做多余、无意义的事

也就是能不改变就不改变。比如不要做下面这种无谓的事情：

function reducer(state, action){
  // ....一大堆逻辑代码
  return {
   ...state
  }
}

这个代码虽然在selector中，也可以通过areStatePropsEqual来判断计算后的state是否发生了改变。

但是如果直接return state;就可以直接被areStatesEqual拦截，避免多余的计算和对比。

要做多余的检查

同样，state内部数据，如果数据相同，尽量使用原数据。只针对复杂数据类型(Object, Array)。
比如：

function reducer(state, action) {
  let mayNotChange = state.mayNotChange; // mayNotChange为Array或Object
  let newState = {...mayNotChange};
  // ...一大堆逻辑
  return {
    ...state,
    mayNotChange: changed ? newState : mayNotChange // 没有发生改变的话，就用原来的对象
  }
}

很多时候，一般习惯于通过计算，然后直接把生成的newState赋值给mayNotChange。

由于众所周知的{} !== {}的情况，如果能通过简单判断来决定是否可以选择使用原来的对象，那么就可以通过areStatePropsEqual来进行判断，同样可以避免不必要的计算，更可以避免不必要的渲染。

注: 所说的选择使用原来的对象，是确定数据没有发生改变的时候，使用原对象。并不是说当发生改变的时候，也在原来的对象上面修改最好。在不考虑自定义areStatesEqual和areStatePropsEqual的情况下，如果只在原对象上面进行修改，可能会造成对比的时候，前后两种结果相同，可能造成无法重新渲染的情况

优化equal的四个方法

在connect的option中，有四个对比的方法

areStatesEqual(默认为===)，用来判断redux store返回的state是否和之前的相同

areOwnPropsEqual(默认为shallowEqual)，用来判断父组件传入的props是否和之前的相同

areStatePropsEqual(默认为shallowEqual)，用来判断mapStateToProps的结果是否和之前的相同

areMergedPropsEqual(默认为shallowEqual)，用来判断最后merge合并的最终结果是否和之前的相同

可以通过自己的需求对着四个方法进行优化。

比如一个redux的state是这个样子：

  state = {
    pageA: {...},
    pageB: {...},
    number: 2
  }

而在pageA里面只需要pageA和number，那么就可以通过areStatesEqual来进行对比:

function areStatesEqual(prev, current){
  return prev.number === current.number && isEqual(prev.pageA, current.pageA);
}

或者针对复杂结构数据的情况，进行特殊处理，比如深度对比

function areStatePropsEqual(prev, current){
  return deepEqual(prev, current);
}

这些优化都可以减少不必要的计算和重渲染。

shouldComponentUpdate

多余提一句，在使用shouldComponentUpdate的时候，要谨慎使用。这个方法就是利用shouldComponentUpdate的消耗来换取render的消耗。

当某些小的、调用的次数少的component，就没有必要添加shouldComponentUpdate检查。

当组件够大，够复杂，可以考虑使用这个方法来减少re-render的消耗。当然，还是需要考虑用这个方法的消耗和diff&render的消耗比起来哪个更划算。

先想到这么多，等想到了其他的再添加上来。

idc机房托管超融合服务器 react-redux React_Redux_Appointm react-router-redux ddos一些比较小的网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81307.html

React-Redux性能优化

摘要：但是和一起使用还需要一个工具，这一篇就说一下在使用上的一些性能优化建议。如果的改变会引起值变化，那么会调用转换函数，传入作为参数，并返回结果。如果的值和前一次的一样，它将会直接返回前一次计算的数据，而不会再调用一次转换函数。前面写了两篇文章《React组件性能优化》《Redux性能优化》，分别针对React和Redux在使用上的性能优化给了一些建议。但是React和Redux一起使用...

JouyPub 2019-08-21 10:57 评论0 收藏0
高级前端面试题大汇总（只有试题，没有答案）

摘要：面试题来源于网络，看一下高级前端的面试题，可以知道自己和高级前端的差距。面试题来源于网络，看一下高级前端的面试题，可以知道自己和高级前端的差距。有些面试题会重复。使用过的koa2中间件 koa-body原理介绍自己写过的中间件有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理如何和MySQL进行通信 React声明周期及自己的理解如何...

kviccn 2019-08-23 13:41 评论0 收藏0
高级前端面试题大汇总（只有试题，没有答案）

摘要：面试题来源于网络，看一下高级前端的面试题，可以知道自己和高级前端的差距。面试题来源于网络，看一下高级前端的面试题，可以知道自己和高级前端的差距。有些面试题会重复。使用过的koa2中间件 koa-body原理介绍自己写过的中间件有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理如何和MySQL进行通信 React声明周期及自己的理解如何...

figofuture 2019-08-05 15:34 评论0 收藏0
2018大厂高级前端面试题汇总

摘要：面试的公司分别是阿里网易滴滴今日头条有赞挖财沪江饿了么携程喜马拉雅兑吧微医寺库宝宝树海康威视蘑菇街酷家乐百分点和海风教育。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。面试的公司分...

zzir 2019-08-23 12:38 评论0 收藏0
2018大厂高级前端面试题汇总

摘要：面试的公司分别是阿里网易滴滴今日头条有赞挖财沪江饿了么携程喜马拉雅兑吧微医寺库宝宝树海康威视蘑菇街酷家乐百分点和海风教育。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本人于7-8月开始准备面试，过五关斩六将，最终抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。面试的公司分...

CodeSheep 2019-08-05 15:20 评论0 收藏0