详解关于react-redux中的connect用法介绍及原理解析_网络技术

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

发布时间 - 2026-01-11 03:12:19 点击率：次

关于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组件：

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

那connect做了些什么呢？

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

关于它的源码

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

通过props.store获取祖先Component的store
props包括stateProps、dispatchProps、parentProps,合并在一起得到nextState，作为props传给真正的Component
componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互
shouldComponentUpdate时判断是否有避免进行渲染，提升页面性能，并得到nextState
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：https://github.com/lipeishang/react-redux-connect-demo

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

# react # redux # connect # connect函数 # react中的connect # react-redux的connect示例详解 # react-redux中connect的装饰器用法@connect详解 # react-redux中connect()方法详细解析 # react-redux的connect用法详解 # 绑定 # 也会 # 第二个 # 自己的 # 是一个 # 就会 # 是因为 # 你可以 # 第一个 # 才会 # 原封不动 # 些什么 # 你不 # 这件事 # 对其 # 第三个 # 只看 # 在与 # 可以根据 # 再将

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Struts2框架站点风险的示例分析

下一篇：Yandex英文版浏览器入口 Yandex官方俄罗斯搜索引擎

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Struts2框架站点风险的示例分析

下一篇：Yandex英文版浏览器入口 Yandex官方俄罗斯搜索引擎