Redux性能优化

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