位置: 编程技术 - 正文

浅谈React和Redux的连接react-redux(react区别)

编辑:rootadmin

推荐整理分享浅谈React和Redux的连接react-redux(react区别),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react与redux,react区别,react-redux,react react-redux,react react-redux,react-redux和redux,react和redux关系,react和redux关系,内容如对您有帮助,希望把文章链接给更多的朋友!

之前一直在探索React相关的东西,手上有个SPA项目,于是准备上Redux试试水。Redux本身和React并没有之间的关联,它是一个通用Javscript App模块,用做App State的管理。要在React的项目中使用Redux,比较好的方式是借助react-redux这个库来做连接,这里的意思是,并不是没有react-redux,这两个库就不弄一起用了,而是说react-redux提供了一些封装,一种更科学的代码组织方式,让我们更舒服地在React的代码中使用Redux。

之前仅通过Redux文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的React版本是0..x。

react-redux提供两个关键模块:Provider和connect。

Provider

Provider这个模块是作为整个App的容器,在你原有的App Container的基础上再包上一层,它的工作很简单,就是接受Redux的store作为props,并将其声明为context的属性之一,子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store。不过我们的组件通常不需要这么做,将store放在context里,是为了给下面的connect用的。

这个是Provider的使用示例:

connect

这个模块是算是真正意义上连接了Redux和React,正好它的名字也叫connect。

先考虑Redux是怎么运作的:首先store中维护了一个state,我们dispatch一个action,接下来reducer根据这个action更新state。

映射到我们的React应用中,store中维护的state就是我们的app state,一个React组件作为View层,做两件事:render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render,并包装action creator用于在响应用户操作时dispatch一个action。

浅谈React和Redux的连接react-redux(react区别)

好了,详细看看connect这个模块做了什么。先从它的使用来说,它的API如下:

mapStateToProps是一个函数,返回值表示的是需要merge进props的state。默认值为() => ({}),即什么都不传。

mapDispatchToProps是可以是一个函数,返回值表示的是需要merge仅props的actionCreators,这里的actionCreator应该是已经被包装了dispatch了的,推荐使用redux的bindActionCreators函数。

更方便的是可以直接接受一个对象,此时connect函数内部会将其转变为函数,这个函数和上面那个例子是一模一样的。

mergeProps用于自定义merge流程,下面这个是默认流程,parentProps值的就是组件自身的props,可以发现如果组件的props上出现同名,会被覆盖。

options共有两个开关:pure代表是否打开优化,详细内容下面会提,默认为true,withRef用来给包装在里面的组件一个ref,可以通过getWrappedInstance方法来获取这个ref,默认为false。

connect返回一个函数,它接受一个React组件的构造函数作为连接对象,最终返回连接好的组件构造函数。

然后几个问题:

React组件如何响应store的变化? 为什么connect选择性的merge一些props,而不是直接将整个state传入? pure优化的是什么?

我们把connect返回的函数叫做Connector,它返回的是内部的一个叫Connect的组件,它在包装原有组件的基础上,还在内部监听了Redux的store的变化,为了让被它包装的组件可以响应store的变化:

但是通常,我们connect的是某个Container组件,它并不承载所有App state,然而我们的handler是响应所有state变化的,于是我们需要优化的是:当storeState变化的时候,仅在我们真正依赖那部分state变化时,才重新render相应的React组件,那么什么是我们真正依赖的部分?就是通过mapStateToProps和mapDispatchToProps得到的。

具体优化的方式就是在shouldComponentUpdate中做检查,如果只有在组件自身的props改变,或者mapStateToProps的结果改变,或者是mapDispatchToProps的结果改变时shouldComponentUpdate才会返回true,检查的方式是进行shallowEqual的比较。

所以对于某个reducer来说:

另外在connect的时候,要谨慎map真正需要的state或者actionCreators到props中,以避免不必要的性能损失。

最后,根据connect的API我们发现可以使用ES7 decorator功能来配合React ES6的写法:

OK,

标签: react区别

本文链接地址:https://www.jiuchutong.com/biancheng/373327.html 转载请保留说明!

上一篇:bootstrap3中container与container_fluid外层容器的区别讲解

下一篇:微信小程序tabBar用法实例详解(微信小程序tabbar颜色)

  • 出口退税调整后退税率包括什么档次
  • 资产总额的季度怎么算
  • 运输公司的车辆保险费计入什么科目
  • 航空电子客票行程单在哪里打印
  • 金银首饰在哪个平台买比较好
  • 基金收入交增值税吗
  • 研发费用加计扣除条件
  • 计提个税会计分录怎么理解
  • 开完发票业务没收入需要确认收入入账吗?
  • 借款合同印花税减免优惠政策
  • 增值税专用发票抵扣期限
  • 地税税款未扣怎么处理
  • 工业企业小规模纳税人的认定标准
  • 小型微利企业所得税优惠政策2023
  • 防暑降温费如何做账
  • 收到委托代销清单,确认收入的会计分录
  • 购入商品入库时发现实收物多余应收数计入什么科目
  • 股权转让怎么办理才合理
  • 政府装修补贴政策
  • 不具备生产条件的生产经营单位
  • 外账的结转成本是什么
  • 如何设置系统自带的输入法
  • 用系统自带命令行安装WIN10
  • 应交消费税的会计分录
  • 收到违约金赔款计入什么科目
  • 营改增前甲供材施工企业如何缴纳企业所得税
  • 销售方怎么申请红字信息表
  • 土地承包经营权和土地经营权区别
  • 在建工程账务处理管理制度
  • 微笑的树懒哥斯达黎加
  • 劳务外包会计分录最新
  • vscode配置r
  • 劳务公司成本票不够怎么办
  • 增值税已认证抵扣
  • 出售还在摊销的产品
  • transformer中的token
  • uniapp简介
  • 前端技巧
  • gpt最大
  • php公众号开发框架
  • linux mput命令
  • 城建税5%的是什么情况
  • phpcms怎么样
  • 怎么在网上增加办税人员
  • 企业商品库存周期是多久
  • 固定资产出租收入属于
  • sql注入漏洞不会出现在哪个位置
  • python中datetime.datetime
  • 劳务费发票为什么必须每月开
  • 计提和支付可以录在一张凭证吗
  • 装修消防改造费用会计分录
  • 弃置费用怎么处理
  • 广交会展务
  • 小规模纳税人转一般纳税人当月如何申报
  • 母子公司往来款属于借款吗
  • 购买商品加包装怎么入账
  • 无法确定退货率的处理
  • 合同资产结转收入
  • 什么是电子发票如何打印报销
  • 临建费用包含在哪里
  • mac电脑系统安装
  • u盘pe安装win7系统
  • ubuntu20.10安装教程
  • windows10总是出现打印机错误
  • win7突然变卡顿怎么回事
  • win7开机错误代码
  • win8怎么调整屏幕分辨率
  • 批量win10激活码怎么弄
  • cocos2d setTextureRect用法
  • cocos2dx node
  • opengl颜色混合模式
  • js三种绑定方式
  • bat批量处理
  • cocos2dx-3.x(二)、坐标系
  • ReactNative之FlatList的具体使用方法
  • jquery的checked
  • JavaScript+html5 canvas制作的百花齐放效果完整实例
  • 在css中
  • 广东电子税务局官网登录入口手机版
  • 中国移动的电子协议推送服务是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设