React中的状态管理

1.Redux：

一般来说，项目交互不多就不需要用到Redux；

Redux由store、reducer、action组成；

store就是保存数据的地方，一个页面只能有一个store,它是通过createStore（fn）函数来生成的，fn是一个reducer函数；

reducer就是在就收到Action后通过type判断返回一个新的state的计算过程；

action就是用户操作页面告知何时应该改变state的一个通知；

redux工作流程：首先用户操作页面时会发出一个action，action自动调用reducer，reducer通过action中的type判断更新哪一个state，再把action中更改后的值给state；state一变页面就会重新渲染;

2.Mobx

相比于redux来说，mobx的学习成本更低，也更加简单，一个store文件就可以了；

state：组件中的数据；

observable：被观察者，被observable修饰的state会暴露给整个app，各观察者组件都可以根据state值的变化作出响应

observer：观察者，被observer修饰的组件中将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染（原理：用autorun包裹了render函数，state变化触发autorun从而自动渲染）

action：state值的修改需要在action函数中进行

3.Recoil

使用 Recoil，我们需要在项目最外层包一个 RecoilRoot ，这个和大部分状态管理器一致，通过 context 来跨组件传递数据。

Recoil核心概念只要是atoms和selectors

atoms就是用来定义我们需要用到的状态，有key和default等属性，key是全局唯一的也是必须的，default为你定义这个状态的默认值；

selectors：有些状态需要依赖其它状态，这时候就要用 selector 来定义这个状态了

如何消费？

• useRecoilState()：打算同时读取和写入state时
• useRecoilValue()：仅打算读取state时
• useSetRecoilState()：仅打算写入state时
• useResetRecoilState()：重置state为其默认值

优点：简单

缺点：不支持ts语法，不支持class组件

4.Context Api

1.通过React.createContext创建一个context实例

2.通过这个实例创建Provider对象，Provider对象的value属性存储着需要用到的state或function

3.通过Consumer对象加载状态并挂在dom节点上

4.通过props.context.xxx来消费