摘要：簡(jiǎn)單的說就是能夠管理的狀態(tài)，狀態(tài)是由數(shù)據(jù)維護(hù)的，也就是說是管理數(shù)據(jù)的。在內(nèi)，每執(zhí)行一次，所有的都會(huì)執(zhí)行。所以這里就有個(gè)問題，如果比較多的時(shí)候，性能是不是就會(huì)出問題。

Redux is a predictable state container for JavaScript apps.

簡(jiǎn)單的說就是Redux能夠管理js app的狀態(tài)，狀態(tài)是由數(shù)據(jù)維護(hù)的，也就是說Redux是管理數(shù)據(jù)的。那么Redux是怎么管理數(shù)據(jù)的呢？

一個(gè)Redux app中只有一個(gè)store，所有的數(shù)據(jù)都在這個(gè)store中，而通過createStore(reducer, [initState])，initState是可選參數(shù)，也就是說決定store的是reducer，reducer決定store中存放什么樣的數(shù)據(jù)、處理什么樣的數(shù)據(jù)、處理數(shù)據(jù)的方式。

store在創(chuàng)建的時(shí)候內(nèi)部會(huì)執(zhí)行dispatch({ type: ActionTypes.INIT })，用來初始化整個(gè)store的數(shù)據(jù)結(jié)構(gòu)，同時(shí)獲取reducer中的默認(rèn)數(shù)據(jù)。之所以能拿到全部的數(shù)據(jù)結(jié)構(gòu)，是因?yàn)樵?b>dispatch({ type: ActionTypes.INIT })的時(shí)候，所有的reducer都會(huì)執(zhí)行，并根據(jù)reducer的combine結(jié)構(gòu)生成數(shù)據(jù)。在Redux內(nèi)，每執(zhí)行一次dispatch，所有的reducer都會(huì)執(zhí)行。

所以這里就有個(gè)問題，如果reducer比較多的時(shí)候，性能是不是就會(huì)出問題。大家可能會(huì)想到減少reducer，這也是一個(gè)辦法，但是如果刻意減少reducer的話，可能會(huì)導(dǎo)致某個(gè)reducer內(nèi)過于復(fù)雜，后期難以維護(hù)。

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

通過這樣簡(jiǎn)單的過濾就可以實(shí)現(xiàn)只讓對(duì)action感興趣的reducer執(zhí)行，簡(jiǎn)單，方便，快捷。

action是個(gè)object，它必須有個(gè)type屬性，一般是個(gè)常量，來標(biāo)示action類型，方便reducer處理。除去type剩下的一般就是要處理的數(shù)據(jù)，如果數(shù)據(jù)比較簡(jiǎn)單可以直接使用Object.assign({}, state, action.data)來處理，這種方法僅適合簡(jiǎn)單數(shù)據(jù)。

如果是復(fù)雜數(shù)據(jù)，有較深的層級(jí)，就要使用深度拷貝，這時(shí)候你可以使用lodash的cloneDeep進(jìn)行深度拷貝。

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

但是復(fù)雜數(shù)據(jù)的深度拷貝是很花性能的，這個(gè)時(shí)候就可以使用immutable.js來解決這個(gè)問題。immutable不可改變的意思，在Object-C中是原生提供這種數(shù)據(jù)類型的。對(duì)immutable.js生成的數(shù)據(jù)進(jìn)行操作之后總是返回一個(gè)新的數(shù)據(jù)，原有的數(shù)據(jù)不會(huì)改變。

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通過結(jié)構(gòu)共享來解決的數(shù)據(jù)拷貝時(shí)的性能問題，數(shù)據(jù)被set的時(shí)候，immutable.js會(huì)只clone它的父級(jí)別以上的部分，其他保持不變，這樣大家可以共享同樣的部分，可以大大提高性能。如圖

每次執(zhí)行dispatch，通過subscribe注冊(cè)的listener都會(huì)被執(zhí)行，如果listener較多，或者listener內(nèi)部處理比較復(fù)雜也會(huì)對(duì)性能產(chǎn)生影響， 而且在listener內(nèi)部很難區(qū)分哪個(gè)數(shù)據(jù)被改變了，如果在listener內(nèi)部繼續(xù)dispatch，而沒有處理好執(zhí)行dispatch條件的話，很容易造成dispatch->listener->dispatch死循環(huán)。所以建議通過middleware的方式來處理，而且在middleware內(nèi)部可以知道action是什么，就可以只處理關(guān)心的action。

預(yù)分配reducer、精簡(jiǎn)reducer

精簡(jiǎn)action數(shù)據(jù)或使用immutable.js

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

Redux

immutable.js

cloneDeep