https://www.reddit.com/r/reactjs/comments/wec4oo/zustand_vs_jotai_vs_valtio_which_state_management/
https://x.com/dai_shi/status/1343694177884721152
https://react-community-tools-practices-cheatsheet.netlify.app/state-management/poimandres
| zustand | jotai | valtio | |
|---|---|---|---|
| 状态模型 | 中心化 (Centralized)。所有状态存在于一个统一的 store 中。 | 分布式/原子化 (Decentralized)。状态被拆分成独立、零散的 atom。 | 代理对象 (Proxy Object)。一个或多个可直接修改的 JS 对象。 |
| 更新方式 | 不可变 (Immutable)。通过 set 函数返回一个全新的状态对象。 | 不可变 (Immutable)。类似 setState，传入新值或更新函数。 | 可变 (Mutable)。直接修改代理对象的属性，如 state.count++。 |
| 性能特点 | 基于选择器 (Selector-based)。组件只会订阅 store 中被选择的部分，只有当这部分变化时才重新渲染。 | 原子级更新 (Atomic)。组件订阅特定的 atom，只有当这个 atom 变化时才重新渲染。粒度非常细。 | 基于代理追踪 (Proxy-based tracking)。组件只会订阅它在渲染期间访问过的属性，只有当这些属性变化时才重新渲染。粒度也非常细。 |
| 在 React 外部使用 | 非常容易。Store 本身是独立的，有 getState, setState, subscribe 等方法。 | 较难。设计上与 React 紧密耦合，需要在 store 上下文中操作。 | 非常容易。Proxy 对象本身就是 JS 对象，可以用 subscribe 在任何地方监听变化。 |
| 代码分割 | Store 是全局的，但可以懒加载 store 的一部分（slices）。 | 天生友好。Atom 可以在需要它们的组件文件中定义，天然支持代码分割。 | 天生友好。Proxy 状态也可以在任何需要的地方定义和导入。 |
| 生态与中间件 | 支持中间件。内置 devtools, persist, immer 等常用中间件。生态成熟。 | 概念上没有中间件，但有许多工具/集成，如 jotai-immer, jotai-valtio, jotai-query 等。 | 概念上没有中间件，但 subscribe 和 watch 提供了强大的基础，可以构建类似功能。 |