mobx是一个基于函数响应式编程的状态管理库，通过可观察对象自动追踪状态变化并更新依赖的计算值和ui，无需手动同步。其核心概念包括：①可观察对象（observables）用于追踪状态，可通过@observable装饰器或observable()函数定义；②计算值（computed values）由可观察状态派生，使用@computed自动更新；③动作（actions）是唯一允许修改状态的方法，通过@action确保变更可控；④反应（reactions）在状态变化时触发副作用，如autorun监听并执行相应逻辑。相比redux需手动dispatch和reducer更新状态，mobx实现自动响应，减少模板代码，api更简洁易用。新项目推荐使用mobx 6，因需显式调用makeobservable，提升可维护性与清晰度；老项目可逐步迁移。与react集成主要通过mobx-react的observer高阶组件或mobx-react-lite的observer hook，使组件响应状态变化并自动重渲染。性能优化方面，应只观察必要属性、使用react.memo避免无关渲染、利用usememo和usecallback缓存计算与回调、避免在渲染中修改状态以防死循环，并通过transaction批量更新状态以减少重复触发。综上所述，mobx提供了一套高效、直观且易于上手的状态管理方案，适用于追求开发效率与响应式架构的react应用。
MobX本质上是一个状态管理库，它通过函数响应式编程（FRP）的理念，让你的应用状态和UI能够自动同步。简单来说，你修改了状态，UI就会自动更新，不需要手动去“告诉”UI该怎么变。
MobX通过可观察对象(Observables)来追踪状态变化，当这些状态发生变化时，依赖于这些状态的计算值(Computed Values)和副作用(Reactions)会自动更新。
解决方案
MobX的核心在于其简单的API和强大的响应式引擎。它主要围绕以下几个核心概念展开：
-
可观察对象 (Observables)： 这是MobX追踪状态变化的基础。你可以使用
@observable
装饰器，observable()
函数或observable.box()
来创建可观察对象。任何对这些对象的修改都会被MobX追踪到。import { observable } from "mobx"; class Store { @observable count = 0; } const store = new Store(); store.count = 1; // MobX会追踪到这个变化 -
计算值 (Computed Values)： 这些值是根据可观察对象自动派生的。当依赖的可观察对象发生变化时，计算值会自动更新。使用
@computed
装饰器来定义计算值。import { observable, computed } from "mobx"; class Store { @observable count = 0; @computed get doubleCount() { return this.count * 2; } } const store = new Store(); console.log(store.doubleCount); // 输出 0 store.count = 1; console.log(store.doubleCount); // 输出 2，自动更新 -
动作 (Actions)： 这是唯一允许修改状态的地方。使用
@action
装饰器或action()
函数来定义动作。这样做可以确保状态变化是可控的，并且可以进行优化。import { observable, action } from "mobx"; class Store { @observable count = 0; @action increment() { this.count++; } } const store = new Store(); store.increment(); // 安全地修改了状态 -
反应 (Reactions)： 这些是当可观察对象发生变化时需要执行的副作用。常见的反应包括更新UI，发送网络请求等。可以使用
autorun
，reaction
或observer
（React组件）来创建反应。import { autorun, observable } from "mobx"; const name = observable.box("Alice"); autorun(() => { console.log(`Name is: ${name.get()}`); }); name.set("Bob"); // 输出 "Name is: Bob"，自动执行副作用
MobX相较于Redux，最大的区别在于其响应式的特性。Redux需要手动dispatch action，然后通过reducer来更新状态，再手动连接到UI。而MobX则完全自动化了这个过程，你只需要专注于状态的定义和修改，剩下的事情MobX会帮你搞定。
MobX的另一个优势是其简洁的API。相比Redux的boilerplate代码，MobX的代码更加简洁易懂，上手更快。
如何选择合适的MobX版本？MobX 5 vs MobX 6
MobX 5和MobX 6的主要区别在于是否需要显式地使用
makeObservable。在MobX 5中，装饰器默认会使类的属性变成可观察的。而在MobX 6中，你需要显式地调用
makeObservable(this)来声明哪些属性是可观察的。
MobX 6的优点是更清晰，更可控。你可以明确地知道哪些属性是可观察的，避免了意外的副作用。缺点是需要手动调用
makeObservable，稍微增加了一些代码量。
如果你是新项目，推荐使用MobX 6。如果你是老项目，可以考虑逐步迁移到MobX 6。
MobX如何与React集成？使用mobx-react简化开发
mobx-react是一个官方提供的库，用于将MobX与React无缝集成。它提供了一个
observer高阶组件，可以将React组件转换成响应式的组件。当组件依赖的可观察对象发生变化时，组件会自动重新渲染。
import { observer } from "mobx-react";
import { store } from "./store";
const MyComponent = observer(() => {
return (
<div>
Count: {store.count}
<button onClick={() => store.increment()}>Increment</button>
</div>
);
});
export default MyComponent;mobx-react-lite是
mobx-react的轻量级版本，它只提供
observerhook，没有 class component 的支持。如果你使用函数式组件和 hooks，推荐使用
mobx-react-lite。
MobX性能优化：避免不必要的渲染和计算
虽然MobX会自动更新UI，但过度更新UI会影响性能。以下是一些MobX性能优化的技巧：
- 只观察需要的属性： 避免观察整个对象，只观察组件真正需要的属性。
-
使用
React.memo
： 对于纯函数组件，可以使用React.memo
来避免不必要的渲染。 -
使用
useMemo
和useCallback
： 对于计算值和回调函数，可以使用useMemo
和useCallback
来避免重复计算和创建。 - 避免在渲染函数中修改状态： 在渲染函数中修改状态会导致无限循环。
-
使用
transaction
： 如果需要批量修改状态，可以使用transaction
来将多个修改合并成一个更新。
import { transaction } from "mobx";
class Store {
@observable firstName = "Alice";
@observable lastName = "Bob";
@action updateName(firstName, lastName) {
transaction(() => {
this.firstName = firstName;
this.lastName = lastName;
});
}
}这些优化技巧可以帮助你构建高性能的MobX应用。
