状态管理的本质:管理共享内存中的状态 1.内存共享 2.管理状态 3.页面通信 4.组件通信 5.刷新失效
React状态管理工具: React自带:LocalState(Props)和 Context 单向数据流:Flux,Redux 双向数据流:Mobx 原子型状态管理:Recoll,Jotai 异步操作密集型:Rxjsf
1.Local State(Props) 组件级别的局部状态,由父组件自上而下的传递
2.context: OtherDisplay没有用到Context里的value,但是Context的值变换,otherDisplay也会重新渲染。有什么办法解决呢?
使用hook方法解决
1.Context相当于全局变量,难以追溯数据的变更情况 2.使用Context的组件内部耦合度太高,不利于组件的复用和单元测试 3.会产生不必要的更新(比如会穿透memo和dependicies等) 4.Context 只能存储单一值,无法存储多个各自拥有消费者的值的集合。 5.粒度也不太好控制,不能细粒度的区分组件依赖了哪一个Context6.多个Context会存在层层嵌套的问题
- redux: 诞生较早,是由Flux演变而来,需要兼容内组件,可以做时间旅行,随时穿梭到以前和未来。 Flux缺点: 1.UI组件和容器组件的拆分过于复杂 2.Action和Dispatcher绑定在一起 3.不支持多个store 4.store被频繁的引入和调用
redux三大原则: 1.单一数据源 2.Store中的State是只读的 3.使用纯函数来执行修改
- mobx: 它通过透明的函数响应式编程使得状态管理变得简单和可扩展,Mobx跟vue的设计比较相似,是一个响应式的状态管理库。Mobx借助于装饰器的实现,使得代码更加简洁易懂。由于使用了可观察对象,所以Mobx可以做到直接修改状态,而不必像Redux一样编写繁琐的 actions和reducers。
优势在于上手简单,可以直接修改状态,不要编写繁琐的Action和Reducer,也不需要引入各种复杂的中间件,但是不能实现时间旅行和回溯。
- Recoll 解决了嵌套地狱的问题和context金字塔问题,可以实现状态快照和状态回滚
6.zusand 轻量级的状态管理工具