React状态管理
什么是状态管理
含义
状态管理：管理共享内存中的状态。单页应用的各个组件本身是共享内存的，如果将状态保存在内存中，就可以读写统一内存中的变量，从而达到状态共享的目的
状态管理工具
- Veu: Veu(Pinia)
- Angular: Service和Rxjs
- React: Flux,Redux,Mobx,Rxjs,Recoil,Jotai
React 状态管理工具分类
- React自带：Local State 和Context
- 单向数据流：Flux、Redux
- 双向数据绑定：Mobx
- 原子型状态管理：Recoil、Jotai
- 异步操作密集型：Rxjs
注：每个状态管理工具有不同的适用性
Context存在的问题
- Context相当于全局变量，难以追溯数据的变更情况
- 使用Context的组件内部稠合度太高，不利于组件的复用和单元测试
- 会产生不必要的更新(比如会穿透memo和dependicies等）
- Context 只能存储单一值，无法存储多个各自拥有消费者的值的集合
- 粒度也不太好控制，不能细粒度的区分组件依赖了哪一个Context
- 多个Context会存在层层嵌套的问题
Flux状态管理架构图
Flux的缺点
(1)U组件和容器组件的拆分过于复杂
(2）Action和Dispatcher绑定在一起
(3)不支持多个store
(4)store被频繁的引入和调用
Redux三大原则
- 单一数据源
在redux中整个应用的全局State(再次注意是全局state)，都会保存在一个store中 一个单一数据源 state treee也简化了应用的调试和和监控：它也让你在开发中能将应用数据持久化到本地，从而加速开发周期。此外，有一些功能以前很难实现，比如“撤销/重做”，在单一数据源的原则下，使用 Redux 实现将非常容易
- Store中的State是只读的
我们不能直接修改stare中的state.store中的state是只读的。唯一能改变store中的state的方式就是通过acttion 使用纯函数来执行修改
- 使用纯函数来执行修改
接受纯函数来接受aciton，该纯函数叫reducer,可以改变store中的state
