博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Redux性能优化
阅读量:5866 次
发布时间:2019-06-19

本文共 1963 字,大约阅读时间需要 6 分钟。

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)来处理,这种方法仅适合简单数据。

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

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

immutable

但是复杂数据的深度拷贝是很花性能的,这个时候就可以使用来解决这个问题。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'); // 2map2.get('b'); // 50

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

immutable-js-share.gif

subscribe

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

总结

预分配reducer、精简reducer

精简action数据或使用immutable.js

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

参考

转载地址:http://eqnnx.baihongyu.com/

你可能感兴趣的文章
说的漂亮不如干的漂亮…
查看>>
linux yum 安装mysql
查看>>
java游戏服务器 策略+简单工厂
查看>>
vmware horizon view 基础架构
查看>>
C语言函数参数为空和void
查看>>
DHTML【1】
查看>>
mysqldump的详细流程
查看>>
rsync+lsyncd实现文件实时同步
查看>>
说明情况
查看>>
Xshell 连接虚拟机慢 解决方案
查看>>
JS关于根据当前时间计算一周的方法
查看>>
Linux日常命令集锦
查看>>
日期提前一周功能
查看>>
AIX 常用磁盘管理命令-个人总结
查看>>
Linux ssh服务常用配置的详细描述及建议配置
查看>>
Win10专业版永久激活方法
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
HA高可用实验报错
查看>>
Windows Server入门系列之十四 IP地址配置
查看>>