react状态管理
react状态管理主要用于react组件之间的通信。react框架遵循的是单向数据流原则,自上向下进行属性传递。在这种情况下,当react组件之间的嵌套关系过深时,会使得组件通信过程变复杂。react框架主要用于解决这一问题。
react状态管理工具分类
同Vue等其他前端框架相比,react框架具有多种不同的状态管理工具。这些状态管理工具大概可以分为以下几类。
react框架自带的状态管理工具
local state:local state是指组件级别的局部状态,通过单向数据流进行状态的传递,主要用于子页面以及子页面以下级别的组件通信。
context:主要用于子页面之间的通信,解决了组件通信跨级的问题。但是context相当于全局变量,难以追朔数据的变更情况,并且会产生不必要的更新。
单向数据流状态管理工具
Flux:Flux利用数据的单向流动管理公共状态,整个架构大概可以分为4个部分,包括View(视图层),Action(视图发出的消息),Dispatcher(派发者,用来接收消息并处理)以及Store(数据层,用来存放状态)
Redux:Redux继承了Flux的思想,具有三大原则,分别是单一数据源、只有一个store并且存储的state是只读的,使用纯函数修改状态。Redux兼容性较好,支持react的类组件,但是Redux具有较多的配置代码,不太适合中小项目。
双向数据绑定状态管理工具
Mobx:通过透明的函数响应式编程进行状态管理,支持react的类组件,不需要过多的样板代码但无法实现时间旅行与回溯。
原子型状态管理工具
Recoil:可以实现状态的组合。