# Zustand 中文进阶教程

URL: https://caijiao.org/zustand/
Source: docs/zustand/index.md
Description: 来自Zustand官网的Zustand中文教程，本教程涵盖 Zustand 从入门到精通的全部内容，包括 TypeScript 集成、切片模式、中间件应用及性能优化实战。

![Zustand Banner](/images/zustand/bear.webp)

欢迎来到 **Zustand 进阶教程**。[Zustand](./) 是一个轻量、快速且可扩展的状态管理解决方案，它基于 Hooks 设计，没有 Redux 的繁琐样板代码，也没有 Context API 的性能陷阱。

本教程旨在帮助开发者从基础开始，逐步过渡到能够应对复杂业务场景的工程化实践。

## 📖 教程大纲

### 1. 入门：快速上手

* **[为什么是 Zustand？](./guide/introduction)** - 对比 Redux、Context API，了解 Zustand 的优势。
* **[环境搭建与第一个 Store](./guide/getting-started)** - 安装并编写你的第一个状态中心。
* **[State 与 Actions](./guide/core-concepts)** - 学习如何定义状态和修改状态的方法。

### 2. 进阶：核心技巧

* **[性能优化](./guide/performance-optimization)** - 深入理解 Selector 机制与 `shallow` 浅比较。
* **[异步逻辑处理](./guide/async-actions)** - 如何在 Store 中优雅地处理 API 请求。
* **[持久化中间件 (Persist)](./guide/middleware-persist)** - 几行代码实现数据自动同步到 LocalStorage。
* **[Immer 集成](./guide/middleware-immer)** - 像直接修改对象一样处理不可变状态。

### 3. 高级：工程化实践

* **[TypeScript 完美支持](./guide/typescript)** - 打造类型安全的 Store。
* **[切片模式 (Slice Pattern)](./guide/slice-pattern)** - **核心推荐**：应对大型项目的状态拆分方案。
* **[跨环境调用](./guide/vanilla-js-usage)** - 在 React 组件之外（如 Axios 拦截器）操作状态。
* **[自动化测试](./guide/testing)** - 为你的 Store 逻辑编写单元测试。

## 🔥 为什么推荐使用 Zustand？

* **极简主义**：API 极其精简，学习曲线几乎为零。
* **非侵入性**：不需要像 Context 那样在顶层包裹大量的 `Provider`。
* **响应式粒度**：仅在组件所使用的特定状态发生变化时才触发重渲染。
* **原生支持 TS**：对 TypeScript 的支持非常友好。

> [为什么选择 Zustand？](./guide/introduction)

## 🚀 快速代码演示

只需三步，即可完成状态管理配置：

```typescript
// 1. 创建 Store
import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

// 2. 在组件中使用
function Counter() {
  const { count, inc } = useStore()
  return (
    <button onClick={inc}>{count}</button>
  )
}
```