Zustand 状态管理

极简状态管理——无需提供者，最少样板代码。

快速参考

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 })),
}))

// 在组件中——只选择你需要的内容
const bears = useBearStore((state) => state.bears)
const increase = useBearStore((state) => state.increase)

状态更新

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

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

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

选择器与性能

typescript
// 良好——仅订阅 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])
)

在组件外部访问

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

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

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

原生 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))

附加文档

• - 中间件：参见 references/middleware.md 了解持久化、开发者工具、immer
• 模式：参见 references/patterns.md 了解切片、测试、最佳实践
• TypeScript：参见 references/typescript.md 了解高级类型模式

关键模式