mobx如何管理react状态
Mobx 管理 React 状态的方法
Mobx 是一个状态管理库，通过响应式编程简化 React 应用的状态管理。以下是核心方法：
定义可观察状态
使用 makeObservable 或 makeAutoObservable 将对象或类转换为可观察状态。数据变更会自动触发依赖更新。
import { makeAutoObservable } from "mobx";
class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
}在 React 组件中使用状态
通过 observer 高阶组件包裹 React 组件，使其能够响应状态变化并自动重新渲染。
import { observer } from "mobx-react-lite";
const Counter = observer(({ store }) => {
return (
<div>
<button onClick={() => store.increment()}>Count: {store.count}</button>
</div>
);
});使用 React Context 共享状态
通过 React Context 将状态传递到组件树中，避免逐层传递。
import { createContext, useContext } from "react";
const CounterContext = createContext();
const App = () => {
return (
<CounterContext.Provider value={new CounterStore()}>
<Counter />
</CounterContext.Provider>
);
};
const Counter = observer(() => {
const store = useContext(CounterContext);
return <button onClick={() => store.increment()}>{store.count}</button>;
});计算值与副作用
使用 computed 定义派生状态，使用 reaction 或 autorun 处理副作用。
class TodoStore {
todos = [];
get completedCount() {
return this.todos.filter(todo => todo.completed).length;
}
constructor() {
makeAutoObservable(this);
autorun(() => console.log("Completed todos:", this.completedCount));
}
}异步操作管理
通过 flow 或 runInAction 处理异步操作，确保状态变更在动作内完成。
class UserStore {
users = [];
state = "pending";
fetchUsers = flow(function* () {
this.state = "pending";
try {
const response = yield fetch("/api/users");
runInAction(() => {
this.users = response.data;
this.state = "done";
});
} catch (error) {
runInAction(() => (this.state = "error"));
}
});
}最佳实践
- 细粒度观察：仅观察必要数据以减少渲染次数。
- 避免直接修改状态：通过 Action 封装修改逻辑。
- 合理使用
observer：仅包裹需要响应变化的组件。 - 类型安全：结合 TypeScript 提升代码可维护性。
通过以上方法，Mobx 能够高效管理 React 应用状态，提供简洁的响应式编程体验。
