前面寫了《React組件性能優(yōu)化》《Redux性能優(yōu)化》《React-Redux性能優(yōu)化》官疲，但是都沒有從這些框架的實現(xiàn)上講為什么肥哎？這次就從源碼上來分析一下這些框架的實現(xiàn)原理客冈，以更深入的理解這些框架爱葵，并更好的使用它們河劝。
Redux的api很簡單惠啄，下面一個一個的分析慎恒。
createStore
首先說下它的三個參數(shù)reducer、preloadedState撵渡、enhancer融柬。reducer是唯一必傳的參數(shù)，它很重要趋距，因為它決定了整個state粒氧。preloadedState就是state的初始值。第三個參數(shù)不是特別常用节腐，它是個函數(shù)外盯，如果它存在的情況下，會執(zhí)行下面的語句：
enhancer(createStore)(reducer, preloadedState)
很顯然enhancer和middleware作用很像翼雀，用來增強(qiáng)store饱苟。
createStore內(nèi)部維護(hù)了currentReducer（當(dāng)前的reducer）和currentState（當(dāng)前的state），初始化的時候：
currentReducer ＝ reducer
currentState ＝ preloadedState
這兩個變量很重要狼渊，因為很多操作都和它們相關(guān)箱熬。
subscribe
在createStore內(nèi)部維護(hù)了兩個數(shù)組currentListeners、nextListeners囤锉。nextListeners的存在是為了避免在listeners執(zhí)行過程中坦弟，listeners發(fā)生改變，導(dǎo)致錯誤官地。listeners的添加或刪除都是對nextListeners進(jìn)行操作的酿傍。
nextListeners = currentListeners.slice()
保證nextListeners的修改不會影響currentListeners。
subscribe(listener)的返回值是個函數(shù)驱入，執(zhí)行這個函數(shù)就會unsubscribe(listener)赤炒，取消監(jiān)聽。
dispatch
很重要亏较，因為只能通過它修改state莺褒，它只接收一個參數(shù)action，action必須是簡單對象雪情，而且必須有type屬性遵岩。在dispatch內(nèi)部關(guān)鍵代碼是：
currentState = currentReducer(currentState, action)
var listeners = currentListeners = nextListeners
for (var i = 0; i < listeners.length; i++) {
listeners[i]()
}
第一行用來調(diào)用reducer，并將執(zhí)行的結(jié)果賦給currentState。這樣currentState中的數(shù)據(jù)就總是最新的尘执，即reducer處理完action之后返回的數(shù)據(jù)舍哄。沒有條件，執(zhí)行dispatch后reducer總會執(zhí)行誊锭。
后面3行代碼是用來調(diào)用subscribe傳進(jìn)來的listeners表悬，按順序執(zhí)行它們，沒有任何條件判斷丧靡，也就是說只要執(zhí)行dispatch蟆沫，所有的listeners都會執(zhí)行，不管state有沒有發(fā)生改變温治，而且listeners執(zhí)行的時候是沒參數(shù)的饭庞。
Redux內(nèi)部有個變量
ActionTypes = {
INIT: '@@redux/INIT'
}
在創(chuàng)建store（即調(diào)用createStore(reducer, preloadedState, enhancer)）的時候會執(zhí)行
dispatch({ type: ActionTypes.INIT })
所以reducer和listeners在store創(chuàng)建的時候都會被執(zhí)行一遍，listeners沒有什么特別要關(guān)注的罐盔。reducer執(zhí)行必須關(guān)注但绕，因為它的執(zhí)行結(jié)果影響你的數(shù)據(jù)。比如createStore的時候你沒有傳入preloadedState惶看，在reducer內(nèi)的state有默認(rèn)參數(shù)，正常情況下你的reducer會使用default分支處理這個action六孵，而且一般default分支會直接返回state纬黎，所以這種情況下store創(chuàng)建完后，使用getState()獲取的值就是默認(rèn)參數(shù)組成的state劫窒。
getState
獲取store中的state本今，很簡單，主要代碼：
return currentState
在沒有dispatch正在執(zhí)行的情況下主巍，直接返回前面說很重要的currentState冠息。
replaceReducer
參數(shù)是nextReducer,也很簡單，關(guān)鍵代碼：
currentReducer = nextReducer
dispatch({ type: ActionTypes.INIT })
直接拿nextReducer替換掉前面說很重要的currentReducer孕索，后面再執(zhí)行dispatch逛艰，action就會被nextReducer處理，處理的結(jié)果賦值給currentState搞旭。替換之后會執(zhí)行一遍初始化action散怖。
combineReducers
代碼雖然看起來很長，但是大多都是用來處理校驗reducer的肄渗。它接收的參數(shù)reducers是個對象镇眷，對象的value不能是undefined，必須是function翎嫡。符合這個標(biāo)準(zhǔn)的reducer會被放入finalReducers中欠动。
然后再對finalReducers進(jìn)行校驗，reducer必須有default處理惑申，不能處理Redux內(nèi)部的action type具伍，比如@@redux/INIT翅雏。然后返回一個函數(shù)combination(state = {}, action)，它也是一個reducer沿猜，可以被再次和其他reducer combine枚荣。一般combination等同于currentReducer，它的返回結(jié)果會賦給state啼肩，combination的關(guān)鍵代碼如下：
var finalReducerKeys = Object.keys(finalReducers)
var hasChanged = false
var nextState = {}
for (var i = 0; i < finalReducerKeys.length; i++) {
var key = finalReducerKeys[i]
var reducer = finalReducers[key]
var previousStateForKey = state[key]
var nextStateForKey = reducer(previousStateForKey, action)
nextState[key] = nextStateForKey
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
return hasChanged ? nextState : state
中間省略了reducer返回結(jié)果的校驗橄妆。reducer就是通過這種方式從state中拿到對應(yīng)的state，然后把返回的數(shù)據(jù)組裝到state的對應(yīng)位置祈坠，很巧妙害碾！
bindActionCreators
它接收兩個參數(shù)actionCreators和dispatch。如果actionCreators是函數(shù)赦拘，就直接返回：
(...args) => dispatch(actionCreator(...args))
直接給這個返回的函數(shù)傳actionCreator的參數(shù)就可以直接觸發(fā)dispatch慌随，這也是bindActionCreators的目的，簡化操作躺同，弱化dispatch的存在感阁猜。
如果actionCreators是個對象會進(jìn)行另外的操作，返回一個對象蹋艺，下面是關(guān)鍵代碼剃袍。
var keys = Object.keys(actionCreators)
var boundActionCreators = {}
for (var i = 0; i < keys.length; i++) {
var key = keys[i]
var actionCreator = actionCreators[key]
boundActionCreators[key] = (...args) => dispatch(actionCreator(...args))
}
return boundActionCreators
其實里面的處理和單個function的處理是一樣的。
applyMiddleware
一個可以被執(zhí)行三次的柯里化函數(shù)捎谨，代碼雖然簡單民效，但是給Redux帶來卻是無限可能。它的第一次執(zhí)行的時候參數(shù)是一系列的middlewares涛救，第二次執(zhí)行參數(shù)是createStore畏邢，返回的是一個和createStore接收同樣參數(shù)的函數(shù)，再次被執(zhí)行的話检吆，就會返回dispatch強(qiáng)化之后的store舒萎。關(guān)鍵代碼如下：
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
const last = chain[funcs.length - 1]
const rest = chain.slice(0, -1)
dispatch = rest.reduceRight((composed, f) => f(composed), last(store.dispatch))
這里只寫了多個middleware的情況，單個middlewares更簡單咧栗。代碼很簡單逆甜，邏輯也很簡單，作用很大致板。比如使用thunk可以做異步action交煞。
以上基本是Redux的全部關(guān)鍵代碼，簡單而強(qiáng)大斟或。
