mobx如何管理react状态

Mobx 管理 React 状态的核心方法

安装依赖
在项目中安装 mobx 和 mobx-react-lite（函数组件）或 mobx-react（类组件）：

npm install mobx mobx-react-lite

创建可观察状态

通过 makeObservable 或 makeAutoObservable 将对象转换为可观察状态：

import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

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

export const counterStore = new CounterStore();

在组件中使用状态

使用 observer 包裹组件，使其响应状态变化：

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

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

状态派生与计算属性

通过 computed 定义派生状态，自动缓存计算结果：

class CartStore {
  items = [];

  get total() {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
}

异步操作处理

使用 runInAction 确保异步操作后的状态修改是原子的：

class UserStore {
  data = null;
  loading = false;

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

多 Store 整合

通过 RootStore 组合多个 Store 并注入上下文：

class RootStore {
  constructor() {
    this.userStore = new UserStore();
    this.cartStore = new CartStore();
  }
}

const rootStore = new RootStore();
const StoreContext = createContext(rootStore);

// 在组件中通过 useContext(StoreContext) 访问

最佳实践

• 最小化观察范围：仅观察组件实际使用的数据。
• 避免直接修改状态：通过 Action 方法修改。
• 使用 useLocalObservable 简化局部状态管理：

  const Component = observer(() => {
    const state = useLocalObservable(() => ({
      count: 0,
      increment: () => state.count++ 
    }));
    return <button onClick={state.increment}>{state.count}</button>;
  });