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，了解高级类型定义模式

关键使用模式

守门机制（persist 和 devtools）

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

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