第 11 节 React 状态管理
一、什么是状态管理
状态管理工具的本质:管理共享内存中的状态。
- 共享内存
- 管理状态
- 页面通信
- 组件通信
- 刷新失效
为什么React有这么多少状态管理工具？
- Vue: Vuex(Pinia)
- Angular: Service和Rxjs
- React: Flux、Redux、Mobx、Rxjs、Recoil、Jotai、Zustand
二、状态管理管理工具简介
（一）React状态管理工具可以分为以下几类:
- React自带:Local State(props)和Context
- 单向数据流:Flux、Redux(Redux-toolkit)
- 双向数据绑定:Mobx
- 原子型状态管理:Recoil、Jotai
- 异步操作密集型:Rxjs
（二） React状态管理简介
- Local State(props) local State顾名思义，就是组件级别的局部状态。
- Context：OtherDisplay没有用到Context里的value,但是Context的值变换, otherDisplay也会重新渲染。
- Redux：Redux是从Flux演变而来的, Flux它是 Facebook官方给出的应用架构,利用数据的单向流动的形式对公共状态进行管理，现在已经被淘汰了，其设计思想还是可以参考和借鉴的
Flux利用数据的单向流动的形式对公共状态进行管理。
- View:视图层
- Action:视图发出的消息
- Dispatcher:派发者,用来接收Action,执行回调函数
- Store:数据层,存放状态，一旦发生改动,就会更新数据以及emit相关事件等
Flux的缺点：
- UI组件和容器组件的拆分过于复杂
- Action和Dispatcher绑定在一起
- 不支持多个store
- store被频繁的引入和调用
Redux 的架构图
Flux 的架构图
Redux的三大原则：单一数据源，只有一个store、store中的state是只读的、使用纯函数来执行修改。
- Mobx
步骤：
- 页面事件(生命周期、点击事件等等)触发action的执行。
- 通过action来修改状态。
- 状态更新后，computed计算属性也会根据依赖的状态重新计算属性值。
- 状态更新后会触发reaction，从而响应这次状态变化来进行一些操作（渲染组件、打印日志等等)
-
Recoil
Recoil是React官方内置的状态管理工具，一定程度上解决了Local State和Context的局限性，且能够兼容React的新特性比如Concurrent模式等。 -
Zustand
Zustand是主打轻量级的状态管理工具，没有Redux那样臃肿的设计，也没有兼容React类组件的历史包袱, Zustand状态管理工具体积很小,因此很适合移动端的网页。
三、Redux在项目中的实践
-
redux做为一款状态管理工具，主要是为了解决组件问通信的问题。
-
Redux复杂的模版代码：
redux是遵循函数式编程的规则，action是一个原始js对象(plain object)且reducer是一个纯函数，对于同步且没有副作用的操作，数据流起到可以管理数据，从而控制视图层更新的目的。 -
在有副作用的action和原始的action之间增加中间件处理，中间件的作用就是：转换异步操作，生成原始的action，这样，reducer函数就能处理相应的action，从而改变state，更新UI。
