跳到主要内容

React 状态管理库

· 阅读需 2 分钟

Flux Redux Zustand Recoil Jotai

  • Flux 最早由 facebook 提出的架构,已停止维护
  • Redux 集中式的状态管理库,它通过单个store来存储整个应用的状态。
    核心思想如下
    • 单一数据源:整个应用的状态被存储在一个单一的对象树中,即 store
    • 状态只读:所有的状态变更都必须通过触发特定的动作(action)来发起请求。
    • 使用纯函数来执行修改:Reducer 是一个纯函数,它接受当前状态和一个 action 作为参数,并返回新的状态。Reducer 不会修改传入的状态,而是返回一个新的状态对象。
      缺点
    • 过于复杂: 对于小型项目或者简单应用来说,Redux 可能显得过于复杂。它的概念(如 action、reducer、store)和工作流程需要一定的时间去理解和掌握。
    • 代码冗余:Redux 需要编写大量的模板代码,包括定义 actions、reducers 和配置 store,这可能会增加开发的初始成本。
    • 异步处理复杂: Redux 默认只支持同步处理,处理异步操作需要使用中间件,如 redux-thunk 或 redux-saga。这些中间件虽然强大,但增加了代码的复杂性和学习成本。
  • Zustand
    • 基于 React Hooks 思想的轻量级状态管理库。****
  • Recoil 由 facebook 开发,已于2025年初停止维护。专为React设计,以解决复杂状态管理的痛点。它使用原子和选择器来管理状态,支持并行和异步操作。
  • MobX
    • 采用观察者模式来实现状态管理,提供对React、Vue、angular的绑定库。
  • Jotai
    • 一个基于原子化的轻量级状态管理库,它借鉴了Redux和Recoil的设计。Jotai简单易用、无需过度配置、支持即时更新,适合小型到中型项目。

参考资料