可以看到上一篇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 的呈现)
容器组件(负责管理数据和逻辑)。