核心概念与架构

相关源文件

• src/index.ts
• src/react.ts
• src/react/shallow.ts
• src/traditional.ts
• src/vanilla.ts
• tests/basic.test.tsx

本页面解释了 Zustand 的基本概念和架构，包括 stores、state、actions 和 subscription 系统。有关特定 store 创建方法的详细信息，请参阅Store Creation，有关详细的状态更新模式，请参阅State Updates。

核心抽象

Zustand 构建于四个核心抽象之上，构成了其极简而强大的设计。

1. Store：一个包含 state 并提供与之交互方法的容器。
2. State：存储在 store 中的数据。
3. Actions：修改 store state 的函数。
4. Subscriptions：响应性和更新机制。

Store 结构

Zustand store 由 StoreApi 接口定义的简单 API 组成。

来源：src/vanilla.ts9-14

实现架构

Zustand 的架构有意设计得极为精简，核心状态管理与框架绑定之间有清晰的分离。

来源：src/vanilla.ts99-100 src/react.ts63-64 src/traditional.ts84-90

状态管理流程

Zustand 的核心状态管理流程遵循此模式：

来源：src/vanilla.ts60-97

Store 创建和状态管理

Zustand 提供了两种主要创建 store 的方式：

1. Vanilla Store Creation：通过 createStore 实现与框架无关的功能。
2. React Store Creation：通过 create 实现 React 特定的功能。

Vanilla Store Creation

createStore 函数创建一个独立于任何 UI 框架的基础 store。

Store 创建函数接收：

• set：更新 state 的函数。
• get：读取当前 state 的函数。
• api：对 store API 的引用。

来源：src/vanilla.ts60-100

React Store Creation

create 函数建立在 createStore 之上，提供了 React 集成。

在 React 组件中使用时，返回的 hook 会自动处理订阅和重新渲染。

来源：src/react.ts53-64

状态更新

Zustand 中的状态更新可以通过三种方式进行：

更新类型	示例	描述
部分	set({ count: 5 })	与现有 state 合并。
函数式	set(state => ({ count: state.count + 1 }))	从当前 state 计算新 state。
替换	set({ count: 0 }, true)	替换整个 state。

setState 的内部实现决定了更新类型并据此进行应用。

来源：src/vanilla.ts66-81

React 集成

组件集成

React 集成通过 useStore hook 实现，该 hook 将组件连接到 stores。

来源：src/react.ts26-37

Store 到 Component 的流程

以下是 state 变更如何从 store 流向 components：

来源：tests/basic.test.tsx49-68 tests/basic.test.tsx130-163

TypeScript 集成

Zustand 使用 TypeScript 构建，并提供类型安全的 API。主要类型包括：

类型	描述
StoreApi<T>	Zustand store 的接口，state 类型为 T。
StateCreator<T, ...>	store 初始化函数的类型。
UseBoundStore<S>	React 绑定的 store hook 的类型。
ExtractState<S>	用于从 store 提取 state 类型的工具类型。

来源：src/vanilla.ts9-41 src/react.ts39-42

完整的 Store 生命周期示例

以下是 store 从创建到在组件中使用的完整生命周期：

来源：tests/basic.test.tsx21-41 tests/basic.test.tsx49-90

关键实现细节

Zustand 状态管理的核心位于 vanilla.ts 文件中的 createStoreImpl 函数。该函数：

1. 创建状态容器。
2. 设置监听器（listeners）的 Set。
3. 实现 setState 来更新 state 和通知监听器。
4. 实现 getState 来读取当前 state。
5. 实现 subscribe 来注册和注销监听器。

react.ts 中的 React 绑定：

1. 使用 createStore 创建 store。
2. 实现一个自定义 hook，使用 useStore。
3. 将 store API 方法分配给 hook 函数。
4. 返回增强的 hook 函数。

这种方法在 vanilla store 实现与 React 组件模型之间创建了无缝的集成。

来源：src/vanilla.ts60-97 src/react.ts53-61

架构总结

Zustand 的架构通过以下方式平衡了简洁性和强大功能：

1. 极简核心：仅提供有效状态管理所需的功能。
2. 组合模式：Store API 和 actions 组合在一起。
3. React 集成：为 React 提供无缝的基于 hook 的 API。
4. 类型化接口：完整的 TypeScript 支持，保证类型安全。

这种设计使得 Zustand 能够提供强大的状态管理功能，同时 API 表面积却异常地小。

来源：src/index.ts1-3 src/vanilla.ts9-100 src/react.ts17-64