使用 Zustand 实现 React 状态管理的入门指南

使用 Zustand 实现 React 状态管理的入门指南

一、简介

Zustand 是一个轻量级的状态管理库，专为 React 应用设计。它通过简洁的 API 提供了灵活的状态管理方案，无需复杂的配置即可实现跨组件的状态共享。本文将通过三个步骤，手把手教你如何在 React 项目中集成 Zustand。

---

二、安装与初始化

1. 安装依赖

通过 npm 或 yarn 安装 Zustand：

npm install zustand
# 或
yarn add zustand

---

2. 创建 Store

Zustand 的核心概念是 store，它本质上是一个可共享的 Hook。创建 store 时，可以包含状态、派生值和操作方法。状态更新必须遵循不可变原则，确保组件响应式更新。

import { create } from 'zustand'

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

关键点解析：

• create 函数接收一个初始化函数，返回 store 对象。
• set 是状态更新函数，支持两种调用方式：
  • 直接传递新状态对象（适用于简单覆盖）
    set({ bears: 0 })
  • 传递函数（适用于基于当前状态计算新值）
    set(state => ({ bears: state.bears + 1 }))
• 所有状态更新都遵循不可变原则，确保 React 的响应式更新机制生效。

---

三、在组件中使用 Store

1. 读取状态

通过 selector 选择目标状态，组件仅在对应状态变化时重新渲染：

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

性能优化：

• Zustand 内部使用 memoization 技术，当选择器返回的值未变化时，组件不会重新渲染。
• 推荐始终使用 selector 提取具体状态，而非直接访问整个 state。

---

2. 更新状态

通过选择器绑定操作方法：

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

最佳实践：

• 将状态变更逻辑封装在 store 中，避免组件内直接修改状态。
• 对于异步操作，可在 store 中定义 action：

  fetchBearData: async () => {
    const data = await fetch('/api/bears')
    set({ bears: data.count })
  }
  

---

四、高级用法与技巧

1. 多 Store 组合

对于复杂应用，可以通过组合多个 store 实现模块化管理：

const useUserStore = create((set) => ({
  user: null,
  login: (user) => set({ user }),
}))

---

2. 中间件集成

Zustand 支持中间件扩展功能，例如调试工具：

import { devtools } from 'zustand/middleware'

const useBearStore = create(devtools((set) => ({
  // ...
})))

---

3. 持久化存储

结合 zustand/middleware 实现状态持久化：

import { persist } from 'zustand/middleware'

const useBearStore = create(
  persist(
    (set) => ({ bears: 0 }),
    { name: 'bear-storage' }
  )
)

---

五、对比与选择

特性	Zustand	Redux Toolkit
API 简洁度	⭐⭐⭐⭐⭐	⭐⭐⭐
无需 Context Provider	✅	❌（需搭配 React-Redux）
开发体验	极简，适合中小型项目	更适合大型复杂项目
学习成本	⭐⭐	⭐⭐⭐

---

六、总结

通过本文你可以快速掌握 Zustand 的核心用法：

1. 通过 create 初始化 store，封装状态与操作
2. 使用 selector 选择具体状态，实现精准渲染
3. 利用组合模式构建复杂应用，结合中间件扩展功能

Zustand 以其极简的设计和强大的灵活性，成为 React 状态管理的优秀选择。无论是小型项目还是需要精细控制的中型应用，Zustand 都能提供高效的解决方案。

示例代码仓库：GitHub
官方文档：zustand.docs.pmnd.rs