详解关于react-redux中的connect用法介绍及原理解析

关于react-redux的一个流程图

流程图

connect用法介绍

connect方法声明：

connect([mapstatetoprops], [mapdispatchtoprops], [mergeprops],[options])

作用：连接react组件与 redux store。

参数说明：

mapstatetoprops(state, ownprops) : stateprops

这个函数允许我们将 store 中的数据作为 props 绑定到组件上。

const mapstatetoprops = (state) => {
 return {
  count: state.count
 }
}

（1）这个函数的第一个参数就是 redux 的 store，我们从中摘取了 count 属性。你不必将 state 中的数据原封不动地传入组件，可以根据 state 中的数据，动态地输出组件需要的（最小）属性。

（2）函数的第二个参数 ownprops，是组件自己的 props。有的时候，ownprops 也会对其产生影响。

当 state 变化，或者 ownprops 变化的时候，mapstatetoprops 都会被调用，计算出一个新的 stateprops，（在与 ownprops merge 后）更新给组件。

mapdispatchtoprops(dispatch, ownprops): dispatchprops

connect 的第二个参数是 mapdispatchtoprops，它的功能是，将 action 作为 props 绑定到组件上，也会成为 mycomp 的 props。

[mergeprops],[options]

不管是 stateprops 还是 dispatchprops，都需要和 ownprops merge 之后才会被赋给组件。connect 的第三个参数就是用来做这件事。通常情况下，你可以不传这个参数，connect 就会使用 object.assign 替代该方法。

[options] (object) 如果指定这个参数，可以定制 connector 的行为。一般不用。

原理解析

首先connect之所以会成功，是因为provider组件：

1. 在原应用组件上包裹一层，使原来整个应用成为provider的子组件
2. 接收redux的store作为props，通过context对象传递给子孙组件上的connect

那connect做了些什么呢？

它真正连接 redux 和 react，它包在我们的容器组件的外一层，它接收上面 provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。

关于它的源码

connect是一个高阶函数，首先传入mapstatetoprops、mapdispatchtoprops，然后返回一个生产component的函数(wrapwithconnect)，然后再将真正的component作为参数传入wrapwithconnect，这样就生产出一个经过包裹的connect组件，该组件具有如下特点:

1. 通过props.store获取祖先component的store
2. props包括stateprops、dispatchprops、parentprops,合并在一起得到nextstate，作为props传给真正的component
3. componentdidmount时，添加事件this.store.subscribe(this.handlechange)，实现页面交互
4. shouldcomponentupdate时判断是否有避免进行渲染，提升页面性能，并得到nextstate
5. componentwillunmount时移除注册的事件this.handlechange

由于connect的源码过长，我们只看主要逻辑：

export default function connect(mapstatetoprops, mapdispatchtoprops, mergeprops, options = {}) {
 return function wrapwithconnect(wrappedcomponent) {
  class connect extends component {
   constructor(props, context) {
    // 从祖先component处获得store
    this.store = props.store || context.store
    this.stateprops = computestateprops(this.store, props)
    this.dispatchprops = computedispatchprops(this.store, props)
    this.state = { storestate: null }
    // 对stateprops、dispatchprops、parentprops进行合并
    this.updatestate()
   }
   shouldcomponentupdate(nextprops, nextstate) {
    // 进行判断，当数据发生改变时，component重新渲染
    if (propschanged || mapstateproducedchange || dispatchpropschanged) {
     this.updatestate(nextprops)
      return true
     }
    }
    componentdidmount() {
     // 改变component的state
     this.store.subscribe(() = {
      this.setstate({
       storestate: this.store.getstate()
      })
     })
    }
    render() {
     // 生成包裹组件connect
     return (
      <wrappedcomponent {...this.nextstate} />
     )
    }
   }
   connect.contexttypes = {
    store: storeshape
   }
   return connect;
  }
 }

connect使用实例

这里我们写一个关于计数器使用的实例：

component/counter.js

import react, {component} from 'react'

class counter extends component {
  render() {
    //从组件的props属性中导入四个方法和一个变量
    const {increment, decrement, counter} = this.props;
    //渲染组件，包括一个数字，四个按钮
    return (
      <p>
        clicked: {counter} times
        {' '}
        <button onclick={increment}>+</button>
        {' '}
        <button onclick={decrement}>-</button>
        {' '}
      </p>
    )
  }
}

export default counter;

container/app.js

import { connect } from 'react-redux'
import counter from '../components/counter'
import actions from '../actions/counter';

//将state.counter绑定到props的counter
const mapstatetoprops = (state) => {
  return {
    counter: state.counter
  }
};
//将action的所有方法绑定到props上
const mapdispatchtoprops = (dispatch, ownprops) => {
  return {
    increment: (...args) => dispatch(actions.increment(...args)),
    decrement: (...args) => dispatch(actions.decrement(...args))
  }
};

//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
export default connect(mapstatetoprops, mapdispatchtoprops)(counter)

完整代码

github：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。