react如何使用mobx
使用 MobX 在 React 项目中
在 React 项目中集成 MobX 需要安装必要的依赖包并配置 Store 和组件。以下是详细步骤：
安装依赖
确保项目中已安装 mobx 和 mobx-react-lite（针对函数组件）或 mobx-react（针对类组件）。使用以下命令安装：
npm install mobx mobx-react-lite
# 或
yarn add mobx mobx-react-lite创建 MobX Store
创建一个可观察的状态管理类，使用 makeAutoObservable 或 makeObservable 装饰状态和方法。
// store/counterStore.js
import { makeAutoObservable } from "mobx";
class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count += 1;
}
decrement() {
this.count -= 1;
}
}
export const counterStore = new CounterStore();在组件中使用 Store
通过 observer 包装组件，使其响应状态变化。使用 React Context 或直接导入 Store 实例。
// Counter.jsx
import { observer } from "mobx-react-lite";
import { counterStore } from "./store/counterStore";
const Counter = observer(() => {
return (
<div>
<h1>Count: {counterStore.count}</h1>
<button onClick={() => counterStore.increment()}>+</button>
<button onClick={() => counterStore.decrement()}>-</button>
</div>
);
});
export default Counter;使用 Provider 注入 Store（可选）
对于多 Store 或需要依赖注入的场景，可以使用 Context 提供 Store。
// App.jsx
import { createContext } from "react";
import { counterStore } from "./store/counterStore";
import Counter from "./Counter";
export const StoreContext = createContext();
function App() {
return (
<StoreContext.Provider value={{ counterStore }}>
<Counter />
</StoreContext.Provider>
);
}
export default App;组件中通过 Context 使用 Store
import { useContext } from "react";
import { observer } from "mobx-react-lite";
import { StoreContext } from "./App";
const Counter = observer(() => {
const { counterStore } = useContext(StoreContext);
return (
<div>
<h1>Count: {counterStore.count}</h1>
<button onClick={() => counterStore.increment()}>+</button>
<button onClick={() => counterStore.decrement()}>-</button>
</div>
);
});异步操作处理
MobX 支持异步操作，通常结合 runInAction 确保状态变更在事务中完成。
import { runInAction } from "mobx";
class UserStore {
users = [];
loading = false;
async fetchUsers() {
this.loading = true;
const response = await fetch("/api/users");
const data = await response.json();
runInAction(() => {
this.users = data;
this.loading = false;
});
}
}计算属性和反应
使用 computed 定义派生状态，或 reaction 监听状态变化。
import { computed, reaction } from "mobx";
class CartStore {
items = [];
get totalItems() {
return this.items.length;
}
constructor() {
reaction(
() => this.items.length,
(length) => console.log(`Items count changed: ${length}`)
);
}
}通过以上步骤，可以高效地将 MobX 集成到 React 项目中，实现响应式状态管理。
