react如何使用mobx
在 React 中使用 MobX 的步骤
安装依赖
确保项目中安装了 mobx 和 mobx-react-lite（或 mobx-react，后者支持类组件）。通过以下命令安装：
npm install mobx mobx-react-lite
# 或
yarn add mobx mobx-react-lite创建 MobX 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 包装组件，使其响应 Store 的变化。使用 React 的 Context 或直接导入 Store：
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>
);
});
export default Counter;可选：使用 Provider 注入 Store
通过 Provider 全局共享 Store，避免直接导入：
import { Provider } from "mobx-react-lite";
import { counterStore } from "./CounterStore";
function App() {
return (
<Provider counterStore={counterStore}>
<Counter />
</Provider>
);
}在子组件中通过 useContext 或 inject 获取 Store：
import { observer, useLocalObservable } from "mobx-react-lite";
import { useContext } from "react";
import { MobXProviderContext } from "mobx-react-lite";
const Counter = observer(() => {
const { counterStore } = useContext(MobXProviderContext);
return <span>{counterStore.count}</span>;
});处理异步操作
在 MobX 中，异步操作可以通过 runInAction 或 flow 处理：
import { flow, makeAutoObservable } from "mobx";
class AsyncStore {
data = null;
loading = false;
constructor() {
makeAutoObservable(this);
}
fetchData = flow(function* () {
this.loading = true;
try {
const response = yield fetch("/api/data");
this.data = yield response.json();
} catch (error) {
console.error(error);
} finally {
this.loading = false;
}
});
}计算属性和反应
使用 computed 定义派生状态，或 autorun/reaction 监听变化：
class UserStore {
firstName = "John";
lastName = "Doe";
constructor() {
makeAutoObservable(this, {
fullName: computed,
});
}
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
}注意事项
- 确保组件被
observer包装，否则不会响应状态变化。 - 避免在渲染中直接修改状态，应在动作（Action）中完成。
- 类组件使用
mobx-react，函数组件推荐mobx-react-lite。
