1什么是状态管理 为什么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层的前端框架，UI=fn(state)，React将状态的变动完全交给开发者。
2React状态管理简介 React状态管理工具可以分为以下几类: React自带：Local State(props)和Context单向数据流：Flux、Redux(Redux-toolkit)双向数据绑定：Mobx
React中的Context解决了react中，props或者state进行多级数据传递，则数据需要自顶下流经过每一级 组件，无法跨级的问题。但是Context在页面间共享数据的时候同样有很多问题: 1.Context相当于全局变量，难以追溯数据的变更情况
2.使用Context的组件内部耦合度太高，不利于组件的复用和单元测试
React状态管理简介 Flux状态管理的架构图如下所示: Action Flux利用数据的单向流动的形式对公共状态进行管理。 View：视图层 Action：视图发出的消息 Dispatcher：派发者，用来接收Action，执行回调函数 Store：数据层，存放状态，一旦发生改动，就会更新数据以 及emit相关事件等
React状态管理简介 Recoil主要特点，就是较为官方，提供了与Concurrent 模式及其他React新特性兼容的可能性，主打的是性能。
Redux在项目中的实践 1.如何使用Redux 首先要明确为什么要使用redux，这一点很重要，如果不知道为什么使用redux，那么在开发的过程中肯定不 能合理的使用redux.首先来看redux的本质: redux做为一款状态管理工具，主要是为了解决组件间通信的问题。 既然是组件间的通信问题，那么显然将所有页面的状态都放入redux中，是不合理的，复杂度也很高。 Redux 52 redux mapStar mapDispatch 容器组件 展示组件
Redux在项目中的实践 减少局部状态和redux状态的不合理混用: 全量使用redux的复杂度很高，我们当然考虑将一部分状态放在redux中，一部分状态放在local state中
Redux在项目中的实践 如果存在副作用函数，那么我们需要首先处理副作用函数，然后生成原始的js对象。如何处理副作用操作，在redux中选择在发出action，到reducer处理函数之间使用中间件处理副作用。 Component Action (side function) Middleware Action(plain object) Reducer 55 state
Redux在项目中的实践 在有副作用的action和原始的action之间增加中间件处理，从图中我们也可以看出，中间件的作用就是: 转换异步操作，生成原始的action，这样，reducer函数就能处理相应的action，从而改变state，更新UI。#青训营笔记创作活动
