正式学习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传递下去。
   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
   store: storeShape.isRequired,

    //要求我们形如这种格式的 <Provider store={store}> <App/> </Provider> ，<App>必须是react的element，其实它还要求了只能是放单element的，这也是render这个本身限定的！！可以看上面的Children.Only()
   children: PropTypes.element.isRequired
 }
    // 这个是和getChildContext一样，必须加的。

   //访问context 的属性是需要通过 contextTypes 指定可访问的 元素一样。getChildContext 指定的传递给子组件的属性需要先通过 childContextTypes 来指定，不然会产生错误。
 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;
   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"
     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的实例属性。里面的具体属性自己看源码，他们的用途，在接下来的用到的时候再讲
             }

看完构造函数，我们就最大的收获就是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 voteaccepted

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);