Zustand 简介

相关源文件

• .github/workflows/test-multiple-versions.yml
• package.json
• src/index.ts
• src/middleware.ts
• tests/middlewareTypes.test.tsx
• tests/types.test.tsx
• tsconfig.json

Zustand（德语意为“状态”）是一个极简的状态管理库，适用于 React 应用，旨在为应用状态管理提供一种简单而强大的方法。本文档介绍了 Zustand 的核心概念、架构和基本用法。有关详细的 API 文档，请参阅API 参考，有关与 React 的具体用法，请参阅与 React 的用法。

目的与理念

Zustand 的创建旨在通过提供一种轻量级、非主观的解决方案，专注于简洁性和易用性，来解决状态管理中的常见痛点。其核心理念包括：

• 极简的 API 表面：Zustand 只暴露了有效状态管理所必需的要素
• 基于 Hook 的方法：利用 React Hook 来消费状态
• 无样板代码：消除了其他状态库中常见的 reducer、action 类型和 dispatcher
• 中间件可扩展性：核心功能非常精简，可以通过中间件提供额外功能

来源：package.json2-4

核心架构

Zustand 的基础围绕一个简单的 store 概念构建，并在 vanilla 状态管理和 React 特定绑定之间进行分离。

其架构包括：

1. Vanilla Core：框架无关的状态管理实现
2. React Bindings：通过 Hook 将 vanilla store 连接到 React 组件
3. Middleware System：通过可组合的中间件扩展功能
4. Equality Functions：用于防止不必要重新渲染的性能优化

来源：src/index.ts1-3 src/middleware.ts1-6

基本 Store 创建

使用 Zustand 创建 store 非常简单，只需调用一次 create() 函数并传入状态定义即可。

一个基础的 store 包括：

1. State values：要存储和跟踪的数据
2. Actions：修改状态的函数
3. Getters：计算派生状态的函数

核心 API 提供了三个基本函数用于与状态交互：

• set：更新状态
• get：检索当前状态
• subscribe：注册状态变化的监听器

来源：tests/types.test.tsx41-69 tests/middlewareTypes.test.tsx44-59

中间件系统

Zustand 的中间件系统允许通过可组合模式扩展核心功能。中间件包装了状态创建函数，增加了持久化、不可变更新和开发工具等功能。

主要的中间件包括：

• persist：从存储中保存和恢复状态
• immer：支持更简单的不可变状态更新
• devtools：连接到 Redux DevTools 进行调试
• subscribeWithSelector：支持选择性订阅
• redux：提供类似 Redux 的模式
• combine：便于组合状态切片

来源：src/middleware.ts1-6 tests/middlewareTypes.test.tsx62-303

TypeScript 集成

Zustand 在设计时就充分考虑了 TypeScript 的支持，在整个状态管理过程中提供了类型安全。

类型系统提供了：

1. 类型推断：自动从您的状态定义中推断类型
2. 类型安全的 Selector：确保 Selector 接收到正确的状态类型
3. 中间件类型支持：在使用中间件时保持类型安全
4. Action 类型安全：确保 Action 的参数和返回值类型正确

来源：tests/types.test.tsx10-102 tests/middlewareTypes.test.tsx17-41

与其他状态库的对比

Zustand 提供了一种独特的状态管理方法，这与其他流行的库有所不同。

库	方法	复杂性	打包大小	学习曲线
Zustand	基于 Hook，以 Store 为中心	低	~1KB	Shallow (浅比较)
Redux	Action-Reducer 模式	中高	约 4KB	陡峭
MobX	基于 Observable	中等	约 6KB	中等
Jotai	原子状态	低	~2KB	Shallow (浅比较)
Recoil	原子状态	中等	~20KB+	中等
Context API	Context 提供者	低	内置	Shallow (浅比较)

与 Redux 不同，Zustand 不需要 Action 类型、Reducer 或 Dispatcher。与 Context API 相比，它提供了更好的性能优化和更强大的功能，如中间件和选择性重渲染。

来源：package.json91-97

快速入门

要开始使用 Zustand，您需要：

1. 安装包:

   npm install zustand
   # or
   yarn add zustand
   # or
   pnpm add zustand
   

2. 创建 Store：使用状态和修改该状态的 Actions 来创建 Store。

3. 在组件中消费 Store：使用 create() 返回的 Hook 在组件中访问状态。

有关详细的安装说明和入门示例，请参阅安装与入门。

来源：package.json152-171

生态系统

Zustand 拥有不断增长的官方扩展和第三方库生态系统，可以增强其功能。

Zustand 的模块化设计鼓励扩展和定制，围绕其核心概念形成了充满活力的工具和模式生态系统。

来源：package.json27-49 package.json152-171

本介绍提供了 Zustand 关键概念和架构的概述。Wiki 的后续部分将深入探讨使用和扩展 Zustand 的具体方面。