🟦 initialState（Umi 应用级）
🟪 valtio（业务逻辑级）
🟩 useState（组件级）
🟥 redux/dva（传统集中式全局状态）
React + Umi 状态体系关系图（中文解释版）
┌────────────────────────────────────────────┐
│ 🌐 应用启动层（Umi 专用） │
│────────────────────────────────────────────│
│ 【initialState / setInitialState】 │
│ - 用于存放全局初始化数据（用户信息、配置） │
│ - 来源：Umi runtime 插件（getInitialState） │
│ - 生命周期：应用启动 → 全局共享 │
│ - 更新方式：setInitialState() │
│ - 特征：一次加载、全局可读、适合初始化数据 │
└────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────┐
│ ⚙️ 业务逻辑层（响应式全局状态） │
│────────────────────────────────────────────│
│ 【valtio】 │
│ - Proxy 实现响应式，组件自动更新 │
│ - 无需 dispatch，直接修改对象即可 │
│ - 生命周期：全局可持久，组件卸载不丢状态 │
│ - 特征：轻量、自然、响应式、高性能 │
│ - 用途：共享 UI 状态、缓存、表格筛选等 │
└────────────────────────────────────────────┘
│
▼
┌────────────────────────────────────────────┐
│ 🧩 组件局部状态层（React 原生） │
│────────────────────────────────────────────│
│ 【useState / useReducer】 │
│ - React 内置 hooks │
│ - 生命周期：组件内存活，组件卸载即销毁 │
│ - 特征：轻量、简洁、局部性强 │
│ - 用途：按钮状态、输入框值、弹窗开关等 │
└────────────────────────────────────────────┘
▲
│
│
┌────────────────────────────────────────────┐
│ 🏗️ 传统集中式状态层（Redux / Dva） │
│────────────────────────────────────────────│
│ 【redux / dva】 │
│ - 需要 dispatch + reducer 机制 │
│ - 状态集中存储，全局单一 Store │
│ - 生命周期：全局，手动管理更新逻辑 │
│ - 特征：结构化、可追踪、适合复杂业务流 │
│ - 用途：大型项目、复杂异步逻辑、数据流管理 │
└────────────────────────────────────────────┘
📘 四者详细对比表
| 对比项 | initialState | valtio | useState | redux/dva |
|---|---|---|---|---|
| 来源 | Umi 框架内置 | 第三方库（Proxy,@umijs/max 内置了 valtio） | React 内置 | 独立状态管理库 |
| 状态范围 | 全局（初始化数据） | 全局或模块级 | 组件内 | 全局集中式 |
| 生命周期 | 应用启动→持久 | 页面/全局→持久 | 组件级→销毁 | 应用级→持久 |
| 更新方式 | setInitialState() |
直接修改属性 | setState() |
dispatch(action) |
| 响应式 | ✅ 是 | ✅ 是 | ✅ 是 | ❌ 否（需 connect 或 hook） |
| 模板代码量 | 少 | 少 | 极少 | 多 |
| 适合复杂逻辑 | ❌ 否 | ⚪ 一般 | ❌ 否 | ✅ 是 |
| 调试与追踪 | 一般 | 一般 | 无需 | 强（Redux DevTools） |
| 学习成本 | 低 | 低 | 极低 | 高 |
| 推荐场景 | 初始化用户态、权限、全局配置 | 页面间共享状态、业务状态 | 局部组件 UI 状态 | 大型项目、复杂异步流转 |
💡 实战组合推荐
| 场景 | 推荐方案 |
|---|---|
| 登录后保存用户信息 | initialState |
| 全局主题/布局状态 | valtio |
| 页面内筛选条件/表格缓存 | valtio |
| Modal/输入框状态 | useState |
| 多模块异步数据、复杂流转 | redux/dva |
🧠 记忆口诀
大全局用 initialState，中全局用 valtio，小局部用 useState，超复杂才上 redux。