📦 Zustand State — 状态管理助手
v1.1.0为 React 与原生 JavaScript 提供 Zustand 状态管理的速查文档与代码示例，涵盖 store 创建、selector 使用、localStorage 持久化、devtools 集成等常见场景，帮助开发者快速上手并规范实践。
by 详细分析 ▾
运行时依赖
版本
- 扩展文档，新增使用示例、参考模式与性能提示。 - 增加状态更新、selector、浅比较及 React 外访问章节。 - 提供 React 与原生 JavaScript 的速查代码。 - 链接至中间件、模式与 TypeScript 的额外文档。 - 更新描述以概括触发条件与使用场景。
安装命令
点击复制技能文档
# Zustand 状态管理 极简状态管理——无需 Provider，样板代码最少。 ## 快速参考 ``typescript 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 })), })) // In component - select only what you need const bears = useBearStore((state) => state.bears) const increase = useBearStore((state) => state.increase) ` ## 状态更新 `typescript // Flat updates (auto-merged at one level) set({ bears: 5 }) set((state) => ({ bears: state.bears + 1 })) // Nested objects (manual spread required) set((state) => ({ nested: { ...state.nested, count: state.nested.count + 1 } })) // Replace entire state (no merge) set({ bears: 0 }, true) ` ## 选择器与性能 `typescript // Good - subscribes only to bears const bears = useBearStore((state) => state.bears) // Bad - rerenders on any change const state = useBearStore() // Multiple values with useShallow (prevents rerenders with shallow comparison) import { useShallow } from 'zustand/react/shallow' const { bears, fish } = useBearStore( useShallow((state) => ({ bears: state.bears, fish: state.fish })) ) // Array destructuring also works const [bears, fish] = useBearStore( useShallow((state) => [state.bears, state.fish]) ) ` ## 在组件外访问 `typescript // Get current state (non-reactive) const state = useBearStore.getState() // Update state useBearStore.setState({ bears: 5 }) // Subscribe to changes const unsub = useBearStore.subscribe((state) => console.log(state)) unsub() // unsubscribe ` ## Vanilla Store（无 React） `typescript 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)) ` ## 额外文档 - Middleware：查看 references/middleware.md 了解 persist、devtools、immer - Patterns：查看 references/patterns.md 了解 slices、测试、最佳实践 - TypeScript：查看 references/typescript.md 了解高级类型模式 ## 关键模式 | 模式 | 使用场景 | |---------|-------------| | Single selector | 只需一段状态 | | useShallow | 多个值，避免重渲染 | | getState() | React 外部、事件处理器 | | subscribe()`` | 外部系统、日志 | | Vanilla store | 非 React 环境 |