---

Zustand 状态管理库详解

1. 基础概念

什么是 Zustand？

Zustand（德语 “状态”）是一个轻量级、高性能的 React 状态管理库，由 React 社区 开发，旨在提供比 Redux 更简单的状态管理方案。 核心特点：

• 极简 API：仅需 create + useStore 即可使用。
• 无样板代码：无需 Provider 包裹组件。
• 高性能：自动优化组件重渲染。
• 中间件支持：可扩展 persist、devtools 等功能。

与 Redux/MobX 对比

特性	Zustand	Redux	MobX
复杂度	⭐️	⭐️⭐️⭐️	⭐️⭐️
样板代码	极少	多（Action/Reducer）	中等
性能	高（按需更新）	中等	高（响应式）
学习曲线	低	高	中等

---

2. 使用指南

安装

npm install zustand
# 或
yarn add zustand

基础用法

(1) 创建 Store

import { create } from 'zustand';

// 定义 store
const useCounterStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}));

(2) 在组件中使用

function Counter() {
const { count, increment } = useCounterStore();
return (
<div>
<button onClick={increment}>+</button>
<span>{count}</span>
</div>
);
}

高级功能

(1) 选择器优化（避免不必要的重渲染）

const count = useCounterStore((state) => state.count); // 仅当 count 变化时重渲染

(2) 异步操作

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

(3) 中间件（DevTools + 持久化）

import { devtools, persist } from 'zustand/middleware';

const useStore = create(
devtools(
persist(
(set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}),
{ name: 'count-storage' } // 本地存储的 key
)
)
);

---

3. 实战经验

最佳实践

1. 按业务拆分 Store 避免单一 Store 过大，例如：

// stores/counter.js
// stores/user.js

2. 使用 Immer 简化不可变更新

import { produce } from 'immer';
set(produce((state) => { state.count += 1 }));

3. TypeScript 支持

interface CounterState {
count: number;
increment: () => void;
}
const useCounterStore = create<CounterState>()((set) => ({ ... }));

常见问题

• Q: 如何避免中间件类型错误？ A: 使用 combine 中间件顺序：

create<T>()(devtools(persist(...)));

• Q: 为什么组件不更新？ A: 检查是否错误地解构了状态（应使用选择器）：

// ❌ 错误（会导致所有状态变化触发更新）
const { count } = useCounterStore();
// ✅ 正确
const count = useCounterStore((state) => state.count);

---

4. 经验总结

适用场景

• 中小型应用：快速搭建状态管理。
• 替代 Context API：避免多层嵌套 Provider。
• 高性能需求：如游戏、动画等需要精细控制渲染的场景。

局限性

• 不适合超大型应用：缺乏 Redux 的严格架构约束。
• 调试工具较弱：依赖第三方中间件（如 Redux DevTools）。

---

5. 信息参考

• 官方文档：zustand-demo.pmnd.rs
• GitHub：github.com/pmndrs/zustand
• 中间件列表：
• devtools：集成 Redux DevTools。
• persist：数据持久化（localStorage）。
• immer：简化不可变更新。

---

Related notes

• 所属 MOC: React MOC