🟦 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。