React Redux: 从文档看源码 - Connect工具类篇（1）

React 前端之家
前端之家收集整理的这篇文章主要介绍了React Redux: 从文档看源码 - Connect工具类篇（1），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

注：这篇文章只是讲解React Redux这一层，并不包含Redux部分。Redux有计划去学习，等以后学习了Redux源码以后再做分析；
注：代码基于现在 (2016.12.29) React Redux 的最新版本 (5.0.1)。

Connect工具类篇

这里讲的其实是connect方法的基础，本来是准备先把connectAdvanced和Provider写完，再专门写connect和相关方法的，但是发现connectAdvanced也用到了很多这些基础方法，所以就停下来，写下面的这些东西。

之前没有上过代码结构图，这里贴张图上来（5.0.1版本）

React Redux在最近的几个版本中对代码做了拆分和优化，之前看4.x的代码的时候，connect下面所有的方法都在一个文件里面，而且逻辑也不够清晰。当时本来想吐槽他们的源代码的，但是升级到5.x以后，就发现代码清晰很多，只不过代码逻辑复杂度更上一层楼。。。

dependsOnOwnProps

单独提出来这个属性，做一个简单的说明。dependsOnOwnProps属性并不是对外的属性，而是代码内部逻辑使用的，会在多个方法中用到，这个属性主要是针对connect的两个参数mapStateToProps,mapDispatchToProps。

根据文档，mapStateToProps可以是function或者null,mapDispatchToProps可以是function,object或者null。如果是function，当定义的时候，可以选择是否传入ownProps对象，比如function mapStateToProps(state,ownProps) {}，这就说明这个function的返回结果可能是基于ownProps的，所以每次ownProps发生改变的时候，都需要调用这个方法进行更新。

所以dependsOnOwnProps就是当ownProps更新的时候，用来判断是否需要重新调用对应方法获取新的结果。

wrapMapToProps.js

getDependsOnownProps

这段代码主要的作用就是判断map(State/Dispptch)ToProps方法是否需要ownProps。
返回值决定了在props更新的时候，是否要调用map(State/Dispptch)ToProps方法进行更新

export function getDependsOnOwnProps(mapToProps) {
  return (mapToProps.dependsOnOwnProps !== null && mapToProps.dependsOnOwnProps !== undefined)
    ? Boolean(mapToProps.dependsOnOwnProps)
    : mapToProps.length !== 1
}

这里通过判断方法的length来进行判断是否需要ownProps，当mapToProps.length !== 1的时候，就是需要。反之，就是不需要。

这里有几种情况:

  1. function mapStateToProps(state){}，那么mapStateToProps.length === 1，不需要ownProps

  2. function mapStateToProps(state,ownProps){},那么mapStateToProps.length === 2,需要ownProps

  3. function mapStateToProps(){ arguments[0]; } 或者 function mapStateToProps(...args){},那么mapStateToProps.length === 0,由于无法通过定义判断是否需要ownProps，所以默认是需要

  4. 如果之前已经设置过了，那么就不需要设置了，重用Boolean(mapToProps.dependsOnOwnProps)

wrapMapToPropsConstant

首先，根据文档mapDispatchToProps是optional的，而且可以是function或者object。
这块代码主要针对mapDispatchToProps是object或者null的情况，把这个对象进行包装，生成(dispatch,options)=>()=>dispatchedActions的方法，并添加dependsOnOwnProps属性。

export function wrapMapToPropsConstant(getConstant) {
  return function initConstantSelector(dispatch,options) {
    const constant = getConstant(dispatch,options)

    function constantSelector() { return constant }
    constantSelector.dependsOnOwnProps = false 
    return constantSelector
  }
}

首先查看一下这个方法的调用，在mapDispatchToProps.js里面有两处调用：

export function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {...}

export function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
  return (!mapDispatchToProps)
    ? wrapMapToPropsConstant(dispatch => ({ dispatch })) // 会生成(dispatch,options)=>()=>({dispatch})
    : undefined
}

export function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
  return (mapDispatchToProps && typeof mapDispatchToProps === 'object')
    ? wrapMapToPropsConstant(dispatch => bindActionCreators(mapDispatchToProps,dispatch)) // 会生成(dispatch,options)=>()=>bindActionCreators(mapDispatchToProps,dispatch)，也就是绑定过dispatch的actions
    : undefined
}

在这里，如果mapDispatchToProps为null或者是object的时候，调用wrapMapToPropsConstant方法。
而在Object里面，由于调用了bindActionCreators方法，所以最后生成的都是绑定过dispatch的actions，这也就是为什么在connect的组件中，直接调用this.props.action()就可以通知redux，而不是dispatch(this.props.action()).

文档中也提到：

如果传入的时object，那么里面所有的function都会被认为是一个Redux的action creator。同时，一个影对象会被造出并合并到组件的props中。这个影对象会包含mapDispatchToProps中同样的function名，但是每一个action creator都被dispatch包裹，所以就可以直接调用。

注: 在whenMapDispatchToPropsIsObject只是返回(dispatch,options)=>()=>disptachedActions，然后会在selectorFactory里面传入dispatch和options，并根据dependsOnOwnProps调用，最后获得里面的constant。最后会在mergeProps方法里面，把state,constant,props进行合并

wrapMapToPropsFunc

这个方法主要是针对mapStateToProps和mapDispatchToProps是function的情况。

mapStateToProps

如果传入了这个function，那么组件就会监听Redux store的更新。一旦store发生更新，那么mapStateToProps就会被调用。返回的结果必须是一个plain object，结果会被合并到组件的props中。如果没有传入这个对象，那么组件就不会监听Redux Store。如果ownProps在定义中作为一个参数，那么ownProps的值就是传入组件的props，同时每次props发生改变，mapStateToProps就会被重新调用。(如果组件接受的props发生了浅层改变(shallowly changed)，同时ownProps也作为一个参数被传入，那么mapStateToProps就会被重新调用)

mapDispatchToProps

如果传入的是function，那么dispatch会被传入到这个function中。你可以按照自己的意愿返回被dispatch绑定过的action creators.

两个都有

Note: 在一切特殊情况下，你可能需要对渲染性能有更多的掌控，mapDispatchToProps()和mapStateToProps()也可以返回一个function。在这种情况下，返回的function会被作为真正的mapDispatchToProps(mapStateToProps)。这么做，允许你可以做一些记忆类的操作（应该是说，可以记录上一次的state和ownProps，在function里面可以做对比，减少不必要的改变）

代码是这样子的：

export function wrapMapToPropsFunc(mapToProps,methodName) {
  return function initProxySelector(dispatch,{ displayName }) {
    const proxy = function mapToPropsProxy(stateOrDispatch,ownProps) {
      return proxy.dependsOnOwnProps
        ? proxy.mapToProps(stateOrDispatch,ownProps)
        : proxy.mapToProps(stateOrDispatch)
    }

    proxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps) // 初始化时根据mapToProps来判断是否需要ownProps

    proxy.mapToProps = function detectFactoryAndVerify(stateOrDispatch,ownProps) {
      // 第一次调用的时候，会进到这里
      proxy.mapToProps = mapToProps
      let props = proxy(stateOrDispatch,ownProps) // 先获取mapToProps的返回值

      if (typeof props === 'function') { // 如果返回值是function，那么符合文档中说的特殊情况
        proxy.mapToProps = props // 把这个props当作真正的mapToProps
        proxy.dependsOnOwnProps = getDependsOnOwnProps(props) // 根据新的props方法来更新是否需要ownProps
        props = proxy(stateOrDispatch,ownProps) // 获取最终结果
      }

      if (process.env.NODE_ENV !== 'production') 
        verifyPlainObject(props,displayName,methodName) // 如果是非production环境下，判断结果的类型

      return props
    }

    return proxy
  }
}

这里的mapToProps就是map(State/Dispatch)ToProps的意思，这个代码主要做了几个工作：

  1. 判断这个方法是否基于ownProps

  2. 第一次调用的时候(或者说connect方法初始化的时候)，如果mapToProps返回的时一个function，那么就把这个function当作真正的mapToProps

  3. 第一次调用的时候，检查返回的对象是不是一个plain object,如果不是，那么就在非production环境下抛出一个异常，提示开发者

注： 从代码里面看出一点，就是当function返回function的情况，其实dependsOnOwnProps并不是根据外层的function来定的，而是根据返回的function而定的。而且，像文档中所说，他的主要作用是做对比(和上一个state,ownProps)，所以我猜代码应该像这个样子

function mapStateToProps(state,ownProps){ // ownProps可选
    let oldState = state,oldProps = ownProps,lastState;
    return function(state,ownProps){ // ownProps可选
      // 在这里对比当前state,ownProps和之前的oldState,oldProps，来生成新的state，或者直接用之前的state
      let ret = {};
      if(!lastState) {
        lastState = state; // do some computation here.
      } else if(!shallowEqual(state,oldState) || !shallowEqual(oldProps,ownProps)) {
        lastState = state; // do some computation here
      }
      
      oldState = state;
      oldProps = ownProps;

      return lastState;
    }
  }

同时，真正是否渲染根据ownProps改变，是基于内层的function来定的。所以说：

dependsOnOwnProps为false

function mapStateToProps(state,ownProps){
    return function(state){ }
  }

dependsOnOwnProps为true

function mapStateToProps(state){
    return function(state,ownProps){ }
  }

mapDispatchToProps.js

这个JS中提供了三个方法，分别应对mapDispatchToProps是function,object和null的情况。

whenMapDispatchToPropsIsFunction

export function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {
  return (typeof mapDispatchToProps === 'function')
    ? wrapMapToPropsFunc(mapDispatchToProps,'mapDispatchToProps')
    : undefined
}

当mapDispatchToProps是function的时候，用wrapMapToPropsFunc来进行调用。最后返回的应该是(dispatch,{displayName})=>(dispatch,ownProps)=>binded Action Creators

whenMapDispatchToPropsIsMissing

export function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
    return (!mapDispatchToProps)
      ? wrapMapToPropsConstant(dispatch => ({ dispatch }))
      : undefined
  }

当mapDispatchToProps是null的时候，调用wrapMapToPropsConstant(dispatch => ({ dispatch }))，这里这么做的目的是，只把dispatch绑定到props上面。这里返回的是(dispatch,options)=>()=>{ dispatch }

whenMapDispatchToPropsIsObject

export function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
  return (mapDispatchToProps && typeof mapDispatchToProps === 'object')
    ? wrapMapToPropsConstant(dispatch => bindActionCreators(mapDispatchToProps,dispatch))
    : undefined
}

当mapDispatchToProps是object的时候，调用wrapMapToPropsConstant(dispatch => bindActionCreators(mapDispatchToProps,dispatch))进行包装，根据之前对wrapMapToPropsConstant的介绍，这里返回的是(dispatch,options)=>()=>binded Action Creators

最后的export default

export default [
  whenMapDispatchToPropsIsFunction,whenMapDispatchToPropsIsMissing,whenMapDispatchToPropsIsObject
]

这里写的很有趣，也很值得借鉴。先看一下调用的地方：

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

  return (dispatch,options) => {
    throw new Error(`Invalid value of type ${typeof arg} for ${name} argument when connecting component ${options.wrappedComponentName}.`)
  }
}

这里mapDispatchToPropsFactories是之前的数组。由于这三个方法如果类型判断不正确，就会返回undefined，所以这里的match通过循环的方法来进行判断和解析。如果result存在，那么就说明判断通过，就返回。如果result不存在，那么就检查下一个。

如果按照平时的写法，我肯定会用很多的if来进行判断，这样子反而增加了代码量，而且不美观。比如这样：

export default function(mapDispatchToProps){
  let result = undefined;
  
  result = whenMapDispatchToPropsIsFunction(mapDispatchToProps);
  if(!result) result = whenMapDispatchToPropsIsMissing(mapDispatchToProps);
  if(!result) result = whenMapDispatchToPropsIsObject(mapDispatchToProps);

  return result;
}

和源码里的比较，感觉还是源码里写的好看，有趣。

mapStateToProps.js

这个JS中提供了两个方法，分别应对mapDispatchToProps是function和null的情况。

whenMapStateToPropsIsFunction

export function whenMapStateToPropsIsFunction(mapStateToProps) {
  return (typeof mapStateToProps === 'function')
    ? wrapMapToPropsFunc(mapStateToProps,'mapStateToProps')
    : undefined
}

当mapStateToProps是function的时候，进行封装。这里返回的结果是(dispatch,{displayName})=>(state,ownProps)=>state result

whenMapStateToPropsIsMissing

export function whenMapStateToPropsIsMissing(mapStateToProps) {
  return (!mapStateToProps)
    ? wrapMapToPropsConstant(() => ({}))
    : undefined
}

这里，当mapStateToProps是null的时候，返回结果是(dispatch,ownProps)=>{}。之所以这里返回的是{}，而不是undefined后者null，是因为便于以后在mergeProps的时候不需要再去检查undefined和null的情况。

export default

export default [
  whenMapStateToPropsIsFunction,whenMapStateToPropsIsMissing
]

mergeProps.js

这个JS中提供了两个方法，分别应对mergeProps是function和null的情况。

插一段mergeProps的文档：

如果这个值不是undefined，那么它会接受mapStateToProps(),mapDispatchToProps()和父组件传入的props。这个方法返回的plain object会被当作组件的props传给组件。你可以在这个方法里面只选择部分props返回，或者根据传入的props给action creators绑定一些参数。如果没有传这个值，默认值是Object.assign({},ownProps,stateProps,dispatchProps)

defaultMergeProps

export function defaultMergeProps(stateProps,dispatchProps,ownProps) {
  return { ...ownProps,...stateProps,...dispatchProps }
}

默认的mergeProps方法。和文档中说的一样，不用解释。

wrapMergePropsFunc

export function wrapMergePropsFunc(mergeProps) {
  return function initMergePropsProxy(
    dispatch,{ displayName,pure,areMergedPropsEqual } // 后面的其实都是option里面东西
  ) {
    let hasRunOnce = false // 第一次不用检查，直接赋值，所以有一个flag
    let mergedProps // 记录props，用于赋值和对比

    return function mergePropsProxy(stateProps,ownProps) {
      const nextMergedProps = mergeProps(stateProps,ownProps)

      if (hasRunOnce) {
        if (!pure || !areMergedPropsEqual(nextMergedProps,mergedProps))
          mergedProps = nextMergedProps

      } else {
        hasRunOnce = true
        mergedProps = nextMergedProps

        if (process.env.NODE_ENV !== 'production')
          verifyPlainObject(mergedProps,'mergeProps')
      }

      return mergedProps
    }
  }
}

在这里先说一下pure这个option

pure是connect的第四个参数option中的一项，默认值是true。在这里的定义是，一个组件是pure的话，就说明这个组件并不依赖于除了props和Redux store的state意外的任何输入和状态。如果pure是true，当相关的props和state经过对比，并没有发生改变的话，那么就不去调用mapStateToProps,mapDispatchToProps和mergeProps。反之，无论是否改变，都会调用这些方法更新props。(注： 这里的经过对比，在这里方法里是areMergedPropsEqual这个对比的方法。另外还有areStatesEqual， areOwnPropsEqual， areStatePropsEqual都是在option中定义)

这里做了几件事情：

  1. 第一次调用的时候，不进行是否改变的判断，同时检查返回值的格式

  2. 第二次以后的调用，都会进行pure和改变的判断，如果改变了，才修改mergedProps值，减少了不必要的渲染

export default

export function whenMergePropsIsFunction(mergeProps) {
  return (typeof mergeProps === 'function')
    ? wrapMergePropsFunc(mergeProps)
    : undefined
}

export function whenMergePropsIsOmitted(mergeProps) {
  return (!mergeProps)
    ? () => defaultMergeProps
    : undefined
}

export default [
  whenMergePropsIsFunction,whenMergePropsIsOmitted
]

和之前的几个js一样，包含isFunction和isOmitted两个方法。

一点总结

  1. 可以利用function.length来判断这个function在定义的时候有几个参数。可以用来判断某些参数是否需要传入，或许可以减少不必要的计算。但是，需要注意的是，当function中使用arguments，或者function(...args){}的时候，虽然内部可能会使用多个参数，但是length返回0，无法通过length属性进行判断。

  2. 由于stateProps和dispatchProps是否根据ownProps来进行更新是根据function.length来定的，所以如果不需要，就不要在定义的时候加上这个参数。

  3. 需要处理一个对象，这个对象可能有多种类型的时候，我们可以不选择在方法写if..else来判断类型，可以像mapDispatchToProps,mapStateToProps一样，返回一个function的数组，每个function里面判断是否是符合的类型，是的话，按这个类型处理。不是的话，返回undefined。简单，好用。

  4. 当一个系统接受的同一个参数可能是多种不同的类型，该怎么办？我们并不期望在里面使用过多的typeof,if...else来进行判断，代码会显得比较啰嗦臃肿。我们可以考虑把所有类型都转化成为统一的一个类型。就像这里的wrapMapToProps一样，把Object，function,null都转成function，以后就不需要多余处理类型了

下篇：《Connect工具类篇(2)》

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from 'react'; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作