前端技术演化史

Zustand

Properties1
tags状态管理, zustand, 极简, hooks, poimandres

7分钟阅读

🐻 Zustand

一句话定性

Zustand(德语”状态”)是对 Redux 样板的一次彻底反叛:没有 Provider、没有 action 常量、没有 reducer 仪式,一个 hook 搞定全局状态。它代表了 React 社区”够用就好、能省则省”的极简主义浪潮——把状态管理从”架构工程”还原成”一个会共享的 store”。

一、它是什么 & 出现的时代

Zustand 是一个极简的 React 状态管理库,由 Poimandres(pmnd.rs,也就是 react-three-fiber、Jotai、Valtio 等明星库背后的开源团队)开发,在 2018-2023 工程化时代迅速流行。

它的定位是”最小可用的全局状态”:你不需要为了共享一个值而搭建一整套 Redux 基础设施。

名字

Zustand 是德语的 “state”(状态),发音类似 “tsoo-shtahnt”。Poimandres 团队偏爱用非英语单词命名(Jotai 是日语”状态”,Valtio 是芬兰语”状态”)。

二、为什么会出现(解决上一代什么痛点)

它就是冲着 Redux 的痛点来的

Redux 的样板代码被诟病已久(详见 Redux副作用):

  1. 要写 action types、action creators、reducers、dispatch……”改个值写三个文件”。
  2. 必须用 <Provider> 包裹整个应用,组件还要 connect/useSelector。
  3. 异步要靠中间件(thunk/saga),又是一层。

同时,React Hooks(2019)普及后,大家习惯了”用一个 hook 取数据”的简洁心智,Redux 的”配置对象 + HOC”风格显得格格不入。

Zustand 的第一性回答:全局状态的本质,就是”一个所有组件都能读写、变了就通知它们的对象”。 不需要那么多仪式,一个带订阅的 store + 一个 hook 就够了。

三、核心机制 & 为什么流行

极简到只有一个 hook

import { create } from 'zustand'
 
const useCart = create((set) => ({
  items: [],
  add: (x) => set((s) => ({ items: [...s.items, x] })),  // 直接定义动作
}))
 
// 任意组件,无需 Provider、无需 connect:
function Cart() {
  const items = useCart((s) => s.items)   // 像普通 hook 一样用
  const add   = useCart((s) => s.add)
  ...
}

它的核心设计选择

每一条都是对 Redux 的"减法"

  1. 无 Provider:store 在组件树之外创建,组件直接 import 使用——告别 <Provider> 包裹。
  2. hooks 风格:useStore(selector) 一行取状态,符合 Hooks 时代直觉。
  3. 没有 action/reducer 仪式:动作就是 store 里的普通函数,内部调 set 改状态。
  4. selector 精确订阅:组件只订阅自己 select 的那部分,变了才重渲染,性能默认良好。
  5. 极小体积、零依赖:核心只有几 KB。
  6. 不强制不可变写法,也兼容中间件(immer、persist、devtools 都是可选插件,要才加)。

为什么在 React 社区流行

  • 学习成本几乎为零:会用 useState 就会用 Zustand。
  • 渐进式:小项目直接用,需要时再加 immer/persist/devtools 中间件——复杂度按需付费(奥卡姆剃刀)。
  • 可在 React 外使用:store 是独立的,非组件代码也能读写。

四、带来的新问题 / 副作用

极简的另一面

  1. 弱约束 = 大团队风险:“哪里都能 set”,缺少 Redux 那种”只能通过 action 改”的强约束,超大团队/复杂业务里可能失去可追溯性(二阶效应)。
  2. 缺少统一范式:Redux 有一整套被广泛认同的最佳实践;Zustand 太自由,团队需要自己约定怎么组织 store。
  3. 复杂异步/派生逻辑需要自己设计模式,不像 RTK Query 那样开箱即用。
  4. “自由”可能滑向混乱:小项目的福音,可能是大项目的隐患——选型要按规模权衡。

五、现状 / 演化

  • Zustand 已成为 React 社区中小型项目和很多大型项目的主流选择,人气持续走高。
  • 与同门的 Jotai(原子化)、Valtio(代理响应式)形成 Poimandres 的”状态三剑客”,覆盖不同口味。
  • 它和 Pinia(Vue 侧)遥相呼应,共同体现了 钟摆在近年**明显摆向”极简 + 低样板”**的大势。

六、对后续技术的影响(因果链)

 [[Redux]] 样板太多 + [[React]] Hooks(2019)普及
                       │
                       ▼  (做减法,彻底反叛)
                 Zustand(Poimandres)
                       │
   ┌───────────────────┼───────────────────────┬───────────────────┐
   ▼                   ▼                       ▼                   ▼
 无 Provider         hooks 风格              无 action/reducer    selector 精确订阅
   │                   │                       │                   │
   ▼                   ▼                       ▼                   ▼
 告别包裹            会 useState 就会用       复杂度按需付费        性能默认良好
   │
   ▼
 引领 React 状态"极简主义"潮流
   │
   ├──► 同门 Jotai(原子化)/ Valtio(代理响应式)
   │
   └──► 与 [[Vuex-Pinia\|Pinia]] 共同代表"去样板"大势
         (钟摆从 Redux 一极摆向极简一极)

历史地位

Zustand 是 钟摆在 Redux 一端被推到极致后,回摆到”极简”一端的标志性产物。它证明了一件事:大多数应用并不需要 Redux 那么重的架构,一个带订阅的 store + 一个 hook,就能解决 80% 的全局状态需求。它和 MobX、Vuex-Pinia 一起,把状态管理从”必须很复杂”的迷信中解放出来——复杂度应该匹配问题,而不是匹配潮流。

🔗 相关:状态管理演进史 | Redux | MobX | Vuex-Pinia | React | 2018-2023 工程化时代

关系图谱

反向链接