核心架构概述 ​

什么是 Zustand ​

Zustand 是一个轻量级、快速且可扩展的状态管理库，专为 React 设计。它的名字来自德语，意思是"状态"（state）。Zustand 的核心设计理念是：

• 极简 API：基于 Hooks 的舒适 API，无需 Provider
• 无样板代码：不需要繁琐的配置和包装
• React 并发安全：正确处理僵尸子组件问题和状态撕裂（tearing）
• 跨环境支持：可在 React、React Native 和非 React 环境中使用

核心设计原则 ​

1. 单一 Store 模式 ​

Zustand 推荐用一个或少量按领域划分的 store 管理全局状态，类似 Redux 的单一数据源思想，但无 reducer 样板。大应用可拆多个 create 或 slices（见 07-性能优化）。

2. 不可变状态更新 ​

Zustand 遵循不可变更新模式，通过 set 函数进行状态更新，自动处理状态合并。

3. 基于订阅的响应式系统 ​

Zustand 使用发布-订阅模式实现状态更新通知，组件通过选择器（selector）订阅状态变化。

架构分层 ​

Zustand 的架构可以分为三个主要层次：

┌─────────────────────────────────────┐
│      React Integration Layer        │  ← useStore, create
│  (useSyncExternalStore wrapper)     │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│      Vanilla Store Core              │  ← createStore
│  (State management, subscriptions)    │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│      Middleware System              │  ← devtools, persist, immer
│  (Composable enhancements)          │
└─────────────────────────────────────┘

1. Vanilla Store 核心层 ​

位于 src/vanilla.ts，提供基础的状态管理能力：

• 状态存储：使用闭包存储当前状态
• 订阅系统：使用 Set 管理监听器
• 状态更新：setState 函数处理状态合并和通知

2. React 集成层 ​

位于 src/react.ts，将 Vanilla Store 与 React 集成：

• useStore Hook：使用 useSyncExternalStore 实现
• create 函数：创建带有 React Hook 接口的 Store
• 选择器支持：支持函数式选择器进行状态切片

3. 中间件系统 ​

位于 src/middleware/，提供可组合的功能增强：

• devtools：Redux DevTools 集成
• persist：状态持久化
• immer：不可变更新简化
• redux：Redux 模式支持
• subscribeWithSelector：带选择器的订阅

核心 API 设计 ​

create 函数 ​

create 是主要入口，返回 useStore Hook（内部 createStore + useSyncExternalStore）。

设计特点：

• 返回的是 Hook，可以直接在组件中使用
• 不需要 Provider 包装
• 支持选择器进行细粒度订阅

Store API ​

每个 Store 都暴露以下 API：

• getState()：获取当前状态（非响应式）
• setState()：更新状态
• subscribe()：订阅状态变化
• getInitialState()：获取初始状态

与其他状态管理库的对比 ​

vs Redux ​

vs Context API ​

vs Jotai/Recoil ​

关键特性 ​

1. 无 Provider 设计 ​

Store 多为模块级单例，组件内 useStore(selector) 即可，无需 <Provider>（权衡见 08-关键设计决策）。

优势：

• 减少组件树层级
• 简化代码结构
• 更好的性能（避免 Context 传播）

2. 细粒度订阅 ​

通过选择器只订阅切片；多字段打包用 useShallow（见 07-性能优化）。

3. 中间件系统 ​

devtools / persist / immer 等可洋葱式组合（见 04-中间件系统）。

总结 ​

Zustand 的核心架构设计体现了以下理念：

1. 简单性优先：最小化 API 表面，减少学习成本
2. 性能优先：通过细粒度订阅和 useSyncExternalStore 确保性能
3. 灵活性优先：中间件系统允许按需扩展功能
4. React 原生优先：充分利用 React 18 的新特性，确保并发安全

这种设计使得 Zustand 在保持简单易用的同时，能够处理复杂的状态管理场景，并避免 React 并发模式下的常见问题。