SuperAPI AI 工具集

zustand-state

前端与建站

查看项目

更新于 10-15 15:46

技能介绍

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 中留下说明其保留在生产的理由。

资料未提供关于价格、收费模式、平台支持范围或性能基准的具体信息。