react-redux 理解第二篇connect函数

connect的函数签名

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

• mapStateToProps 可以传一个函数或者不传
• mapDispatchToProps可以传一个函数，对象或者不传
• mergeProps 可以传一个函数或者不传
• options的选项比较多，不过官方都已经给过默认值，所以不传也可以，据说默认值可以满足99%的需求

{
  pure?: boolean,
  areStatesEqual?: Function,
  areOwnPropsEqual?: Function,
  areStatePropsEqual?: Function,
  areMergedPropsEqual?: Function,
}

下面来分析一下源码

这一部分可以看出默认导出的 connect 是保存了一些默认参数的，这些默认参数主要作用是：

• 第一个提供创建高阶组件的函数
• 中间三个负责处理各种 connect 函数参数可能出现的情况
• 最后一个参数提供创建 selectorFactory函数给connectHOC

export function createConnect({
  connectHOC = connectAdvanced,
  mapStateToPropsFactories = defaultMapStateToPropsFactories,
  mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
  mergePropsFactories = defaultMergePropsFactories,
  selectorFactory = defaultSelectorFactory
} = {}) {

下面才是我们平时直接调用的 connect 函数，在这一步，使用 match 函数初使化了initMapStateToProps，initMapDispatchToProps，initMergeProps。关于 这三个函数的初始化还是挺复杂的。上面 mapStateToPropsFactories，mapDispatchToPropsFactories，mergePropsFactories三个参数都是一个数组。

  return function connect(mapStateToProps, mapDispatchToProps, mergeProps,
    {
      pure = true,
      areStatesEqual = strictEqual,
      areOwnPropsEqual = shallowEqual,
      areStatePropsEqual = shallowEqual,
      areMergedPropsEqual = shallowEqual,
      ...extraOptions
    } = {}
  ) {
    const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories)
    const initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories)
    const initMergeProps = match(mergeProps, mergePropsFactories)
}

我们来看一下 match 函数，可以看出，match 函数把 connect 前三个函数分别传进去来初使化对应的参数，而每一个 factories 都一个数组件，只有遍历到合使的类型才会返回真正的值

function match(arg, factories) {
  for (let i = factories.length - 1; i >= 0; i--) {
    const result = factories[i](arg)
    if (result) return result
  }
  return undefined
}

下面看一下最返回值，返回值是 connectHOC的执行结果。而 connectHOC 的执行结果很明显是一个wrapWithConnect函数 ，这个在后面connectAdvanced里会有写。

最后提一下shouldHandleStateChanges，这个值是根据 mapStateToProps 来判断的，所以当你没有这个参数的时候shouldHandleStateChanges为 false，这时候组件是不会根据 store 变化来重新渲染的。其它的都是把值初始化一下传给了 connectHOC

{
    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})`,

      shouldHandleStateChanges: Boolean(mapStateToProps),

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

    })
  }
}

最后一行这里的导出说明我们平时使用的是一个官方基于默认值创建的 connect 函数

export default createConnect()