React状态管理
状态管理
解决“嵌套地狱”的问题，解决的是跨层级组件之间的数据通信和状态共享
本质：管理共享内存中的状态
React状态管理工具多，是因为React将状态的变动完全交给开发者
React状态管理简介
React状态管理工具可以分为以下几类:
- React自带:Local State(props)和Context
- 单向数据流:Flux、Redux(Redux一toolkit)
- 双向数据绑定:Mobx
- 原子型状态管理:Recoil、Jotai
- 异步操作密集型:Rxjs 每一种状态管理工具都有其不同的适用性，不同场景下需要合理的选择状态管理工具。
- Local State
单页面中，子页面及子页面以下的组件都可以用local State解决状态管理
子页面和子页面之间通信时Local State无法满足需求
-
Context
用于子页面和子页面之间通信
渲染力度不可控，会生成过多渲染
- Context相当于全局变量，难以追溯数据变更情况，做不到Redux的回溯
- 使用Context的组件内部耦合度太高，不利于组件的复用和单元测试
- 会产生不必要的更新
- Context只能存储单一值
- 粒度不好控制
- 多个Context会存在层层嵌套
- 不同页面相同属性可以放在Context中
-
Redux
是从Flux演变而来的，Flux是利用数据的单向流动的形式对公共状态进行管理
Flux缺点：
- UI组件和容器组件拆分过分复杂
- Action和Dispatcher绑定在一起
- 不支持多个store
- store被频繁引用
Redux三大原则：单一数据源，只有一个store、store中的state是只读的、使用纯函数来执行修改
可以做时间旅行，适用大型Web项目
缺点：样板代码多，复杂度高
4.Mobx
借助于装饰器实现，代码简洁易懂，可以直接修改状态，没有Redux繁琐的actions和reducers
缺点：多于灵活，代码风格很难统一，不能时间旅行和回溯
5.Recoil
团队开发的，可以任意组合，具有原子性的原子状态，可以实现完美的局部更新，通过Atom组合衍生出状态Selector
可以细粒度状态控制，状态回溯，实现状态快照
6.Zustand
轻量级，适合移动端网页，核心是通过setState来直接修改状态，Redux通过dispatch和Reducer来进行状态更新
实现一个简易的状态管理工具
状态管理工具都是基于发布/订阅模式实现的
Redux在项目中的实践
注意：不要把所有状态都放入React当中
如果存在副作用函数，首先处理副作用函数，然后生成原始的js对象。如何处理副作用操作．在redux中选择在发出action，到reducer处理函数之间使用中间件处理副作用。在有副作用的action和原始的action之间增加中间件处理，从图中我们也可以看出，中间件的作用就是:转换异步操作，生成原始的action，这样,reducer函数就能处理相应的action，从而改变state，更新UI。
Redux toolkit 用redux需要有太多的样板代码，中间件代码等等，还需要区别同步和异步操作，及其复杂。Redux toolkit可以简化Redux开友，包括配直Store、定义Reducer、不可变的更新逻辑、可以立即创建整个个状态的“切片slice"，而无需手动编写任何action creator 或者action type。此外，Redux toolkit提供了完整的React的hooks，可以方便React函数组件中使用Redux toolkit。
