react-8(react-redux)

本文介绍了react-redux如何简化React应用的代码,通过connect方法将UI组件和容器组件分离,UI组件专注于展示,容器组件处理数据和逻辑。通过mapStateToProps和mapDispatchToProps函数,UI组件可以从props获取数据和方法。Provider组件使得整个应用可以访问store,简化数据传递。
摘要由CSDN通过智能技术生成

        可以看到上一篇react-7里的例子写法是比较复杂的,UI组件和容器(显示页面的UI和业务逻辑没有分离),可以使用react- redux处理一下。


react-redux

        在上一篇中我们知道了redux是什么和怎么样使用的,而react-redux就是可以帮助我们使用redux的时候简化代码。

        思想一:react-redux的作用就是将我们之前写的类组件改成函数组件(无状态组件)

                在react中提倡尽可能的使用函数组件,一旦数据要使用redux的时候一定要引入的react-redux,,引入之后,写的全部类组件都会成了函数组件,无状态组件就相当于没有state。

        为什么推荐使用函数组件呢?因为我们的数据全部交给了redux管理了,(由于不用管理state,函数组件的效率比类组件的快的。),正如上一篇的备忘录实例,我们都没有使用组件的state,所以上一篇的备忘录实例也是可以改为函数组件的。

        思想二:react-redux就是将UI组件和容器组件分开来。

        UI组件:就是我们写的没有state数据(没有状态)的组件,所有的数据都从容器组件里拿,也相当于子组件。

        容器组件:包裹UI组件的容器,给UI组件传数据,相当于父组件。容器组件推荐使用react-redux生成(调用react-redux的API生成),不需要我们自己写,容器组件的数据是直接从store中获取的。

        使用react-redux的connet方法生成容器组件将UI组件包裹,UI组件如果要拿数据,需要从props拿。

        所以如果把store绑定到根节点,那么内部的所有子组件都能用。就不用每个类组件内部都使用 this.state= store.getState() 来拿数据,直接用props获取就好了

提问:如果我引入了react-redux,可以不用引redux吗?

答案:不可以!redux是前提


安装

 yarn add react-redux 

React-Redux 将所有组件分成两大类:

        UI 组件(负责 UI 的呈现)

        容器组件(负责管理数据和逻辑)。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值