当前位置：首页 > React

mobx如何驱动react

2026-03-30 19:55:30React

mobx 驱动 React 的核心原理

MobX 通过响应式编程模型与 React 的组件系统结合，实现数据变化自动触发组件更新。核心依赖 mobx-react（或 mobx-react-lite）库提供的观察者（Observer）机制。

关键步骤

1. 创建可观察状态 使用 observable 将数据转换为响应式对象。当状态变更时，依赖该状态的组件会自动重新渲染。

mobx如何驱动react

import { observable } from 'mobx';

class Store {
  @observable count = 0;
}
// 或非装饰器语法：
const store = observable({ count: 0 });

2. 组件标记为观察者 通过 observer 包裹 React 组件，使其订阅使用的可观察状态。当状态变化时，只有依赖该状态的组件会更新。

import { observer } from 'mobx-react';

const Counter = observer(({ store }) => (
  <button onClick={() => store.count++}>{store.count}</button>
));

3. 状态修改触发更新 通过 action 修改状态（推荐），确保变更可追踪和批处理。直接修改也会触发更新，但可能失去调试优势。

mobx如何驱动react

import { action } from 'mobx';

class Store {
  @observable count = 0;
  @action increment() { this.count++; }
}

性能优化机制

细粒度更新：组件仅在其使用的特定字段变化时重新渲染，避免虚拟 DOM 不必要的对比。
派生值（computed）：通过 computed 定义衍生状态，自动缓存并仅在依赖变更时重新计算。
```
class Store {
@observable items = [];
@computed get total() { return this.items.length; }
}
```

与 React 上下文集成

通过 Provider 和 inject（或 React Context）传递 store，避免逐层传递 props。

import { Provider } from 'mobx-react';

<Provider store={new Store()}>
  <App />
</Provider>

// 组件内获取
const UserList = inject('store')(observer(({ store }) => ( /* ... */ )));

异步处理

MobX 不限制异步操作方式，但推荐在 action 中更新状态（包括异步回调）：

@action async fetchData() {
  this.loading = true;
  const data = await api.get();
  runInAction(() => {
    this.data = data;
    this.loading = false;
  });
}