当前位置：首页 > React

mobx如何与react结合

2026-03-11 05:44:23React

mobx与react结合的核心方法

使用mobx-react-lite或mobx-react库实现状态管理与React组件的绑定。前者适用于函数组件，后者支持类组件。

安装必要依赖

npm install mobx mobx-react-lite
# 或类组件使用
npm install mobx mobx-react

创建可观察状态

通过makeObservable或makeAutoObservable定义Store类：

import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

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

export const counterStore = new CounterStore();

函数组件中使用

通过observer包裹组件实现响应式更新：

mobx如何与react结合

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>
  );
});

类组件中使用

使用inject和observer实现状态注入：

import { inject, observer } from "mobx-react";

@inject("counterStore")
@observer
class ClassCounter extends React.Component {
  render() {
    const { counterStore } = this.props;
    return (
      <div>
        <button onClick={() => counterStore.decrement()}>-</button>
        <span>{counterStore.count}</span>
        <button onClick={() => counterStore.increment()}>+</button>
      </div>
    );
  }
}

提供全局Store

通过React Context提供全局状态：

mobx如何与react结合

import { createContext } from "react";
export const StoreContext = createContext(null);

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

组件内访问Context

函数组件中使用useContext获取Store：

import { useContext } from "react";
import { StoreContext } from "./App";

const Counter = observer(() => {
  const store = useContext(StoreContext);
  return <span>{store.count}</span>;
});

计算属性和反应

在Store中使用computed和reaction：

class UserStore {
  users = [];

  get activeUsers() {
    return this.users.filter(user => user.isActive);
  }

  constructor() {
    makeAutoObservable(this);
    reaction(
      () => this.users.length,
      count => console.log(`Users count changed to ${count}`)
    );
  }
}