zustand介绍

zustand 是一个 轻量级的 React 状态管理库，设计理念是“简单、快速、无样板（boilerplate-free）”，可以理解为 比 Redux 简单很多、比 Context 更灵活 的状态管理方案。

1. 核心特点

1. 极简 API

   • 创建一个 store，只需要一个函数
   • 没有 reducer、action type 这些复杂概念

2. 无样板代码

   • 不需要 Provider 层层包裹，也不需要写繁琐的 action

3. 响应式更新

   • 组件只会重新渲染它用到的状态，性能友好

4. 支持中小型项目，也能扩展到大型项目

   • 内部用 useSyncExternalStore 实现，可与 React18 完美配合
   • 支持中间件（持久化、异步、Redux DevTools 等）

2. 安装

npm install zustand

3. 基本用法

创建 Store

在 store.js 中：

import { create } from 'zustand'

// 定义 store
const useBearStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
  removeAll: () => set({ bears: 0 })
}))

export default useBearStore

在组件中使用

import React from 'react'
import useBearStore from './store'

function App() {
  // 选择性地订阅状态
  const bears = useBearStore((state) => state.bears)
  const increase = useBearStore((state) => state.increase)

  return (
    <div>
      <h1>{bears} 🐻</h1>
      <button onClick={increase}>Add one</button>
    </div>
  )
}

export default App

特点：

• 组件只会因为 bears 变化 而重新渲染，不会因为 removeAll 函数变化渲染
• zustand 内部通过 useSyncExternalStore 精准控制更新

4. 支持异步和中间件

异步操作

const useStore = create((set) => ({
  data: [],
  fetchData: async () => {
    const res = await fetch('/api/data')
    const json = await res.json()
    set({ data: json })
  }
}))

组件中：

const { data, fetchData } = useStore()
useEffect(() => { fetchData() }, [])

持久化状态（LocalStorage）

import { create } from 'zustand'
import { persist } from 'zustand/middleware'

const useStore = create(persist(
  (set) => ({
    theme: 'light',
    toggleTheme: () => set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' }))
  }),
  { name: 'theme-storage' } // localStorage key
))

刷新页面后，状态依旧存在。

5. 常见场景

1. 全局状态共享

   • 比 useContext 更轻便，无需层层 Provider

2. 游戏、图表、复杂交互

   • 状态更新频繁时，zustand 的选择性订阅可以减少渲染

3. 结合 React Query、Redux Toolkit 等

   • 可以做本地 UI 状态管理，远程数据用 React Query

6. 总结

• Zustand 的本质：一个小巧的响应式全局 store，API 风格类似 React Hooks。
• 适合场景：中小项目全局状态管理、需要高性能订阅的 UI。
• 优点：无模板代码、性能好、API 简洁。
• 缺点：对大型团队协作，缺少 Redux 那种严格规范和工具链（不过可以配合中间件）。