当前位置：首页 > React

react如何使用mobx

2026-02-12 03:32:10React

在React中使用MobX

React与MobX结合可以实现高效的状态管理。MobX通过响应式编程简化状态更新与组件渲染的联动。以下是具体实现方法：

安装依赖

确保项目已安装mobx和mobx-react-lite（或mobx-react，适用于类组件）：

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

创建Store

使用MobX的observable和action定义状态和更新方法：

react如何使用mobx

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

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

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

export const counterStore = new CounterStore();

在组件中使用Store

通过observer包装组件使其响应状态变化：

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

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

export default Counter;

使用Context注入Store（可选）

通过React Context实现Store的全局共享：

react如何使用mobx

// StoreProvider.jsx
import { createContext, useContext } from "react";
import { counterStore } from "./store";

const StoreContext = createContext(null);

export const StoreProvider = ({ children }) => {
  return (
    <StoreContext.Provider value={{ counterStore }}>
      {children}
    </StoreContext.Provider>
  );
};

export const useStore = () => useContext(StoreContext);

在根组件中包裹StoreProvider：

// App.jsx
import { StoreProvider } from "./StoreProvider";
import Counter from "./Counter";

function App() {
  return (
    <StoreProvider>
      <Counter />
    </StoreProvider>
  );
}

组件内通过useStore获取Store：

const Counter = observer(() => {
  const { counterStore } = useStore();
  return <span>{counterStore.count}</span>;
});

处理异步操作

使用runInAction确保异步操作后的状态更新被追踪：

class AsyncStore {
  data = null;
  loading = false;

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