mobx如何驱动react
Mobx 驱动 React 的核心机制
Mobx 通过透明的响应式编程模型与 React 的组件系统结合，实现高效的状态管理。以下是关键实现方式：
响应式状态与组件绑定
Mobx 使用 observable 包装状态对象，使其变为可观察的。当状态变化时，依赖该状态的 React 组件会自动重新渲染。
import { observable } from 'mobx';
class Store {
@observable count = 0;
}观察者组件
通过 observer 高阶组件或装饰器，将 React 组件转换为响应式组件。组件会自动订阅渲染过程中使用的所有 observable 状态。
import { observer } from 'mobx-react';
@observer
class Counter extends React.Component {
render() {
return <div>{this.props.store.count}</div>;
}
}自动依赖追踪
Mobx 在组件渲染时记录所有被访问的 observable 属性。当这些属性变化时，仅触发依赖它们的组件更新，避免不必要的渲染。
计算属性优化
使用 computed 定义派生状态，结果会被缓存并在依赖项未变化时复用，减少重复计算。
class Store {
@observable items = [];
@computed get total() {
return this.items.length;
}
}异步操作处理
通过 action 包装状态修改方法，确保异步操作后的状态变更能批量处理并触发精确更新。
class Store {
@action
async fetchData() {
this.loading = true;
const data = await api.get();
runInAction(() => {
this.data = data;
this.loading = false;
});
}
}与 React 生命周期集成
Mobx-react 自动处理组件挂载/卸载时的订阅管理，通过 reaction 或 autorun 可在组件中安全地建立副作用。
componentDidMount() {
this.disposer = autorun(() => {
console.log(this.props.store.activeItem);
});
}
componentWillUnmount() {
this.disposer();
}性能优化策略
使用 observer 的组件默认实现 shouldComponentUpdate 的深度比较，避免因父组件无关更新导致的子组件渲染。
@observer
class OptimizedComponent extends React.Component {
// 自动实现浅比较优化
}多 Store 整合
通过 React Context 或直接注入方式将多个 Store 传递给组件树，保持状态逻辑的模块化。
const stores = { userStore, cartStore };
<Provider {...stores}>
<App />
</Provider>这种设计模式使得 Mobx 能高效驱动 React 界面更新，同时保持代码的声明性和可维护性。
