当前位置：首页 > React

mobx如何与react结合

2026-01-24 20:55:28React

mobx与react结合的方法

安装依赖包 确保项目已安装mobx和mobx-react-lite（函数组件）或mobx-react（类组件）。通过npm或yarn安装：

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

创建可观察状态 使用makeObservable或makeAutoObservable定义Store类，将状态标记为可观察：

import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

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

export const counterStore = new CounterStore();

在组件中使用状态 通过observer包裹组件，使组件能响应状态变化。函数组件示例：

import { observer } from "mobx-react-lite";
import { counterStore } from "./CounterStore";

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

类组件用法 若使用类组件，需通过inject和observer结合（需安装mobx-react）：

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

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

Provider注入全局Store 通过Provider传递Store到组件树，避免直接导入：

import { Provider } from "mobx-react";
import { counterStore } from "./CounterStore";

ReactDOM.render(
  <Provider counterStore={counterStore}>
    <App />
  </Provider>,
  document.getElementById("root")
);

响应式计算与副作用 使用computed定义衍生状态，autorun或reaction处理副作用：

mobx如何与react结合

import { computed, autorun } from "mobx";

class UserStore {
  firstName = "John";
  lastName = "Doe";

  constructor() {
    makeAutoObservable(this);
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const userStore = new UserStore();
autorun(() => {
  console.log(userStore.fullName);
});