react-redux connect源码解读

今天看了下react-redux的源码，主要来看下connect的方法

首先找到connect的入口文件。在src/index.js下找到。对应connect文件夹下的connect.js文件。

大致说下源码connect流程
connect.js对外暴露是通过export default createConnect(), 我们来看createConnect方法。
在这里，他是在对外暴露的时候直接运行，导致对外导出的结果就是他返回的一个connect方法.
然后再connect里他是返回了一个函数的结果。这个就对应到createHoc
所对应的connectAdvanced部分,然后再返回处理过的我们的容器组件.
具体细节
看下面部分的源码:

export function createConnect({
  connectHOC = connectAdvanced,
  mapStateToPropsFactories = defaultMapStateToPropsFactories,
  mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
  mergePropsFactories = defaultMergePropsFactories,
  selectorFactory = defaultSelectorFactory
} = {}) {
  return function connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps,
    {
      pure = true,
      areStatesEqual = strictEqual,
      areOwnPropsEqual = shallowEqual,
      areStatePropsEqual = shallowEqual,
      areMergedPropsEqual = shallowEqual,
      ...extraOptions
    } = {}
  ) {
    const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps')
    const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps')
    const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')

    return connectHOC(selectorFactory, {
      // used in error messages
      methodName: 'connect',

       // used to compute Connect's displayName from the wrapped component's displayName.
      getDisplayName: name => `Connect(${name})`,

      // if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
      shouldHandleStateChanges: Boolean(mapStateToProps),

      // passed through to selectorFactory
      initMapStateToProps,
      initMapDispatchToProps,
      initMergeProps,
      pure,
      areStatesEqual,
      areOwnPropsEqual,
      areStatePropsEqual,
      areMergedPropsEqual,

      // any extra options args can override defaults of connect or connectAdvanced
      ...extraOptions
    })
  }
}

我们知道，在容器组件平时对外暴露的时候是

const mapStateToProps = (state, ownProps) => ({
//  ...
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(Object.assign({}, actions), dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(YourComponent)

我们可以看到基本都是都是传递两个参数，mapStateToProps&mapDispatchToProps, 第三个参数mergeProps并没有传递，这个参数是干什么的?
他在

const initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps')

这里初始化mergeProps,通过mergePropsFactories来处理里返回的两个函数来处理。
对应了两个函数对应了mergeProps的两种情况:

whenMergePropsIsFunction存在mergeProps并且是function的时候，会进行处理并返回一个函数，
这个函数的第一个参数是一个dispatch,第二个参数是一个对象，并且对象接收三个属性,如果不是一个方法，那就返回undefined.
whenMergePropsIsOmitted方法会判断mergeProps是不是存在，如果存在就返回undefined,否则就会返回一个默认的mergeProps

mapStateToProps&mapDispatchToProps和mergeProps的初始化类似，都会进行判断再去操作。

然后connect后面的第四个参数是一个对象，他接收一些属性。

然后就是下一步了，在使用的时候，我们connect()之后就是继续调用,传参是我们的容器组件。那这时，在源码里就是对应的return connectHOC(selectorFactory, {...}),
这个返回的是一个函数运行的结果，所以我们传参的容器组件这个参数，并不是这里的selectorFactory,而是他运行完成之后的结果所接受的参数。

上面有提到createHOC对应的是connectAdvanced.然后可以看到createHOC传参的第一个是selectorFactory,
就是对应的defaultSelectorFactory,然后第二个参数是一些对象。

接下来我们就可以看看对应createHOC的connectAdvanced方法了。

首先看connectAdvanced在参数方面，第一个保持不变，第二个进行了扩展，添加了几个属性。
我们还是从对外暴露的接口来看，他直接暴露的是connectAdvanced方法。因为我们在createHOC所需要的是一个结果，
所以我们通过源码看看他是怎么运行的.

在这个方法里，有返回一个方法wrapWithConnect(WrappedComponent){},好家伙，到这里我们可以知道connect里的return createHOC(...)的结果返回
的就是这个，然后再看返回的这个函数名称,很见名知意用connect包裹的函数的参数是包裹的组件.那就看看这个函数里面是啥。

一些基本的处理，然后就是一个connect基于React.Component的继承，最后是返回return hoistStatics(Connect, WrappedComponent),
这个hoistStatics是一个类似Object.assign的copy非react的static property.
换句话说，就是把传递的容器组件自定义的静态属性附加到connect组件上去。

我们再看看这个connect class, 他在构造函数里直接运行了this.initSelector()和this.initSubscription()我们先看下initSelector，
发现就是使用的selectorFactory方法来处理的，
我们就看看这个方法是怎么处理的。对外暴露的方法在这里,
他会根据pure属性来确定到底该如何处理。其实我们从这一段注释就可以知道了:

// If pure is true, the selector returned by selectorFactory will memoize its results,
// allowing connectAdvanced's shouldComponentUpdate to return false if final
// props have not changed. If false, the selector will always return a new
// object and shouldComponentUpdate will always return true.

就是去处理到底是否应该重新渲染，所有如果你想要刷新的情况，可以在connect的传参的第四个对象里改变pure为false.

然后initSelector同时也会为当前对象创建一个selector：

function makeSelectorStateful(sourceSelector, store) {
  // wrap the selector in an object that tracks its results between runs.
  const selector = {
    run: function runComponentSelector(props) {
      try {
        const nextProps = sourceSelector(store.getState(), props)
        if (nextProps !== selector.props || selector.error) {
          selector.shouldComponentUpdate = true
          selector.props = nextProps
          selector.error = null
        }
      } catch (error) {
        selector.shouldComponentUpdate = true
        selector.error = error
      }
    }
  }

  return selector
}

最后来run,如果符合条件或者出错，便会改变shouldComponentUpdate = true,去重新 render.

再来看看initSubscription方法：

initSubscription() {
        if (!shouldHandleStateChanges) return

        const parentSub = (this.propsMode ? this.props : this.context)[subscriptionKey]
        this.subscription = new Subscription(this.store, parentSub, this.onStateChange.bind(this))

        this.notifyNestedSubs = this.subscription.notifyNestedSubs.bind(this.subscription)
      }

先判断shouldHandleStateChanges是不是成立，如果成立则进行，否则返回。成立会进行初始化,正如其名，初始化订阅相关事件。

这里初始化结束之后，我们看下componentDidMount方法,

componentDidMount() {
        if (!shouldHandleStateChanges) return

        // componentWillMount fires during server side rendering, but componentDidMount and
        // componentWillUnmount do not. Because of this, trySubscribe happens during ...didMount.
        // Otherwise, unsubscription would never take place during SSR, causing a memory leak.
        // To handle the case where a child component may have triggered a state change by
        // dispatching an action in its componentWillMount, we have to re-run the select and maybe
        // re-render.
        this.subscription.trySubscribe()
        this.selector.run(this.props)
        if (this.selector.shouldComponentUpdate) this.forceUpdate()
}

他也会和initSubscription一样的去判断，确定是否进行下去。下面会进行尝试订阅.
然后去运行selector，运行selector之后，会判断shouldComponentUpdate,如果成立,则会进行forceUpdate, 注意: forceUpdate会跳过shouldComponentUpdate的判断.

最后看下render方法，

render() {
    const selector = this.selector
    selector.shouldComponentUpdate = false

    if (selector.error) {
      throw selector.error
    } else {
      return createElement(WrappedComponent, this.addExtraProps(selector.props))
    }
}

可以看到.他会对属性进行重写成false,如果报错，就跑出错误，如果正常，那就进行render创建元素到页面。

第一次看源码，有些东西解释不到位，欢迎提出于原文出处。

react-redux connect源码解读

猜你喜欢