今天是五一假期后要补的上班的日子，知道大家很痛苦，但是为了我们美好的生活（当然更是为了我们那微薄的工资），我也要继续努力学习，来我们跟着青训营的老师继续学习关于react的知识！还是老规矩，作为前端学习小白，可能因为专业名词不懂，存在错字漏字的，希望各位指出，谢谢！
一、什么是状态管理
从React诞生之后，前端组件化的方案深入人心，React遵循的是单向数据流的原则，属性通过Props自上而下的传递。当页面的比较简单，组件之间的层级关系比较浅时，这种自上而下的单向数据流的方式是不会有问题的。如果页面一复杂，组件的嵌套层级一深，这种单向数据流的传递方式，将会使你陷入到“嵌套地狱”。状态管理本身，解决的就是这种“嵌套”地狱的问题，解决的是跨层级组件之间的数据通信和状态共享。
状态管理工具的本质：管理共享内存中的状态
1.共享内存
2.管理状态
3.页面通信
4.组件通信
5.刷新失效?
详细定义:单页应用的各个组件本身是共享内存的，如果将状态保存在内存中，就可以读写统─内存中的变量，从而达到状态共享的目的。
为什么React有这么多状态管理工具?
Vue: Vuex(Pinia)
Angular: Service和Rxjs
React: Flux、Redux、Mobx、Rxjs、Recoil、Jotai、Zustand
跟不同前端框架的定义有关,Vue和Angular双向数据绑定，计算属性等，数据是响应式的，控制视图刷新，拥有计算属性等，这些使得Vue和Angular需要状态管理的场景减少，此外其本身就包含了完整的状态管理工具，比如Vue的Vuex和Pinia，Angular的Service(RXjs)等，从官方定调。而React不一样, React是一个纯UI层的前端框架，Ul = fn(state)，React将状态的变动完全交给开发者。
二、状态管理工具简介
1、分类
React状态管理工具可以分为以下几类:
React自带:Local State(props)和Context
单向数据流:Flux、Redux(Redux-toolkit)
双向数据绑定:Mobx
原子型状态管理: Recoil、Jotai
异步操作密集型:Rxjs
每一种状态管理工具都有其不同的适用性，不同场景下需要合理的选择状态管理工具。
2、react状态管理简介
1.Local State(props)
local State顾名思义，就是组件级别的局部状态，我们知道React的数据流是自上而下的，大部分情况下local State就能满足我们的需求，但是也有例外当然这种向上延伸的方法，不是无限的，如果一直往上延伸，会出现一个父组件嵌套10几层子组件的情况，必须要有一个"度"，超过这个"度"后，我们就认为local State的方式就不太实用了。
这个"度"，在前端开发中，大部分情况下我们认为就是子页面。我们一般认为，单页应用中，子页面以及子页面之下的组件都是可以用local State来解决状态管理问题的，而子页面和子页面之间，是不需要再往上延伸。那么子页面和子页面之间如何通信呢? 答案是:子页面和子页面之间的通信，React本身提供了Context。
2.context
React中的Context解决了react中, props或者state进行多级数据传递，则数据需要自顶下流经过每一级组件，无法跨级的问题。但是Context在页面间共享数据的时候同样有很多问题：
1.Context相当于全局变量,难以追溯数据的变更情况
⒉使用Context的组件内部耦合度太高，不利于组件的复用和单元测试
3.会产生不必要的更新(比如会穿透memo和dependicies等)
4.Context 只能存储单一值，无法存储多个各自拥有消费者的值的集合。
5.粒度也不太好控制,不能细粒度的区分组件依赖了哪一个Context
6.多个Context会存在层层嵌套的问题
上述的缺点，有部分其实都是能够解决的。
我们在React业务代码的开发中，要多思考，其实大部分场景下，我们都不需要三方状态管理工具。Props和Context能解决我们很多问题。
Context的使用场景很多，一些全局的不需要经常变更的配置，我们经常放到Context中，比如主题，语言等；
3.redux
我们前面讲到了props和context，以及他们的优缺点，在讲React状态管理工具的时候，最经典的要属Redux了，我们详细介绍一下Redux.
Redux是从Flux演变而来的, Flux它是 Facebook官方给出的应用架构，利用数据的单向流动的形式对公共状态进行管理，不过现在已经被淘汰了，不过其设计思想还是可以参考和借鉴的，在聊Redux之前，我们先聊一下Flux状态管理。
React状态管理状态
Flux状态管理的架构图：
和redux相似，Flux利用数据的单向流动的形式对公共状态进行管理。
View: 视图层
Action: 视图发出的消息
Dispatcher: 派发者，用来接收Action，执行回调函数
Store: 数据层，存放状态，一旦发生改动，就会更新数据以及emit相关事件等
