MobX学习笔记与竞品全维度对比，帮你做出最佳选择

既然你已经具备了扎实的网站开发与运维能力，那我们就跳过基础概念，直接从底层原理和架构设计的角度，为你梳理一份硬核的 MobX 学习笔记。

MobX 的核心哲学是“任何源自应用状态的东西都应该自动地获得”。它通过响应式编程，将状态(State)与视图(Views)紧密绑定，让数据变化自动驱动 UI 更新。

 核心原理：响应式与依赖追踪

MobX 的底层魔法在于依赖追踪(Dependency Tracking)。

可观察对象(Observable)：当你使用 observable 或 makeObservable 时，MobX 会利用 JavaScript 的 Proxy(或旧版的 Object.defineProperty)将你的数据对象“劫持”。这相当于给每个属性装上了 getter 和 setter。

自动收集依赖：当一个被 observer 包裹的 React 组件在渲染时，MobX 会记录下这个组件读取了哪些可观察属性。

精确更新：当这些属性通过 action 被修改时，MobX 会精确地知道哪些组件依赖了这个属性，并只触发这些组件的重新渲染，避免了不必要的性能损耗。

 核心架构：单向数据流

MobX 遵循严格的单向数据流，这是保证应用可预测性的基石：

Action -> State -> Views

State(状态)：驱动应用的核心数据，通常存储在 Store 中。

Action(动作)：唯一可以修改 State 的入口。这确保了所有状态变更都是可追踪和可调试的。

Views(视图)：State 的衍生。当 State 改变时，视图会自动、原子性地更新。

 关键 API 与最佳实践

1. 定义状态与动作

在 MobX 6+ 中，推荐使用 makeAutoObservable 或 makeObservable 来替代装饰器，这在现代前端工程中更友好。

javascript

编辑

1import { makeAutoObservable } from "mobx";

2

3class CounterStore {

4 count = 0;

5

6 constructor() {

7 // 自动将属性变为 observable，方法变为 action

8 makeAutoObservable(this);

9 }

10

11 increment() {

12 this.count += 1;

13 }

14}

15

16export const counterStore = new CounterStore();

2. 派生计算值(Computed)

computed 是性能优化的关键。它类似于 Vue 的计算属性或 React 的 useMemo，具有缓存机制。只有当其依赖的 observable 发生变化时，才会重新计算。

javascript

编辑

1get doubleCount() {

2 return this.count * 2;

3}

3. 响应式视图

使用 mobx-react-lite 中的 observer 高阶组件包裹你的 React 组件，使其成为响应式视图。

javascript

编辑

1import { observer } from "mobx-react-lite";

2

3const Counter = observer(() => {

4 return (

5

6

Count: {counterStore.count}

7counterStore.increment()}>Increment

8

9 );

10});

4. 处理异步操作

MobX 的 action 默认是同步的。在 async 函数中，await 之后的代码会进入新的事件循环，此时直接修改状态会报错。

解决方案一：runInAction

在异步回调中包裹一个匿名的 action。javascript

编辑

1async fetchData() {

2 const data = await api.getData();

3 runInAction(() => {

4 this.data = data;

5 });

6}

解决方案二：flow

使用 flow 和 function* 生成器，这是 MobX 官方推荐的异步处理方式，代码更简洁。javascript

编辑

1fetchData = flow(function* () {

2 const data = yield api.getData();

3 this.data = data;

4});

⚙️ 严格模式与工程化

为了保证代码的可维护性和可预测性，强烈建议在项目入口开启严格模式。

javascript

编辑

1import { configure } from 'mobx';

2

3configure({

4 enforceActions: 'always', // 强制所有状态修改都必须在 action 中进行

5});

开启后，任何在 action 之外对 observable 的修改都会抛出错误，这能有效防止意外的状态变更，让调试变得更容易。

 进阶思考：

MobX 和 Redux 的核心区别在于，Redux 是不可变数据和单一 Store，而 MobX 是可变数据和多 Store。MobX 更偏向面向对象编程(OOP)，对于习惯了传统 OOP 的开发者来说，心智模型更简单，上手更快。