MobX - React 状态管理 #

学习路线 #

第一阶段：基础入门 #

适合零基础开发者，学习 MobX 的核心概念和基本语法。

• MobX简介 - 了解 MobX 的特点和应用场景
• MobX安装 - 搭建 MobX 开发环境
• 核心概念 - 理解 MobX 的三大核心概念

第二阶段：可观察状态 #

学习如何创建和管理可观察状态。

• Observable状态 - 创建可观察数据
• makeObservable - 类组件中的响应式配置
• makeAutoObservable - 自动响应式配置

第三阶段：状态修改 #

学习如何安全地修改状态。

• Action动作 - 定义状态修改方法
• action.bound - 自动绑定this
• runInAction - 异步状态更新

第四阶段：派生状态 #

学习计算属性和派生状态管理。

• Computed计算值 - 创建派生状态
• computed与autorun区别 - 理解两者的使用场景

第五阶段：响应式编程 #

掌握 MobX 的响应式监听机制。

• Autorun自动运行 - 自动响应状态变化
• Reaction反应 - 精确控制响应
• When条件执行 - 条件触发执行

第六阶段：React集成 #

学习 MobX 与 React 的深度集成。

• Observer观察者 - 让组件响应状态变化
• Observer组件 - 细粒度响应
• useLocalObservable - 组件内状态管理

第七阶段：高级特性 #

掌握 MobX 的高级功能。

• 异步Action - 处理异步操作
• Observable集合 - 数组和Map的响应式
• 工具函数 - 常用工具方法

第八阶段：最佳实践 #

学习企业级开发规范和技巧。

• 项目结构 - 代码组织规范
• 性能优化 - 性能优化技巧
• MobX与TypeScript - TypeScript集成
• 常见问题 - 常见问题解答

技术栈概览 #

MobX 技术栈
├── MobX 6              核心状态管理库
├── mobx-react-lite     React集成（推荐）
├── mobx-react          React集成（完整版）
└── TypeScript          类型支持

前置知识 #

学习本指南前，建议具备以下基础：

• HTML/CSS 基础
• JavaScript ES6+ 语法
• React 基础知识
• 基本的命令行操作

学习建议 #

1. 循序渐进：按照章节顺序学习，打好基础
2. 动手实践：每学完一章，动手编写代码
3. 深入理解：理解响应式原理，而非死记语法
4. 项目驱动：通过实际项目巩固知识

版本说明 #

本指南基于 MobX 6 编写，推荐使用最新稳定版本。

MobX vs Redux #

开始你的 MobX 学习之旅吧！