Zustand Zustand 状态库
最后更新：2026-10-28
Zustand Zustand 状态库
Zustand 是极简全局状态库：create 定义一个 store，组件里像自定义 Hook 一样调用，跨组件共享且天然绕开 Provider。核心只有 set/get 两个函数，没有样板代码，是中小项目替代 Redux 的热门选择。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | 第三方库 |
| 引入版本 | Zustand v4 / v5 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { create } from 'zustand'
const useStore = create((set, get) => ({
count: 0, // 状态
inc: () => set(s => ({ count: s.count + 1 })), // 动作
reset: () => set({ count: 0 })
}))
// 组件里（无需 Provider）
const count = useStore(s => s.count) // 订阅切片，精确更新
const inc = useStore(s => s.inc)⚙️ 参数
| selector | 调用 store Hook 时传入的状态选择函数，如 s => s.count；省略则订阅整个 store，任何变化都重渲染。 |
|---|
返回值：create 返回一个 Hook：调用返回所选状态切片；set 合并状态并触发订阅组件更新，get 读取最新状态。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点 A 累加，B 组件的数字同步变化——两个组件没有共同的父级传 props，靠外部 store 同步状态，这正是 Zustand 的原理（模拟演示）。💡 要点
💡 提示 selector 返回对象时（s => ({ a: s.a, b: s.b })）每次都是新引用会导致多余渲染，配合 shallow 比较或拆成多次调用。
ℹ️ 说明 中间件 persist 可把 store 同步到 localStorage，devtools 中间件接入 Redux DevTools，都是一行 import 的事。
⚠️ 注意 set 是浅合并：嵌套对象要自己展开 set(s => ({ deep: { ...s.deep, x: 1 } }))，别指望自动深合并。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q Zustand 为什么不需要 Provider？
A 状态存在模块级外部变量里，不依赖 Context；组件通过 useSyncExternalStore 直接订阅，天然跨组件共享。
Q 状态持久化怎么做？
A import { persist } from 'zustand/middleware'，在 create 里包一层 persist(fn, { name: 'key' })，自动读写 localStorage。
Q 异步动作怎么写？
A 动作就是普通函数：fetchUser: async () => { const data = await api(); set({ user: data }) }，没有 thunk 与 reducer 的区分。
