Zustand State Management 是一个极简状态管理方案,特点是无须 Provider、样板代码极少,可同时用于 React 和原生 JavaScript 环境。
用途
用于在 React 应用或非 React 的 JavaScript 环境中创建和管理共享状态。官方示例以 create 函数直接声明状态与更新方法,组件内按需选取状态,不依赖上下文 Provider 包裹。
主要能力
- 创建 store:通过
create定义状态与操作方法,例如 bears 计数与 increase 方法。 - 状态更新:
set({ bears: 5 })扁平更新;set((state) => ({ bears: state.bears + 1 }))基于前值更新;嵌套对象需手动展开(nested: { ...state.nested, count: state.nested.count + 1 });set({ bears: 0 }, true)整体替换且不合并。 - 选择器与性能:推荐
useBearStore((state) => state.bears)只订阅所需字段;直接useBearStore()会在任意变化时重渲染;多值场景使用useShallow(从zustand/react/shallow引入)做浅比较以避免多余重渲染,对象与数组解构均可。 - 组件外访问:
useBearStore.getState()非响应式读取,useBearStore.setState({ bears: 5 })更新,useBearStore.subscribe((state) => console.log(state))订阅并返回取消订阅函数。 - Vanilla store:从
zustand/vanilla引入createStore,具备getState、setState、subscribe,适用于非 React 环境。
使用方式
文档中的关键模式对应场景:单个选择器用于只需要一项状态;useShallow 用于多值且需避免重渲染;getState() 用于组件外或事件处理器;subscribe() 用于外部系统或日志;vanilla store 用于非 React 环境。
中间件与适用限制
persist、devtools、immer 等中间件与切片、测试、最佳实践模式、TypeScript 高级类型分别见 references/middleware.md、references/patterns.md、references/typescript.md。合并使用 persist 或 devtools 的代码前需通过相应检查:persist 要求持久化键明确(通过 partialize 或经过审核的全状态快照),且写入存储的 JSON 不能包含认证令牌、API 密钥或其他机密;devtools 在发布包中应仅在开发环境启用(环境门控),或在 PR 中留下说明其保留在生产的理由。
资料未提供关于价格、收费模式、平台支持范围或性能基准的具体信息。