React状态管理

从全局对象window说起

window.color = "Green"
window.theme = "York"

全局污染，重复声明

直接取值或赋值，数据变更不清晰

渲染颗粒不可控

无法进行时间旅行

什么是状态管理

状态管理本质：管理共享内存中的状态

1，共享内存

2，管理状态

3，页面通信

4，组件通信

5，刷新失效

详细定义：单页应用的各个组件本身是共享内存的，如果将状态保存在内存中，就可以读写统一内存的变量，从而达到状态共享的目的

为什么React有这么多状态管理工具

Vue：Vuex(Pinia)

Angular：service和Rxjs

React: Flux Redux Mobx Rxjs

跟前端框架定义有关，Vue和Angular双向数据绑定，计算属性等数据是响应式的，控制视图刷新，拥有计算属性等，此外本身就包含了完整的状态管理工具从官方定调 React不一样是一个纯前端UI= fn(state) React将状态的变更完全交给开发者。

React状态管理的简介

React自带：Local State(props) 和Context

单向数据流：Flux Redux(Redux-toolkit)

双向数据绑定：Mobx

原子型状态管理: Recoil Jotai

异步操作密集型：Rxjs

每种状态管理都有其不同的适用性，不同场景需要合理的状态管理工具

Flux利用数据单项流动的形式进行管理

VIew:视图层

Action: 视图发出的消息

Dispatcher ：派发者用来接收Action，执行回调函数

Store：数据层存放状态，一旦发生改动，就可以更新数据以及emit相关事件等

Flux的缺点：

(1) ui组件和容器组件的拆分过于复杂

(2) Axtion和Dispatcher绑定在一起

(3) 不支持多个store

(4)store被频繁引入和调用

状态管理简介

首先Redux解构了Action和Disatcher

export function addTodo(text){
    return {
        type:ActionTypes.ADD,
        text:text
    };
}

上面就市一个Redux中的action，它是独立的，如果使用flux需要和dispatcher耦合在一起

let action = {
type:"add"
};
dispatcher.dispatch(action)
dispatcher.register(action=>{
    switch(action.type){
        case "add":
            ...
            break;
    }
})