zustand

Zustand 是一个为 React 设计的小巧、快速、可扩展的状态管理库，核心特点是 API 简洁、几乎无模板代码。

• 创建 Store: 使用 create((set, get) => ({...})) 方法。

  • set(partialState | (state => partialState)): 用于更新状态，支持对象合并或函数式更新。

  • get(): 用于在 actions 内部或 store 外部获取当前状态。

• 使用 Store (Hooks): create 返回一个自定义 Hook。推荐使用**选择器 (selector)** const value = useStore(state => state.value) 来订阅 store 的特定部分，这样只有当该部分状态变化时组件才会重渲染，以优化性能。

• Actions: 通常直接在 create 返回的对象中定义为方法，内部调用 set 来更新状态。天然支持异步 actions。

• 中间件 (Middleware): 支持通过中间件增强功能，例如：

  • devtools: 集成 Redux DevTools 进行调试。

  • persist: 将状态持久化到 localStorage 等。

  • immer: 使用 Immer 进行更方便的不可变状态更新。

• 核心优势: 简单易学、代码量少、性能良好（按需渲染）、灵活性高（可创建多 stores）、优秀的 TypeScript 支持。适用于各种规模的项目，特别是当 Context API 不够用而 Redux 又显得过于复杂时。

import { create } from 'zustand'
const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}))