🧱 状态管理目标
简化状态的「读、写、共享、持久化」 适用于：组件通信、服务端缓存、全局设置、UI 控制等
⚛ React 数据流方案
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
useState | 原生轻量，无需依赖 | 无法共享跨组件状态 | 组件内部状态 |
Context | 原生共享，适合简单全局变量（如主题） | 粒度粗，更新全量触发 rerender | 轻量全局状态 |
| Redux Toolkit | 标准、强类型、安全、DevTools 支持优秀 | 模板代码多，入门成本高 | 大型应用 |
| Zustand | 无模板代码，极简 API，模块化优秀，性能好 | TS 推导有一定学习成本 | 中大型项目，推荐 ✅ |
| Recoil / Jotai | 原子化状态，适合局部嵌套组件优化 | 社区活跃度不足 | 实验型、可视化项目 |
| MobX | 响应式编程强大，代码简洁 | 隐式副作用多，调试困难 | 数据频繁变化的交互组件 |
✅ 推荐组合：
- 中后台：Zustand
- 大型复杂项目：Redux Toolkit
- 页面复杂嵌套：Recoil / MobX
🧩 Vue 数 据流方案（Vue 3）
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
ref / reactive | 原生，响应式语法简洁 | 跨组件共享不方便 | 组件内部状态 |
provide/inject | 原生共享，适合依赖注入类业务 | 不可响应 / 使用复杂 | 嵌套组件通信 |
| Vuex | 模块化标准、成熟 | 写法繁琐、不支持 Composition API | Vue 2 项目维护期 |
| Pinia ✅ | 官方推荐，支持 Composition API、模块化好 | 插件体系相对较小 | Vue 3 项目首选 ✅ |
✅ 推荐组合：
- Vue 3 新项目：Pinia
- 简单组件：ref / reactive
- 状态抽象封装：自定义 useXXXStore + reactive
⚙ Umi 项目数据流（React 系）
Umi 本身基于 React，因此支持所有 React 状态管理方案，另外提供 2 种专属机制：
1. @umijs/plugins - plugin-model（useModel）
✅ 官方推荐 Hooks 数据流方案，是 DVA 替代品
| 特点 | 说明 |
|---|---|
| 轻量、函数式 | 类似 Zustand 思维，推荐组合式抽离 |
| 支持全局和局部 model | 可拆分模块 |
| 支持异步、缓存、订阅等 | 结合 useRequest 使用更强大 |
适合：Umi 3/4 项目，Hooks 风格
2. ✅ DVA（Umi 2.x 默认集成，Redux + Redux-saga 封装）
| 优点 | 缺点 |
|---|---|
| 成熟稳定、模块化清晰 | 写法陈旧、样板多、不支持 hooks |
| 支持 effect、subscription | 重依赖 redux-saga，异步逻辑不易维护 |
适合：Umi 2 项目、需要订阅式模型、已有大量 DVA 模块的项目
⚖ Umi 项目选型建议
| 项目类型 | 推荐数据流 |
|---|---|
| Umi 4 新项目 | plugin-model ✅ |
| 老项目 | DVA（逐步迁移） |
| 多模块复杂 | Zustand + plugin-model组合 |
📌 选型建议一图流（全栈视角）
| 框架 | 简单状态 | 共享状态（中小） | 大型项目 / 多人协作 |
|---|---|---|---|
| React | useState | Zustand ✅ | Redux Toolkit |
| Vue | ref | Pinia ✅ | Pinia + 模块化封装 |
| Umi | useModel | useModel ✅ | Zustand / Redux（无 DVA） |
| Umi 2 | useState | DVA（维护期） | 可逐步迁移 useModel |
✅ 总结一句话
React 推荐 Zustand / Redux，Vue 推荐 Pinia，Umi 项目首选 useModel，DVA 适用于旧项目维护期。