React-Redux是用在連接React和Redux上的。如果你想同時用這兩個框架吃引，那么React-Redux基本就是必須的了筹陵。為了能夠更好的使用這個工具，今天就對它進(jìn)行一下源碼剖析镊尺。

Provider

一個React組件朦佩，一般你的rootApp要放倒這個組件內(nèi)部渲染。它很簡單庐氮，最關(guān)鍵的作用就是在context中放入Redux的store语稠，方便子組件獲取。關(guān)鍵代碼：

getChildContext() {
    return { store: this.store }
}

Provider.childContextTypes = {
   store: storeShape.isRequired
}

這樣connect的組件就可以獲取store弄砍，使用store的方法仙畦。

connect

首選connect是個可以執(zhí)行兩次的柯里化函數(shù)，第一次傳入的參數(shù)相當(dāng)于一系列的定制化東西输枯，第二次傳入的是你要連接的React組件议泵，然后返回一個新的React組件。
第一次執(zhí)行時傳入的參數(shù)是mapStateToProps, mapDispatchToProps, mergeProps, options這四個桃熄。首先會對這幾個參數(shù)進(jìn)行處理先口，代碼如下：

//決定組件會不會因state改變而更新
const shouldSubscribe = Boolean(mapStateToProps)
//如果不傳遞這個參數(shù)使用默認(rèn)state => ({})
const mapState = mapStateToProps || defaultMapStateToProps

//mapDispatchToProps的處理型奥，最后的情況實際是使用bindActionCreators處理
let mapDispatch
if (typeof mapDispatchToProps === 'function') {
    mapDispatch = mapDispatchToProps
} else if (!mapDispatchToProps) {
    mapDispatch = defaultMapDispatchToProps
} else {
    mapDispatch = wrapActionCreators(mapDispatchToProps)
}

//不傳遞就使用默認(rèn)值
const finalMergeProps = mergeProps || defaultMergeProps
const { pure = true, withRef = false } = options

第二次執(zhí)行函數(shù)接收的參數(shù)是個React組件：WrappedComponent，之后返回一個新的React組件Connect碉京。

return hoistStatics(Connect, WrappedComponent)

把WrappedComponent的非React屬性拷貝到Connect上厢汹。下面詳細(xì)說下Connect。
Connect

一個React組件

Connect.contextTypes = {
    store: storeShape
}

所以它可以從context中獲取Provider放的store谐宙。

constructor

在constructor中：

//獲取store
this.store = props.store || context.store
const storeState = this.store.getState()
//把store的state作為組件的state烫葬，后面通過更新state更新組件
this.state = { storeState }
//清除組件的狀態(tài)，內(nèi)部是一系列的標(biāo)示還原
this.clearCache()

render

然后是render方法凡蜻，在掛載的時候搭综，會經(jīng)過一系列的判斷和計算，比如使用mapState計算nextStateProps划栓，并和this.stateProps對比是否發(fā)生改變兑巾，如果發(fā)生改變：

nextDispatchProps ＝ mapState(store.getState(), [props])
this.stateProps = nextDispatchProps

使用mapDispatch計算nextDispatchProps，并和this.dispatchProps對比是否發(fā)生改變忠荞，如果發(fā)生改變：

nextMergedProps ＝ mapDispatch(dispatch, [props])
this.dispatchProps = nextMergedProps

如果上面的兩個對比有一個發(fā)生改變蒋歌，就會繼續(xù)使用finalMergeProps來計算最終的數(shù)據(jù)合并結(jié)果nextMergedProps，并和this.mergedProps對比是否發(fā)生改變委煤，如果發(fā)生改變：

nextMergedProps ＝ finalMergeProps(this.stateProps, this.dispatchProps, this.props)
this.mergedProps ＝ nextMergedProps

如果上面的對比確定發(fā)生改變

if (withRef) {
  this.renderedElement = createElement(WrappedComponent, {
      ...this.mergedProps,
      ref: 'wrappedInstance'
  })
} else {
  this.renderedElement = createElement(WrappedComponent,
      this.mergedProps
  )
}
return this.renderedElement

如果withRef等于true就會增加ref屬性堂油，然后可以通過getWrappedInstance方法獲取DOM。如果前面說的這些對比的結(jié)果都是false碧绞，就會直接返回this.renderedElement府框，組件不進(jìn)行任何更新。當(dāng)然組件掛載的時候前面的對比都會返回true头遭。

componentDidMount

它內(nèi)部的關(guān)鍵代碼是：

if (shouldSubscribe && !this.unsubscribe) {
    this.unsubscribe = this.store.subscribe(this.handleChange.bind(this))
    this.handleChange()
}

在不指定mapStateToProps的時候shouldSubscribe等于false寓免，這就意味著React-Redux的源碼剖析到此結(jié)束癣诱，謝謝觀看计维！當(dāng)然如果指定了mapStateToProps剖析就還得繼續(xù)∷河瑁看到代碼沒有鲫惶，竟然使用subscribe，意味著只要執(zhí)行dispatch实抡，handleChange就會執(zhí)行欠母。至此組件已經(jīng)掛載完畢，后面的代碼執(zhí)行需要有外界因素了吆寨，比如父組件傳遞新的props赏淌、執(zhí)行dispatch。

componentWillReceiveProps

組件還實現(xiàn)了componentWillReceiveProps這個React生命周期中的方法：

componentWillReceiveProps(nextProps) {
    if (!pure || !shallowEqual(nextProps, this.props)) {
        this.haveOwnPropsChanged = true
    }
}

看到pure的重要性了吧啄清，如果pure被設(shè)置為false就意味著不管屬性是否淺相等this.haveOwnPropsChanged總是會被設(shè)置為true六水，而這會導(dǎo)致后面一系列的為了更新而進(jìn)行的計算，所以pure為true是可以給你的性能帶來幫助的，不過它默認(rèn)就是true掷贾。這里設(shè)置this.haveOwnPropsChanged等于true是給通過直接通過父組件傳遞props更新組件帶來可能睛榄，當(dāng)然需要配合mapStateToProps, mapDispatchToProps, mergeProps這三個函數(shù)，如果它們都沒有利用ownProps想帅，最終組件還是不能通過這種方式更新场靴。

handleChange

下面假定觸發(fā)了一次dispatch，這個時候handleChange就會執(zhí)行港准，如果state沒有發(fā)生改變旨剥，并且pure為true，就什么都不做直接返回浅缸，pure又在性能上立功了泞边。如果state發(fā)生了改變會再做一些計算對比，比如計算this.stateProps疗杉。最后是在要更新的時候會：

this.hasStoreStateChanged = true
this.setState({ storeState })

調(diào)用setState來觸發(fā)組件更新阵谚。這里其實意味著只要store的state發(fā)生改變，所有的mapStateToProps烟具、 mapDispatchToProps梢什、mergeProps都會執(zhí)行。

shouldComponentUpdate

這個時候會調(diào)用它內(nèi)部實現(xiàn)的shouldComponentUpdate朝聋，用來提高性能嗡午。

shouldComponentUpdate() {
    return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged
}

但是怎么感覺這個并沒有什么用呢？可能是我理解不深冀痕，因為無論是父組件更新props還是state改變這里總是返回true荔睹，而不管改變的是不是這個組件關(guān)心的數(shù)據(jù)。沒辦法又進(jìn)入了render方法言蛇。

好了僻他，源碼剖析到此結(jié)束，謝謝觀看腊尚！