zustand vs jotai 状态管理对比:什么时候选 Store,什么时候选 Atom

HTMLPAGE 团队
13 分钟阅读

Zustand 和 Jotai 都很轻,但它们解决的问题并不完全一样。本文从心智模型、更新粒度、调试体验、团队协作和适用场景出发,讲清两者的真正区别。

#Zustand #Jotai #State Management #React #Comparison

Zustand 和 Jotai 经常一起被提起,因为它们都轻量、上手快,也都比传统状态库更少样板代码。

但很多团队在选型时会犯一个错误:把它们都归类为“轻量状态管理”,然后只比 API 喜好。

真正该比较的不是语法,而是心智模型。

  • Zustand 更像“一个个 store”
  • Jotai 更像“一个个 atom 组成的状态图”

如果你先把这个差异看清楚,后面的选型会容易很多。

Zustand 适合集中状态入口

Zustand 的优势在于直观:

  • 定义一个 store
  • 把状态和修改方法集中放在一起
  • 组件按需订阅

这种模式特别适合:

  • 业务域清晰
  • 团队需要统一入口
  • 想快速让大多数开发者上手

对很多 SaaS 后台和中型 React 项目来说,Zustand 的学习和维护成本都比较低。

Jotai 适合把状态拆成细粒度原子

Jotai 的核心价值不是“更函数式”,而是更细粒度。

当你有大量局部状态、派生关系和组合逻辑时,atom 模型会更自然:

  • 每块状态都更小
  • 派生关系表达更直接
  • 某些局部更新的订阅范围更好控制

它更适合:

  • 编辑器、配置器、复杂交互面板
  • 状态组合和派生关系很多的页面

真正的区别在 4 个维度

维度ZustandJotai
心智模型集中 store原子状态图
组织方式更像业务模块更像状态片段组合
上手成本更低略高
复杂派生表达够用更自然

所以你不是在选“哪个更高级”,而是在选“哪个更贴合团队的状态组织方式”。

什么时候 Zustand 更稳

如果项目具备下面这些特征,我会优先考虑 Zustand:

  • 团队成员多,希望入口统一
  • 主要是典型业务状态,而不是复杂状态图
  • 需要快速重构旧项目,降低迁移心智负担

Zustand 的好处在于它很少让团队为了“状态抽象”本身开很多会。

什么时候 Jotai 更合适

如果你面临的是:

  • 一个页面里有大量可组合状态
  • 不同模块需要精细共享部分状态
  • 派生逻辑和局部订阅是核心矛盾

那 Jotai 的 atom 模型通常更自然。

尤其是复杂编辑器、筛选器、低代码面板这类场景,Jotai 很容易表达“状态片段之间的关系”。

失败案例:把 atom 模型硬套给普通后台页面

最常见的误用是:

  • 团队只是做普通业务后台
  • 状态并不复杂
  • 但因为看到了更细粒度的抽象能力,就把大量简单状态拆成 atom

结果是:

  • 文件数量激增
  • 新同事读代码成本上升
  • 状态虽然“很优雅”,但业务速度反而下降

反过来也一样:如果你在做高交互编辑器,却坚持把所有状态塞进一个大 store,后期也会非常痛苦。

调试与协作也要纳入选型

团队选型不能只看个人偏好,还要看:

  • reviewer 是否能快速理解状态流
  • 新人能否迅速定位数据来源
  • 测试是否容易围绕状态契约来写

一般来说:

  • Zustand 更容易被多数 React 团队快速接受
  • Jotai 更适合愿意接受更强状态建模思维的团队

一份可直接复用的判断框架

如果你的答案大多偏左,优先 Zustand;偏右,优先 Jotai:

问题更偏 Zustand更偏 Jotai
需要统一入口吗
状态组合关系复杂吗
团队更重视上手成本吗
页面交互更像编辑器吗

总结

Zustand 和 Jotai 没有绝对输赢,只有是否适配。普通业务状态、团队协作优先时,Zustand 往往更稳;复杂状态图、细粒度组合和高交互场景下,Jotai 会更自然。

进一步阅读: