react-redux有什么用

“react-redux”的作用:1、将组件分为了容器组件和UI组件;2、取代redux中的“store.subscribe”监听组件的状态变化,用于渲染组件;3、配合redux使用,使组件轻松的拿到全局状态,方便组件间的通信。

react-redux有什么用

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react-redux有什么用

react-redux配合redux使用,将redux定义的store数据注入到组件中,可以使组件轻松的拿到全局状态,方便组件间的通信。使react组价与redux数据中心(store)联系起来,调用dispatch函数修改数据状态后,触发通过subscribe注册更新视图的处理逻辑,包括需要渲染的数据和更新数据的函数。

它主要用于在入口处包裹需要用到Redux的组件。本质上是将store放入context里。

因为redux和组件的耦合度太高,为了解耦,所以设计了redux。一旦我们引入了react-redux,我们便不再需要使用store的subscribe自己去订阅状态了。UI组件就像普通组件一样内部没有redux的身影。可读性更高。

01.png

作用1

将组件分为了容器组件和UI组件,UI组件通过props来获取状态和操作状态的方法。

作用2

通过Provider组件来取代redux中的store.subscribe来监听组件的状态变化,用于渲染组件。

作用3

在容器组件中通过核心API connect来连接UI组件和redux,connect是一个高阶函数,第一个参数接收的是两个回调函数,回调函数1:将接收一个state,然后返回一个对象对象中包含了UI组件想要的状态。回调函数2:接收一个dispatch,返回一个对象,对象中包含了UI组件想要操作状态的方法。同时还有一个简写方法,就是第二个参数直接传入一个对象,该对象包含操作状态的方法。(核心:就是将state和dispatch映射到UI组件的props中)

核心代码

export default connect(    state => ({count: state}),    dispatch => {        return {            increment: number => dispatch(increment(number)),            decrement: number => dispatch(decrement(number)),        }    })(Counter)

登录后复制

下面是简写形式

export default connect(    state => ({count: state}),    {increment,decrement})(Counter)

登录后复制

推荐学习:《react视频教程》

以上就是react-redux有什么用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2933523.html

(0)
上一篇 2025年3月11日 20:32:32
下一篇 2025年3月5日 14:19:08

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • react dnd的用法是什么

    react dnd用于构建复杂的拖放界面,并保持组件之间的耦合,是一组react高阶组件;使用时只需用对应的API将目标组件包裹,即可实现拖动或接受拖动元素的功能;不需要判断拖动状态,只需在传入的spec对象中各个状态属性中做对应处理即可。…

    2025年3月11日 编程技术
    200
  • react withrouter的用法是什么

    react withrouter用于将一个组件包裹进Route里面,并将“react-router”的三个history、location、match对象传入props对象,引入语法为“import{withRouter}from&#823…

    2025年3月11日
    200
  • 什么时候使用react-redux

    使用“react-redux”的场景:1、用户的使用方式复杂时;2、不同身份的用户有不同的使用方式时;3、多个用户之间可以协作时;4、与服务器大量交互,或者使用了WebSocketView时;5、要从多个来源获取数据时。 本教程操作环境:W…

    2025年3月11日
    200
  • react跟vue的diff算法有什么区别

    区别:1、当节点元素类型相同,但className不同时,vue认为是不同类型元素,会删除重建,而react会认为是同类型节点,只修改节点属性;2、列表比对,vue采用从两端到中间的比对方式,而react则采用从左到右依次比对的方式。 本教…

    2025年3月11日
    200
  • 什么是React Fiber

    React Fiber是一个类似双向链表的数据结构;ReactDom会根据jsx,为每个dom节点生成一个fiber节点,child指向第一个子节点、sibling指向下一个兄弟节点、return指向父节点的数据结构就是fiber数据结构。…

    2025年3月11日
    200
  • react的ssr项目是什么

    在react中,ssr是“Server Side Rendering”的缩写,是服务器端渲染的意思;ssr是将同一个组件渲染为服务器端的HTML字符串并发送到浏览器,将这些静态标记”激活”为客户端上完全可交互的应用程…

    2025年3月11日
    200
  • react中forceupdate的用法是什么

    在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。…

    2025年3月11日
    200
  • react是不是mvvm框架

    react不是mvvm框架。mvvm框架需要有一个vm对象来映射view,也即vm对象的属性发生改变的时候,对应的视图部分会相对应更新;而react中并没有vm对象,有的是属性和状态,整体可作为View使用,所以react不是mvvm框架。…

    2025年3月11日
    200
  • react中hooks解决了什么问题

    解决的问题:1、从组件中提取状态逻辑,解决了在组件之间复用状态逻辑很难的问题;2、将组件中相互关联的部分拆分成更小的函数,解决了复杂组件的问题;3、在非class的情况下使用更多的React特性,解决了class组件与函数组件有差异的问题。…

    2025年3月11日
    200
  • node和react有什么区别

    node和react的区别是:nodejs是一个基于Chrome JavaScript运行时建立的一个平台,可用于方便地搭建响应速度快、易于扩展的网络应用;而react是一个用于构建用户界面的JavaScript库,主要用于构建UI。 本教…

    2025年3月11日
    200

发表回复

登录后才能评论