Redux性能优化

plokmju88 发布于2019-08-22 11:01 / 1347人阅读

摘要：简单的说就是能够管理的状态，状态是由数据维护的，也就是说是管理数据的。在内，每执行一次，所有的都会执行。所以这里就有个问题，如果比较多的时候，性能是不是就会出问题。

Redux is a predictable state container for JavaScript apps.

简单的说就是Redux能够管理js app的状态，状态是由数据维护的，也就是说Redux是管理数据的。那么Redux是怎么管理数据的呢？

store

一个Redux app中只有一个store，所有的数据都在这个store中，而通过createStore(reducer, [initState])，initState是可选参数，也就是说决定store的是reducer，reducer决定store中存放什么样的数据、处理什么样的数据、处理数据的方式。

store在创建的时候内部会执行dispatch({ type: ActionTypes.INIT })，用来初始化整个store的数据结构，同时获取reducer中的默认数据。之所以能拿到全部的数据结构，是因为在dispatch({ type: ActionTypes.INIT })的时候，所有的reducer都会执行，并根据reducer的combine结构生成数据。在Redux内，每执行一次dispatch，所有的reducer都会执行。

reducer

所以这里就有个问题，如果reducer比较多的时候，性能是不是就会出问题。大家可能会想到减少reducer，这也是一个办法，但是如果刻意减少reducer的话，可能会导致某个reducer内过于复杂，后期难以维护。

const dispatcher = (state={}, action) {
  switch (action.type) {
    case "TYPE1": 
    case "TYPE2":
      return reducerFirst(state, action)
    case "TYPE3":
      return reducerSecond(state, action)
    default:
      return state
  }
}

通过这样简单的过滤就可以实现只让对action感兴趣的reducer执行，简单，方便，快捷。

action

action是个object，它必须有个type属性，一般是个常量，来标示action类型，方便reducer处理。除去type剩下的一般就是要处理的数据，如果数据比较简单可以直接使用Object.assign({}, state, action.data)来处理，这种方法仅适合简单数据。

如果是复杂数据，有较深的层级，就要使用深度拷贝，这时候你可以使用lodash的cloneDeep进行深度拷贝。

var objects = [{ "a": 1 }, { "b": 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// ➜ false

immutable

但是复杂数据的深度拷贝是很花性能的，这个时候就可以使用immutable.js来解决这个问题。immutable不可改变的意思，在Object-C中是原生提供这种数据类型的。对immutable.js生成的数据进行操作之后总是返回一个新的数据，原有的数据不会改变。

var Immutable = require("immutable");
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set("b", 50);
map1.get("b"); // 2
map2.get("b"); // 50

immutable.js通过结构共享来解决的数据拷贝时的性能问题，数据被set的时候，immutable.js会只clone它的父级别以上的部分，其他保持不变，这样大家可以共享同样的部分，可以大大提高性能。如图

subscribe

每次执行dispatch，通过subscribe注册的listener都会被执行，如果listener较多，或者listener内部处理比较复杂也会对性能产生影响，而且在listener内部很难区分哪个数据被改变了，如果在listener内部继续dispatch，而没有处理好执行dispatch条件的话，很容易造成dispatch->listener->dispatch死循环。所以建议通过middleware的方式来处理，而且在middleware内部可以知道action是什么，就可以只处理关心的action。

总结

预分配reducer、精简reducer

精简action数据或使用immutable.js

使用middleware处理特殊需求(reducer中不方便处理的需求)

参考

Redux

immutable.js

cloneDeep

GPU服务器服务器托管性能优化优化系统性能网站性能优化页面性能优化

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

转载请注明本文地址：https://www.ucloud.cn/yun/91627.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
2018大厂高级前端面试题汇总

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

zzir 2019-08-23 12:38 评论0 收藏0