Zustand

简介

Zustand 是一个面向 React 的小型、快速、可扩展的状态管理库，基于简化的 Flux 思想，以 Hook 作为主要使用方式。它没有繁琐的样板代码，也不强制项目结构，因此常被用来替代 Redux 或 React Context。

核心特点

• Store 即 Hook：通过 create 创建 store，返回的本身就是一个 Hook，可直接在组件中使用。
• 无需 Provider：不像 Context 那样需要包裹组件树，任意组件都能直接访问。
• 选择器订阅：默认使用严格相等比较，只订阅需要的状态片段，减少不必要的重渲染。
• 组件外读写：提供 getState、setState、subscribe 等工具方法，便于在非组件环境操作状态。
• 中间件生态：内置 subscribeWithSelector、persist、devtools 等中间件，可按需组合。

快速上手

先创建一个 store：

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

然后在组件中直接使用：

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

常用技巧

选取多个状态片段

需要同时取多个字段时，可配合 useShallow 避免对象或数组每次都是新引用而触发重渲染：

import { useShallow } from 'zustand/react/shallow'

const { nuts, honey } = useBearStore(
  useShallow((state) => ({ nuts: state.nuts, honey: state.honey })),
)

异步 action

Zustand 不限制 action 是否异步，准备好数据后调用 set 即可：

const useFishStore = create((set) => ({
  fishies: {},
  fetch: async (pond) => {
    const response = await fetch(pond)
    set({ fishies: await response.json() })
  },
}))

组件外访问状态

const paw = useDogStore.getState().paw
const unsub = useDogStore.subscribe(console.log)
useDogStore.setState({ paw: false })
unsub()

与 Redux / Context 的对比

• 相比 Redux：更少样板代码、不强制 action/reducer 结构、无需 Provider。
• 相比 Context：集中式管理、按需订阅、仅在相关状态变化时重渲染。

适用建议

Zustand 适合希望以低心智负担管理 React 全局状态的团队。项目规模变大时，建议自行约定 store 拆分与命名规范，并结合中间件处理持久化、调试等需求。