正式學習React(五) react-redux源碼分析

磨刀不誤砍柴工，咱先把react-redux里的工具函數分析一下：

源碼點這里

 shallowEqual.js

export default function shallowEqual(objA, objB) {
  if (objA === objB) {
    return true
  }

  const keysA = Object.keys(objA)
  const keysB = Object.keys(objB)

  if (keysA.length !== keysB.length) {
    return false
  }

  // Test for A's keys different from B.
  const hasOwn = Object.prototype.hasOwnProperty
  for (let i = 0; i < keysA.length; i++) {
    if (!hasOwn.call(objB, keysA[i]) ||
        objA[keysA[i]] !== objB[keysA[i]]) {
      return false
    }
  }

  return true
}

這個幾個api全都超級簡單，我就不仔細講解了，顧名思義，簡單比較一下兩個obj是否相等。 

storeShape.js

import { PropTypes } from 'react'

export default PropTypes.shape({
  subscribe: PropTypes.func.isRequired,
  dispatch: PropTypes.func.isRequired,
  getState: PropTypes.func.isRequired
})

顧名思義，強制性規定subscribe,dispacth,getState必須是func.

warning.js

/**
 * Prints a warning in the console if it exists.
 *
 * @param {String} message The warning message.
 * @returns {void}
 */
export default function warning(message) {
  /* eslint-disable no-console */
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    console.error(message)
  }
  /* eslint-enable no-console */
  try {
    // This error was thrown as a convenience so that if you enable
    // "break on all exceptions" in your console,
    // it would pause the execution at this line.
    throw new Error(message)
    /* eslint-disable no-empty */
  } catch (e) {}
  /* eslint-enable no-empty */
}

就是用console.error 打印一下錯誤。

wrapActionCreators.js

import { bindActionCreators } from 'redux'

export default function wrapActionCreators(actionCreators) {
  return dispatch => bindActionCreators(actionCreators, dispatch)
}

上一篇講過 bindActionCreators

它返回的這個對象直接是以 我們定義單個actionCreator為key的，actionCreator函數為value的包裝，並在actionCreator里掛着了dispacth的函數。使用的時候，直接調用同名key函數，就直接分發action了，不需要

我們手動的 dispacth(actionCreator(內容))， 直接key(內容) 就行了。

 

------------------------------------------------------工具全部介紹完畢-----是不是so easy??!!!------------------------------

 現在主角登場：

Provider.js

 

import { Component, PropTypes, Children } from 'react'
import storeShape from '../utils/storeShape'
import warning from '../utils/warning'

let didWarnAboutReceivingStore = false
function warnAboutReceivingStore() {
  if (didWarnAboutReceivingStore) {
    return
  }
  didWarnAboutReceivingStore = true

  warning(
    '<Provider> does not support changing `store` on the fly. ' +
    'It is most likely that you see this error because you updated to ' +
    'Redux 2.x and React Redux 2.x which no longer hot reload reducers ' +
    'automatically. See https://github.com/reactjs/react-redux/releases/' +
    'tag/v2.0.0 for the migration instructions.'
  )
}

export default class Provider extends Component {

     //關鍵部分，將this.store加到了context里，這里，子組件就可以通過context直接拿到store，不需要一級一級props傳遞下去。 22   getChildContext() {
    return { store: this.store }
  }

  constructor(props, context) {
    super(props, context)
    this.store = props.store
  }

  render() {
    return Children.only(this.props.children)
  }
}

if (process.env.NODE_ENV !== 'production') {
  Provider.prototype.componentWillReceiveProps = function (nextProps) {
    const { store } = this
    const { store: nextStore } = nextProps

    if (store !== nextStore) {
      warnAboutReceivingStore()
    }
  }
}

Provider.propTypes = {
   //要求我們的 store對象里面的3個必須是func 48   store: storeShape.isRequired,
    
    //要求我們形如這種格式的 <Provider store={store}> <App/> </Provider> ，<App>必須是react的element，其實它還要求了只能是放單element的，這也是render這個本身限定的！！可以看上面的Children.Only() 49   children: PropTypes.element.isRequired
}
   // 這個是和getChildContext一樣，必須加的。

 //訪問context 的屬性是需要通過 contextTypes 指定可訪問的 元素一樣。getChildContext 指定的傳遞給子組件的屬性需要先通過 childContextTypes 來指定，不然會產生錯誤。
 51 Provider.childContextTypes = {
  store: storeShape.isRequired
}

 

 關於context的用法，我在github上寫了一個小demo。大家可以clone下來跑一跑，在我的代碼基礎上可以添加一下狀態函數，看看react的狀態生命周期的流程。點這里

 

對於上面的代碼總結一下，Provider這個React 組件就是為了將Store掛在到Context中，然后我們寫的真正的app里就可以獲得store了。

 connect.js

分析之前，我們心中要有這麽一個概念:

<Provider store={store}>
  <App />
</Provider>,

Provider的作用就是將 store掛在到 context上 提供App使用。


重點在這個 App上。

-----------------------------------------------------------------------------------------------------
這個App不是普通的element。它經過connect包裝過，

connect(select)(App)

好了，可以開始分析了，我們將知道connect是啥，select是干嘛的？

------------------------------------------------------------------------------------------------

 

import { Component, createElement } from 'react'
import storeShape from '../utils/storeShape'
import shallowEqual from '../utils/shallowEqual'
import wrapActionCreators from '../utils/wrapActionCreators'
import warning from '../utils/warning'
import isPlainObject from 'lodash/isPlainObject'
import hoistStatics from 'hoist-non-react-statics'
import invariant from 'invariant'

    
     //一直到return 我都認為是廢話，函數名字都是顧名思義的。。直接忽略。。。。
const defaultMapStateToProps = state => ({}) // eslint-disable-line no-unused-vars
const defaultMapDispatchToProps = dispatch => ({ dispatch })
const defaultMergeProps = (stateProps, dispatchProps, parentProps) => ({
  ...parentProps,
  ...stateProps,
  ...dispatchProps
})

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

let errorObject = { value: null }
function tryCatch(fn, ctx) {
  try {
    return fn.apply(ctx)
  } catch (e) {
    errorObject.value = e
    return errorObject
  }
}


    // 重點開始了。。。。。。
// Helps track hot reloading.
let nextVersion = 0

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
     
    //這里是否應該被訂閱？嗯哼，回想一下store里的 subcribe，每次被dispacth 的時候就會執行！！！，這里估計就是給一個標志，
 //如果傳了mapStateToProps,必然是true，反之是false;  36   const shouldSubscribe = Boolean(mapStateToProps)
   
  const mapState = mapStateToProps || defaultMapStateToProps

  let mapDispatch
  if (typeof mapDispatchToProps === 'function') {
    mapDispatch = mapDispatchToProps
  } else if (!mapDispatchToProps) {
    mapDispatch = defaultMapDispatchToProps
  } else {
    mapDispatch = wrapActionCreators(mapDispatchToProps)
  }

  const finalMergeProps = mergeProps || defaultMergeProps
  const { pure = true, withRef = false } = options
  const checkMergedEquals = pure && finalMergeProps !== defaultMergeProps

  // Helps track hot reloading.
  const version = nextVersion++

  return function wrapWithConnect(WrappedComponent) {
              
               // 如果沒有為app添加disPlayName 或者 name 返回 "Conponent"  56     const connectDisplayName = `Connect(${getDisplayName(WrappedComponent)})`

    function checkStateShape(props, methodName) {
      if (!isPlainObject(props)) {
        warning(
          `${methodName}() in ${connectDisplayName} must return a plain object. ` +
          `Instead received ${props}.`
        )
      }
    }

    function computeMergedProps(stateProps, dispatchProps, parentProps) {
      const mergedProps = finalMergeProps(stateProps, dispatchProps, parentProps)
      if (process.env.NODE_ENV !== 'production') {
        checkStateShape(mergedProps, 'mergeProps')
      }
      return mergedProps
    }

    class Connect extends Component {
      shouldComponentUpdate() {
        return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged
      }

      constructor(props, context) {
        super(props, context)
        this.version = version
        this.store = props.store || context.store

        invariant(this.store,
          `Could not find "store" in either the context or ` +
          `props of "${connectDisplayName}". ` +
          `Either wrap the root component in a <Provider>, ` +
          `or explicitly pass "store" as a prop to "${connectDisplayName}".`
        )

        const storeState = this.store.getState()
        this.state = { storeState }
        this.clearCache()
      }

      computeStateProps(store, props) {
        if (!this.finalMapStateToProps) {
          return this.configureFinalMapState(store, props)
        }

        const state = store.getState()
        const stateProps = this.doStatePropsDependOnOwnProps ?
          this.finalMapStateToProps(state, props) :
          this.finalMapStateToProps(state)

        if (process.env.NODE_ENV !== 'production') {
          checkStateShape(stateProps, 'mapStateToProps')
        }
        return stateProps
      }

      configureFinalMapState(store, props) {
        const mappedState = mapState(store.getState(), props)
        const isFactory = typeof mappedState === 'function'

        this.finalMapStateToProps = isFactory ? mappedState : mapState
        this.doStatePropsDependOnOwnProps = this.finalMapStateToProps.length !== 1

        if (isFactory) {
          return this.computeStateProps(store, props)
        }

        if (process.env.NODE_ENV !== 'production') {
          checkStateShape(mappedState, 'mapStateToProps')
        }
        return mappedState
      }

      computeDispatchProps(store, props) {
        if (!this.finalMapDispatchToProps) {
          return this.configureFinalMapDispatch(store, props)
        }

        const { dispatch } = store
        const dispatchProps = this.doDispatchPropsDependOnOwnProps ?
          this.finalMapDispatchToProps(dispatch, props) :
          this.finalMapDispatchToProps(dispatch)

        if (process.env.NODE_ENV !== 'production') {
          checkStateShape(dispatchProps, 'mapDispatchToProps')
        }
        return dispatchProps
      }

      configureFinalMapDispatch(store, props) {
        const mappedDispatch = mapDispatch(store.dispatch, props)
        const isFactory = typeof mappedDispatch === 'function'

        this.finalMapDispatchToProps = isFactory ? mappedDispatch : mapDispatch
        this.doDispatchPropsDependOnOwnProps = this.finalMapDispatchToProps.length !== 1

        if (isFactory) {
          return this.computeDispatchProps(store, props)
        }

        if (process.env.NODE_ENV !== 'production') {
          checkStateShape(mappedDispatch, 'mapDispatchToProps')
        }
        return mappedDispatch
      }

      updateStatePropsIfNeeded() {
        const nextStateProps = this.computeStateProps(this.store, this.props)
        if (this.stateProps && shallowEqual(nextStateProps, this.stateProps)) {
          return false
        }

        this.stateProps = nextStateProps
        return true
      }

      updateDispatchPropsIfNeeded() {
        const nextDispatchProps = this.computeDispatchProps(this.store, this.props)
        if (this.dispatchProps && shallowEqual(nextDispatchProps, this.dispatchProps)) {
          return false
        }

        this.dispatchProps = nextDispatchProps
        return true
      }

      updateMergedPropsIfNeeded() {
        const nextMergedProps = computeMergedProps(this.stateProps, this.dispatchProps, this.props)
        if (this.mergedProps && checkMergedEquals && shallowEqual(nextMergedProps, this.mergedProps)) {
          return false
        }

        this.mergedProps = nextMergedProps
        return true
      }

      isSubscribed() {
        return typeof this.unsubscribe === 'function'
      }

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

      tryUnsubscribe() {
        if (this.unsubscribe) {
          this.unsubscribe()
          this.unsubscribe = null
        }
      }

      componentDidMount() {
        this.trySubscribe()
      }

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

      componentWillUnmount() {
        this.tryUnsubscribe()
        this.clearCache()
      }

      clearCache() {
        this.dispatchProps = null
        this.stateProps = null
        this.mergedProps = null
        this.haveOwnPropsChanged = true
        this.hasStoreStateChanged = true
        this.haveStatePropsBeenPrecalculated = false
        this.statePropsPrecalculationError = null
        this.renderedElement = null
        this.finalMapDispatchToProps = null
        this.finalMapStateToProps = null
      }

      handleChange() {
        if (!this.unsubscribe) {
          return
        }

        const storeState = this.store.getState()
        const prevStoreState = this.state.storeState
        if (pure && prevStoreState === storeState) {
          return
        }

        if (pure && !this.doStatePropsDependOnOwnProps) {
          const haveStatePropsChanged = tryCatch(this.updateStatePropsIfNeeded, this)
          if (!haveStatePropsChanged) {
            return
          }
          if (haveStatePropsChanged === errorObject) {
            this.statePropsPrecalculationError = errorObject.value
          }
          this.haveStatePropsBeenPrecalculated = true
        }

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

      getWrappedInstance() {
        invariant(withRef,
          `To access the wrapped instance, you need to specify ` +
          `{ withRef: true } as the fourth argument of the connect() call.`
        )

        return this.refs.wrappedInstance
      }

      render() {
        const {
          haveOwnPropsChanged,
          hasStoreStateChanged,
          haveStatePropsBeenPrecalculated,
          statePropsPrecalculationError,
          renderedElement
        } = this

        this.haveOwnPropsChanged = false
        this.hasStoreStateChanged = false
        this.haveStatePropsBeenPrecalculated = false
        this.statePropsPrecalculationError = null

        if (statePropsPrecalculationError) {
          throw statePropsPrecalculationError
        }

        let shouldUpdateStateProps = true
        let shouldUpdateDispatchProps = true
        if (pure && renderedElement) {
          shouldUpdateStateProps = hasStoreStateChanged || (
            haveOwnPropsChanged && this.doStatePropsDependOnOwnProps
          )
          shouldUpdateDispatchProps =
            haveOwnPropsChanged && this.doDispatchPropsDependOnOwnProps
        }

        let haveStatePropsChanged = false
        let haveDispatchPropsChanged = false
        if (haveStatePropsBeenPrecalculated) {
          haveStatePropsChanged = true
        } else if (shouldUpdateStateProps) {
          haveStatePropsChanged = this.updateStatePropsIfNeeded()
        }
        if (shouldUpdateDispatchProps) {
          haveDispatchPropsChanged = this.updateDispatchPropsIfNeeded()
        }

        let haveMergedPropsChanged = true
        if (
          haveStatePropsChanged ||
          haveDispatchPropsChanged ||
          haveOwnPropsChanged
        ) {
          haveMergedPropsChanged = this.updateMergedPropsIfNeeded()
        } else {
          haveMergedPropsChanged = false
        }

        if (!haveMergedPropsChanged && renderedElement) {
          return renderedElement
        }

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

        return this.renderedElement
      }
    }

    Connect.displayName = connectDisplayName
    Connect.WrappedComponent = WrappedComponent
    Connect.contextTypes = {
      store: storeShape
    }
    Connect.propTypes = {
      store: storeShape
    }

    if (process.env.NODE_ENV !== 'production') {
      Connect.prototype.componentWillUpdate = function componentWillUpdate() {
        if (this.version === version) {
          return
        }

        // We are hot reloading!
        this.version = version
        this.trySubscribe()
        this.clearCache()
      }
    }

    return hoistStatics(Connect, WrappedComponent)
  }
}

媽蛋！！！這次有點長，不過不要慌！抓主干！為了更容易理解，我打算從React的生命周期函數的執行順序講解！！相信看到我這篇文章的時候，你已經對React有一定的了解，如果還不清楚

React的生命周期函數的執行順序，看我的正式學習React(三) 和 正式學習React(三)番外篇！或者去官網，或者去谷歌吧。默認我就當大家都知道了！！

 

1：首先我們要知道connect函數返回的是一個包裝類的func，為什么叫它包裝類的func,因為它對我們App組件進一步封裝，你可以看到的：

<Provider store={store}>

       <App/>

</Porvider>

其實是：

<Provider store={store}>

    <connect>

         <App/>

    </connect>

</Porvider>

 

2:connect方法聲明如下：

connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

作用：連接 React 組件與 Redux store。

連接操作不會改變原來的組件類，反而返回一個新的已與 Redux store 連接的組件類。 【就是我第一點說明的，加了個connect組件，將store和app關聯了起來，其實是和connect關聯了起來！】

 

參數

[mapStateToProps(state, [ownProps]): stateProps] (Function): 如果定義該參數，組件將會監聽 Redux store 的變化。任何時候，只要 Redux store 發生改變，mapStateToProps 函數就會被調用。該回調函數必須返回一個純對象，這個對象會與組件的 props 合並。如果你省略了這個參數，你的組件將不會監聽 Redux store。如果指定了該回調函數中的第二個參數 ownProps，則該參數的值為傳遞到組件的 props，而且只要組件接收到新的 props，mapStateToProps 也會被調用。

-----------------------------------------------------------------------------------------------------------------------------

我簡單補充一下：為什么組件會監聽 Redux store的變化？flux的設計理念就是 dispatch ----》reducer--------》setState。 這個函數是將當前的state映射到props上去.

要想更新視圖，使組件渲染成DOM都是最新state和props。必須調用setState,那為什么會調用setState，必然是調用了dispatch，那我們在前面的文章里提過，dispacth的時候，會得到最新 state，並且會

調用subscribe里所有的監聽函數。那我們的setState就在這些監聽函數里調用！！！

 

一會你就會看到 componentDidMount()里調用了subcribe(handlechange)  handlechange里最終會調用mapStateToProps，最后 this.setState({ storeState })

-----------------------------------------------------------------------------------------------------------------------------------

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 如果傳遞的是一個對象，那么每個定義在該對象的函數都將被當作 Redux action creator，而且這個對象會與 Redux store 綁定在一起，其中所定義的方法名將作為屬性名，合並到組件的 props 中。如果傳遞的是一個函數，該函數將接收一個 dispatch 函數，然后由你來決定如何返回一個對象，這個對象通過 dispatch 函數與 action creator 以某種方式綁定在一起（提示：你也許會用到 Redux 的輔助函數 bindActionCreators()）。如果你省略這個 mapDispatchToProps 參數，默認情況下，dispatch 會注入到你的組件 props 中。如果指定了該回調函數中第二個參數 ownProps，該參數的值為傳遞到組件的 props，而且只要組件接收到新 props，mapDispatchToProps 也會被調用。

 

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 如果指定了這個參數，mapStateToProps() 與 mapDispatchToProps() 的執行結果和組件自身的 props 將傳入到這個回調函數中。該回調函數返回的對象將作為 props 傳遞到被包裝的組件中。你也許可以用這個回調函數，根據組件的 props 來篩選部分的 state 數據，或者把 props 中的某個特定變量與 action creator 綁定在一起。如果你省略這個參數，默認情況下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的結果。

 

[options] (Object) 如果指定這個參數，可以定制 connector 的行為。

[pure = true] (Boolean): 如果為 true，connector 將執行 shouldComponentUpdate 並且淺對比 mergeProps 的結果，避免不必要的更新，前提是當前組件是一個“純”組件，它不依賴於任何的輸入或 state 而只依賴於 props 和 Redux store 的 state。默認值為 true。

[withRef = false] (Boolean): 如果為 true，connector 會保存一個對被包裝組件實例的引用，該引用通過 getWrappedInstance() 方法獲得。默認值為 false

 

------------------------------------------------------------------------------------------------------------------------

3: wrapWithConnect(WrappedComponent){}【主干來了！！！】

return hoistStatics(Connect, WrappedComponent)；

hoistStatics不懂沒關系，下一篇文章我會講解。你現在就當它返回Connect，這個Connect是擁有一些WrappedComponent的props的。

這個函數體里我們關心的就是class connect了。

下面我將以生命周期函數的執行順序講解 connect!!!!

 

   1:首先我們先去它的constructor里看一看：

   

            constructor(props, context) {
                super(props, context)
                this.version = version

                //來了！來了！ context.store也加到了Connect里啦！！這樣就保證了Provider和connect里公用了一個store!
                this.store = props.store || context.store
                //這個函數的代碼直接忽略好了
                invariant(this.store,
                    `Could not find "store" in either the context or ` +
                    `props of "${connectDisplayName}". ` +
                    `Either wrap the root component in a <Provider>, ` +
                    `or explicitly pass "store" as a prop to "${connectDisplayName}".`
                )

                //獲取當前state
                const storeState = this.store.getState()

                //注意看  this.state，可想而知，之后會在某個地方調用setState 更新視圖。整個React-redux項目，將會在connect這里發起更新視圖的發起點，因為這里的才有state,子組件我們都是通過props傳下去的
                this.state = { storeState }
                this.clearCache()   //這里初始化一些connect的實例屬性。里面的具體屬性自己看源碼，他們的用途，在接下來的用到的時候再講 21             }

看完構造函數，我們就最大的收獲就是store成為了connect實例的一個屬性！並在這里加了state屬性！然后初始化了一些屬性。。。。。

 

  2：render(){}  這個函數我會講兩次，一次是我們第一次初始化的時候執行，另外就是在Mounted下，我們先看第一次，具體過程大家自己看注釋，一步一步走：

 render() {
                //這里我們一開始調用了clearCache 給 connect添加了這些屬性，並賦予了初始值。
                //這里單獨用變量取出來用作下面的操作！
                const {
                    haveOwnPropsChanged,  //true
                    hasStoreStateChanged, //true
                    haveStatePropsBeenPrecalculated, //false
                    statePropsPrecalculationError, //null
                    renderedElement  // null
                    } = this

                //這里給屬性還原
                this.haveOwnPropsChanged = false
                this.hasStoreStateChanged = false
                this.haveStatePropsBeenPrecalculated = false
                this.statePropsPrecalculationError = null


                //第一次會跳過。因為statePropsPrecalculationError == null
                if (statePropsPrecalculationError) {
                    throw statePropsPrecalculationError
                }

                //這里都執行render來更新視圖了，也很好理解這2個變量。
                //肯定是認為應該更新state和proos了
                //也要把props分發給子組件了
                let shouldUpdateStateProps = true
                let shouldUpdateDispatchProps = true

                //第一次明顯跳過 ，因為renderedElement == null
                if (pure && renderedElement) {
                    shouldUpdateStateProps = hasStoreStateChanged || (
                            haveOwnPropsChanged && this.doStatePropsDependOnOwnProps
                        )
                    shouldUpdateDispatchProps =
                        haveOwnPropsChanged && this.doDispatchPropsDependOnOwnProps
                }



                let haveStatePropsChanged = false
                let haveDispatchPropsChanged = false

                if (haveStatePropsBeenPrecalculated) {
                    haveStatePropsChanged = true
                } else if (shouldUpdateStateProps) {

                    //這里厲害了！因為我們要開始調用我們connect的第一個參數了！
                    haveStatePropsChanged = this.updateStatePropsIfNeeded()
                }
                // 第一遍shouldUpdateDispatchProps總是true,haveDispatchPropsChanged總是ture。
                if (shouldUpdateDispatchProps) {

                    haveDispatchPropsChanged = this.updateDispatchPropsIfNeeded()
                }

                let haveMergedPropsChanged = true

                // 第一遍
                if (
                    haveStatePropsChanged ||
                    haveDispatchPropsChanged ||
                    haveOwnPropsChanged
                ) {
                    haveMergedPropsChanged = this.updateMergedPropsIfNeeded()
                } else {
                    haveMergedPropsChanged = false
                }
               
                
                //沒變化就返回之前的組件。
                if (!haveMergedPropsChanged && renderedElement) {
                    return renderedElement
                }
               
                
                //不然就將mergedProps 當新的props給App
                if (withRef) {
                    this.renderedElement = createElement(WrappedComponent, {
                        ...this.mergedProps,
                        ref: 'wrappedInstance'
                    })
                } else {
                    
                    this.renderedElement = createElement(WrappedComponent,
                        this.mergedProps
                    )
                }

                return this.renderedElement
            }

 

3：componentDidMount(){} 

render完成之后就到了這一步。這是生命函數的固定順序！

里面很簡單，就是調用了trySubscribe(){}

trySubscribe這個函數我有必要講一下：

    trySubscribe() {
                // shouldSubscribe 是干嘛的？？我們先不管它，假設條件成立！
                if (shouldSubscribe && !this.unsubscribe) {

                    //開始訂閱函數啦！ 這是關鍵呀，以后我們更新視圖全在handleChange里進行
                    this.unsubscribe = this.store.subscribe(this.handleChange.bind(this))

                    this.handleChange()
                }
            }


            //如果state或者props發生改變，就調用setState。
            handleChange() {
                if (!this.unsubscribe) {
                    return
                }

                const storeState = this.store.getState()
                const prevStoreState = this.state.storeState



                if (pure && prevStoreState === storeState) {
                    return
                }

                if (pure && !this.doStatePropsDependOnOwnProps) {
                    const haveStatePropsChanged = tryCatch(this.updateStatePropsIfNeeded, this)
                    if (!haveStatePropsChanged) {
                        return
                    }
                    if (haveStatePropsChanged === errorObject) {
                        this.statePropsPrecalculationError = errorObject.value
                    }
                    this.haveStatePropsBeenPrecalculated = true
                }

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

  // shouldSubscribe 為false，直接第一次渲染后不再更新視圖了
  
  //   const shouldSubscribe = Boolean(mapStateToProps)
 // mapStateToProps的重要性也凸顯出來了！！！

 

4：如果上面的setState被調用，就到了

shouldComponentUpdate() {

//不純的默認更新

// this.haveOwnPropsChanged == true  發生在第一次構造connect 的時候，還有就是props被修改的時候。

//
    return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged
}

出場了。。。。。。然后看不是要繼續render()

5:componentWillReceiveProps(nextProps){}  當調用了dispath的時候，就會觸發setState,然后就可能會觸發這個。。。。

6:componentWillUnmount(){}   這個把剛才訂閱取消。

 

總的來說。我們要更加關注render里做的事情，還有trySubscribe里的handle! 第一次流程走通之后，以后每次dispatch，我們就都會執行handle，只有執行了handle才會有后面的生命周期函數執行。


react-redux就是將react和redux結合在一起。 react負責UI， redux負責業務邏輯，

下面給幾個圖，大家結合着看吧：

• 百度腦圖
• 流程圖

最后補充一下 connect 參數的實例：

down vote accepted

function mapStateToProps(state) { return { user: state.app.user }; } function mapDispatchToProps(dispatch) { return { actions: bindActionCreators(LoginActions, dispatch), routerActions: bindActionCreators({pushState}, dispatch) } } export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);