当前位置：首页 > React

react如何使用mobx

2026-01-23 23:29:52React

使用 MobX 在 React 项目中

在 React 项目中集成 MobX 需要安装必要的依赖包并配置 Store 和组件。以下是详细步骤：

安装依赖

确保项目中已安装 mobx 和 mobx-react-lite（针对函数组件）或 mobx-react（针对类组件）。使用以下命令安装：

npm install mobx mobx-react-lite
# 或
yarn add mobx mobx-react-lite

创建 MobX Store

创建一个可观察的状态管理类，使用 makeAutoObservable 或 makeObservable 装饰状态和方法。

// store/counterStore.js
import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count += 1;
  }

  decrement() {
    this.count -= 1;
  }
}

export const counterStore = new CounterStore();

在组件中使用 Store

通过 observer 包装组件，使其响应状态变化。使用 React Context 或直接导入 Store 实例。

// Counter.jsx
import { observer } from "mobx-react-lite";
import { counterStore } from "./store/counterStore";

const Counter = observer(() => {
  return (
    <div>
      <h1>Count: {counterStore.count}</h1>
      <button onClick={() => counterStore.increment()}>+</button>
      <button onClick={() => counterStore.decrement()}>-</button>
    </div>
  );
});

export default Counter;

使用 Provider 注入 Store（可选）

对于多 Store 或需要依赖注入的场景，可以使用 Context 提供 Store。

// App.jsx
import { createContext } from "react";
import { counterStore } from "./store/counterStore";
import Counter from "./Counter";

export const StoreContext = createContext();

function App() {
  return (
    <StoreContext.Provider value={{ counterStore }}>
      <Counter />
    </StoreContext.Provider>
  );
}

export default App;

组件中通过 Context 使用 Store

import { useContext } from "react";
import { observer } from "mobx-react-lite";
import { StoreContext } from "./App";

const Counter = observer(() => {
  const { counterStore } = useContext(StoreContext);
  return (
    <div>
      <h1>Count: {counterStore.count}</h1>
      <button onClick={() => counterStore.increment()}>+</button>
      <button onClick={() => counterStore.decrement()}>-</button>
    </div>
  );
});

异步操作处理

MobX 支持异步操作，通常结合 runInAction 确保状态变更在事务中完成。

import { runInAction } from "mobx";

class UserStore {
  users = [];
  loading = false;

  async fetchUsers() {
    this.loading = true;
    const response = await fetch("/api/users");
    const data = await response.json();
    runInAction(() => {
      this.users = data;
      this.loading = false;
    });
  }
}

计算属性和反应

使用 computed 定义派生状态，或 reaction 监听状态变化。

import { computed, reaction } from "mobx";

class CartStore {
  items = [];

  get totalItems() {
    return this.items.length;
  }

  constructor() {
    reaction(
      () => this.items.length,
      (length) => console.log(`Items count changed: ${length}`)
    );
  }
}

通过以上步骤，可以高效地将 MobX 集成到 React 项目中，实现响应式状态管理。

react如何使用mobx