React 进阶 | 青训营笔记

42 阅读2分钟

什么是状态管理

从React诞生之后,前端组件化的方案深入人心, React遵循的是单向数据流的原则,属性通过Props自 上而下的传递。当页面的比较简单,组件之间的层级关系比较浅时,这种自上而下的单向数据流的方式是 不会有问题的。如果页面一复杂,组件的嵌套层级一深,这种单向数据流的传递方式,将会使你陷入到” 嵌套地狱”。 状态管理本身,解决的就是这种”嵌套地狱的问题,解决的是跨层级组件之间的数据通信和状态共享

状态管理工具的本质

image.png

状态管理工具一览

image.png

下面我们选取redux进行详细了解

Redux

是什么

React是一个用于构建用户界面的JavaScript库,它的主要特点是可组合性和声明式编程风格。而Redux是一种可预测的状态管理容器,它可以让应用程序的状态变得可控和可测试。Redux可以与React一起使用,这意味着我们可以使用Redux来管理React应用程序的状态。在React中,Redux通常被称为React Redux。

在React Redux中,Redux负责管理应用程序的状态,React则负责渲染UI。React组件可以通过连接到Redux store来获取需要的状态,并根据状态来渲染UI。这个连接过程通过React Redux提供的connect函数实现。

三种组件类型

使用React Redux时,我们通常需要编写以下三种类型的组件:

  1. 容器组件(Container Component):容器组件是连接Redux store的React组件,它负责将Redux store中的状态映射到它的子组件的props中,并将操作Redux store的方法作为props传递给子组件。容器组件通常是类组件,因为它们需要访问React Redux提供的connect函数。
  2. 展示组件(Presentational Component):展示组件只负责渲染UI,它通常是一个函数组件。展示组件接收容器组件传递的props,并根据props渲染UI。
  3. 操作Redux store的Action Creator函数:Action Creator函数用于创建一个action对象,这个对象描述了对Redux store进行的操作,比如更新状态。这个action对象会被传递给Redux的reducer函数,从而更新Redux store中的状态。

使用React Redux可以让我们更好地管理应用程序的状态,使应用程序更易于维护和测试。

Rerference

[‌⁤‍‍​‌‬‬⁣⁢⁤⁢​⁡​⁢‬‬‍​⁤​​‌‌⁣‬‬‍‍​⁣⁣‍​‍​​⁢‬⁣‬‍字节前端训练营 - React状态管理.pptx - 飞书云文档 (feishu.cn)]>(bytedance.feishu.cn/file/Ojj2bc…)