1、react状态管理
状态管理本身,解决的是跨层级组件之间的数据通信和状态共享 状态管理的本质: 管理共享内存中的状态 React状态管理的工具:Flux,Redux,Mobx,Rxjs,Recoil,Jotai,Zustand。
2、React状态管理工具分类:
React自带:Local State(props)和 Context 单项数据流:Flux、Redux(Redux-tookit) 双向数据绑定:Mobx 原子型状态管理:Recoil、Jotai 异步操作密集型:Rxjs 每一种状态管理工具都有其不同的适用性,不同场景下需要合理的选择状态管理工具。 Local State是组件级别的局部状态,当React数据流自上而下不能满足需要的时候,可以考虑将状态向上一级,放在父组件中,由父组件自上而下传递。 但是这种向上延伸的方法,不是无限的,如果一直往上延伸,会出现一个父组件嵌套10几层子组件的情况,因此必需有一定的限制。 React中的Context解决了react中props或者state进行多级数据传递,数据需要自顶向下流经每一级组件,无法跨级的问题,但是Context在页面间共享数据的时候同样有很多问题: 1、Context相当于全局变量,难以追溯数据的变更情况, 2、使用Context的组件内部耦合度太高,不利于组件的复用和单元测试, 3、会产生不必要的更新, 4、Context只能存储单一值,无法存储多个各自拥有的消费者的值的集合, 5、粒度也不太好控制,不能细粒度的区分组件依赖了哪一个Context、 6、多个Context会存在层层嵌套的问题。 Redux是由Flux演变而来,Flux利用数据的单向流动的形式对公共状态进行管理。 Redux的三大原则:单一数据源,只有一个store,store中的state是只读的,使用纯函数来执行修改。 Redux适合于大型Web项目,尤其是一些交互足够复杂组件通信频繁的场景,状态可预测和回溯是非常有价值的。
总结
通过本节的学习,对React的状态管理有了一定的认识。