记React connect的几种写法(小结)


Posted in Javascript onSeptember 18, 2018

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

连接 React 组件与 Redux store。

连接操作不会改变原来的组件类,反而返回一个新的已与 Redux store 连接的组件类。

参数

[mapStateToProps(state, [ownProps]): stateProps] (Function): 如果定义该参数,组件将会监听 Redux store 的变化。任何时候,只要 Redux store 发生改变,mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象,这个对象会与组件的 props 合并。如果你省略了这个参数,你的组件将不会监听 Redux store。如果指定了该回调函数中的第二个参数 ownProps,则该参数的值为传递到组件的 props,而且只要组件接收到新的 props,mapStateToProps 也会被调用。

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,而且这个对象会与 Redux store 绑定在一起,其中所定义的方法名将作为属性名,合并到组件的 props 中。如果传递的是一个函数,该函数将接收一个 dispatch 函数,然后由你来决定如何返回一个对象,这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起(提示:你也许会用到 Redux 的辅助函数 bindActionCreators())。如果你省略这个 mapDispatchToProps 参数,默认情况下,dispatch 会注入到你的组件 props 中。如果指定了该回调函数中第二个参数 ownProps,该参数的值为传递到组件的 props,而且只要组件接收到新 props,mapDispatchToProps 也会被调用。

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 如果指定了这个参数,mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数,根据组件的 props 来筛选部分的 state 数据,或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数,默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

[options] (Object) 如果指定这个参数,可以定制 connector 的行为。

[pure = true] (Boolean): 如果为 true,connector 将执行 shouldComponentUpdate 并且浅对比 mergeProps 的结果,避免不必要的更新,前提是当前组件是一个“纯”组件,它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true。

[withRef = false] (Boolean): 如果为 true,connector 会保存一个对被包装组件实例的引用,该引用通过 getWrappedInstance() 方法获得。默认值为 false

返回值

根据配置信息,返回一个注入了 state 和 action creator 的 React 组件。

第一种

最普通,最常见,delllee和官网第写法。

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Button } from 'antd-mobile';
import { addGunAction , removeGunAction , removeGunAsync}from './store/actionCreators'
class App extends Component {
 render() {
  console.log();
  return (
   <div className="App">
    <p>{this.props.gun}</p>
    <Button type="ghost" size="small" inline onClick={this.props.handeladd}>+</Button>
    <Button type="ghost" size="small" inline onClick={this.props.handeljian}>-</Button>
    <Button type="ghost" size="small" inline onClick={this.props.handelmanjian}>慢-</Button>
   </div>
  );
 }
}
const mapStateToProps=(state)=>({
  gun:state.gun
})
const mapDispachToProps=(dispatch)=>({
  handeladd(){
   dispatch(addGunAction())
  },
  handeljian(){
   dispatch(removeGunAction())
  },
  handelmanjian(){
   dispatch(removeGunAsync())
  }
})
export default connect(mapStateToProps,mapDispachToProps)(App);

第二种

初次接触,感觉有点绕,不太好理解,为什么点击了,直接就派发action了?

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Button } from 'antd-mobile';
import { addGunAction , removeGunAction , removeGunAsync}from './store/actionCreators'
class App extends Component {
 render() {
  console.log();
  return (
   <div className="App">
    <p>{this.props.gun}</p>
    {/*不用像第一种那样,点击调用一个方法,方法里再派发action
    这种直接点击派发action就可以*/}
    <Button type="ghost" size="small" inline onClick={this.props.addGunAction}>+</Button>
    <Button type="ghost" size="small" inline onClick={this.props.removeGunAction}>-</Button>
    <Button type="ghost" size="small" inline onClick={this.props.removeGunAsync}>慢-</Button>
   </div>
  );
 }
}
const mapStateToProps=(state,ownProps)=>({
  gun:state.gun
})
//这些action已经自动有了dispatch的功能
const actionCreators={ addGunAction , removeGunAction , removeGunAsync}
export default connect(mapStateToProps,actionCreators)(App);

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

Javascript 相关文章推荐
保证JavaScript和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
深入理解vue中的$set
Jun 01 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 #Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 #Javascript
JavaScript指定断点操作实例教程
Sep 18 #Javascript
对VUE中的对象添加属性
Sep 18 #Javascript
微信小程序适配iphoneX的实现方法
Sep 18 #Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 #Javascript
解决vue attr取不到属性值的问题
Sep 18 #Javascript
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
PHP 命令行参数详解及应用
2011/05/18 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
详解php实现页面静态化原理
2017/06/21 PHP
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python assert的用处示例详解
2019/04/01 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
企业治理工作自我评价
2013/09/26 职场文书
财务人员个人工作总结
2015/02/27 职场文书
考勤制度通知
2015/04/25 职场文书
无保留意见审计报告
2015/06/05 职场文书
教师节班会主持词
2015/07/06 职场文书
《静夜思》教学反思
2016/02/17 职场文书
导游词之江西赣州
2019/10/15 职场文书