Zustand State_开发编程 skill-PHP中文网

Zustand State

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

Zustand 状态管理，适用于 React 与原生 JavaScript；用于创建 store、使用选择器、将状态持久化到 localStorage、集成 devtools 等场景。

Zustand州管理 1. minimal州管理 - 没有提供者, 最低锅炉板.

功能概述

Zustand州管理 1. minimal州管理 - 没有提供者, 最低锅炉板.是一项面向实际任务的技能，主要用于QQ. 快速引用. 州更新. 选择器和性能. 访问外部组件.；Vanilla Store (No React).；

核心要点

Addit。
它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。

使用与执行

该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；

结果检查与注意事项

若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

Zustand 状态管理

极简状态管理方案 —— 无需 Provider，样板代码极少。

快速参考

import { create } from 'zustand';

interface BearState {
  bears: number;
  increase: (by: number) => void;
}

const useBearStore = create()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}));

// 在组件中 —— 仅选择所需字段
const bears = useBearStore((state) => state.bears);
const increase = useBearStore((state) => state.increase);

状态更新

// 平铺式更新（单层自动合并）
set({ bears: 5 });
set((state) => ({ bears: state.bears + 1 }));

// 嵌套对象（需手动展开）
set((state) => ({
  nested: { ...state.nested, count: state.nested.count + 1 }
}));

// 替换整个状态（不进行合并）
set({ bears: 0 }, true);

选择器与性能

// 推荐 —— 仅订阅 bears 字段
const bears = useBearStore((state) => state.bears);

// 不推荐 —— 任何状态变更都会触发重渲染
const state = useBearStore();

// 使用 useShallow 同时获取多个值（通过浅比较避免不必要的重渲染）
import { useShallow } from 'zustand/react/shallow';

const { bears, fish } = useBearStore(
  useShallow((state) => ({ bears: state.bears, fish: state.fish }))
);

// 数组解构方式同样有效
const [bears, fish] = useBearStore(
  useShallow((state) => [state.bears, state.fish])
);

在组件外部访问状态

// 获取当前状态（非响应式）
const state = useBearStore.getState();

// 更新状态
useBearStore.setState({ bears: 5 });

// 订阅状态变化
const unsub = useBearStore.subscribe((state) => console.log(state));
unsub(); // 取消订阅

纯 JavaScript Store（不依赖 React）

import { createStore } from 'zustand/vanilla';

const store = createStore((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}));

store.getState().bears;
store.setState({ bears: 10 });
store.subscribe((state) => console.log(state));

补充文档

中间件：参见 references/middleware.md，了解 persist、devtools、immer 的使用方法
模式指南：参见 references/patterns.md，了解分片（slices）、测试、最佳实践等内容
TypeScript：参见 references/typescript.md，了解高级类型定义模式

关键使用模式

模式	适用场景
单一选择器	仅需读取一个状态字段
`useShallow`	需同时读取多个字段，且希望避免因无关字段变更导致的重渲染
`getState()`	在 React 组件外部使用（例如事件处理器、副作用逻辑等）
`subscribe()`	集成外部系统（如日志记录、分析上报等）
Vanilla store	运行于非 React 环境（如服务端、CLI 工具、Web Worker 等）

守门机制（persist 和 devtools）

在合入使用以下中间件的代码前（相关配置请参见 references/middleware.md）：

persist —— 仅当满足以下条件时允许通过：持久化的键名明确指定（通过 partialize 或经人工审查的完整状态快照），且写入存储的 JSON 数据中不包含认证令牌、API 密钥或其他敏感信息。
发布版本中启用 devtools —— 仅当满足以下任一条件时允许通过：DevTools 仅在开发环境运行（通过环境变量控制），或你在 PR 中附上一行说明，解释其为何需在生产环境中保持启用。