react如何使用mobx
使用 MobX 与 React 的步骤
安装依赖
确保项目中已安装 mobx 和 mobx-react（或 mobx-react-lite，适用于函数组件）。通过以下命令安装：
npm install mobx mobx-react
# 或
yarn add mobx mobx-react创建 Store
定义一个可观察的状态存储（Store），使用 makeObservable 或 makeAutoObservable 自动装饰字段。
import { makeAutoObservable } from "mobx";
class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
export const counterStore = new CounterStore();在组件中使用 Store
通过 observer 包装组件，使其响应状态变化。类组件或函数组件均可使用。
import { observer } from "mobx-react";
import { counterStore } from "./CounterStore";
const Counter = observer(() => {
return (
<div>
<button onClick={() => counterStore.decrement()}>-</button>
<span>{counterStore.count}</span>
<button onClick={() => counterStore.increment()}>+</button>
</div>
);
});
export default Counter;依赖注入（可选）
使用 Provider 和 inject（适用于类组件）或 React Context 全局共享 Store。
import { Provider } from "mobx-react";
import { counterStore } from "./CounterStore";
const App = () => {
return (
<Provider counterStore={counterStore}>
<Counter />
</Provider>
);
};处理异步操作
使用 runInAction 确保异步操作后的状态变更是可观察的。
class AsyncStore {
data = null;
loading = false;
constructor() {
makeAutoObservable(this);
}
async fetchData() {
this.loading = true;
const response = await fetch("/api/data");
runInAction(() => {
this.data = await response.json();
this.loading = false;
});
}
}注意事项
- 装饰器语法：若使用
@observable等装饰器，需配置 Babel 或 TypeScript 支持。 - 性能优化：
observer仅跟踪渲染中使用的状态，避免不必要的重新渲染。 - 严格模式：通过
configure({ enforceActions: "observed" })强制在动作中修改状态。
