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


Posted in Javascript onSeptember 11, 2017

关于react-redux的一个流程图

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

流程图

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:https://github.com/lipeishang/react-redux-connect-demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jQuery DOM操作实例
Mar 05 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 #Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 #jQuery
详解webpack2+React 实例demo
Sep 11 #Javascript
react-native 完整实现登录功能的示例代码
Sep 11 #Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 #Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 #Javascript
js封装成插件的步骤方法
Sep 11 #Javascript
You might like
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
mouse_on_title.js
2006/08/25 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
requireJS使用指南
2016/04/27 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
python绘制多个子图的实例
2019/07/07 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
语文教学感言
2014/02/06 职场文书
产品设计开发计划书
2014/05/07 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
民主评议党员总结
2014/10/20 职场文书
个人优缺点总结
2015/02/28 职场文书
火烧圆明园观后感
2015/06/03 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
python中的sys模块和os模块
2022/03/20 Python