位置: 编程技术 - 正文

浅谈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颜色)

  • 补提企业所得税怎么做账
  • 车辆购置税税收优惠
  • 税收的自动稳定性主要表现在什么制度
  • 员工福利开的专票怎么做分录
  • 办公室电话费计入什么科目
  • 股权转让所得如何申报个税
  • 冲红的发票要拿回来吗
  • 印花税减半征收优惠政策2022
  • 平销返利企业所得税处理
  • 进口小汽车消费税组成计税价格
  • 生产车间的房屋租赁费计入什么科目
  • 公司注销固定资产交什么税
  • 一般纳税人 开以前的税率
  • 会议费增值税专用发票税率
  • 个人所得税工资和实际工资对不上
  • 出口货物 关税
  • 自营方式建造固定资产成本包括增值税吗
  • 收到不开票的返利如何记账?
  • 劳务工资要附什么合同
  • 机会成本怎么计量
  • 出口业务怎么做分录
  • 信用证保证金会退还吗
  • 暂估成本跨年怎么处理分录
  • 人际关系定义是什么
  • 商家为消费者提供餐具
  • 前端vue3
  • 小规模纳税人季度不超30万免增值税
  • 收到退回残保金怎么做账
  • 员工预支款计入什么科目
  • 出口抵减内销产品应纳税额怎么结转
  • 发票税额打印不全可以入账吗
  • 增值税小规模纳税人减免增值税政策
  • 公司收到个人汇款怎么开发票
  • 企业怎么开启承兑业务
  • mysql设置uuid
  • sqlserver怎么把数据库导出来
  • mysql组合
  • 金融工具占比低
  • 房产税和城镇土地使用税
  • 融资性租赁税率
  • 应收账款属于会计分录
  • 营改增后增加了什么征税项目
  • 明细与发票
  • 服装厂布料都是在哪里进的
  • 以前年度少计提的工资怎么处理
  • 预收款不开票怎么处理
  • 存货报废损失会计处理
  • 税控盘冲红怎么操作
  • 办公室做隔断多少钱
  • 预收账款的借贷方向增减
  • sql server如何查询
  • win7系统怎么关闭病毒防护
  • 如何在windows中添加字体
  • office进程
  • win7 media center
  • win7一直处于开机界面
  • win10没空间
  • Win10预览版桌面图标和任务栏不翼而飞怎么办?
  • linux如何绑定域名
  • opengl教程48讲
  • OpenGl的glMatrixMode()函数理解
  • jquery tagname
  • eclipse 代码提示指令在哪改
  • 安卓图像处理app
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • python标准库os中的方法
  • jquery删除table行
  • python错误和异常处理
  • js继承的方式
  • 求行驶时间的公式
  • python 正则 \s
  • 江苏国家电子税务局网站
  • 个人所得税其他公司在为我发放工资
  • 深圳企业所得税税率多少
  • 基层税务局长工作职责
  • 上海中考规定
  • 税务局怎么增加购票员
  • 税务总局转变税收征管方式
  • 注册一个信息咨询公司需要什么
  • 按季申报印花税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设