什么是MobX？响应式状态管理

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和强大的响应式引擎。它主要围绕以下几个核心概念展开：

1. 可观察对象 (Observables)： 这是MobX追踪状态变化的基础。你可以使用

   @observable

   装饰器，

   observable()

   函数或

   observable.box()

   来创建可观察对象。任何对这些对象的修改都会被MobX追踪到。

   import { observable } from "mobx";
   
   class Store {
     @observable count = 0;
   }
   
   const store = new Store();
   store.count = 1; // MobX会追踪到这个变化

2. 计算值 (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，自动更新

3. 动作 (Actions)： 这是唯一允许修改状态的地方。使用

   @action

   装饰器或

   action()

   函数来定义动作。这样做可以确保状态变化是可控的，并且可以进行优化。

   import { observable, action } from "mobx";
   
   class Store {
     @observable count = 0;
   
     @action increment() {
       this.count++;
     }
   }
   
   const store = new Store();
   store.increment(); // 安全地修改了状态

4. 反应 (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会帮你搞定。

Vuex参考手册 中文CHM版

Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如 零配置时空旅行般（基于时间轴）调试，以及状态快照 导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！

下载

MobX的另一个优势是其简洁的API。相比Redux的boilerplate代码，MobX的代码更加简洁易懂，上手更快。

如何选择合适的MobX版本？MobX 5 vs MobX 6

MobX 5和MobX 6的主要区别在于是否需要显式地使用

makeObservable

makeObservable(this)

MobX 6的优点是更清晰，更可控。你可以明确地知道哪些属性是可观察的，避免了意外的副作用。缺点是需要手动调用

makeObservable

如果你是新项目，推荐使用MobX 6。如果你是老项目，可以考虑逐步迁移到MobX 6。

MobX如何与React集成？使用mobx-react简化开发

mobx-react

observer

import { observer } from "mobx-react";
import { store } from "./store";

const MyComponent = observer(() => {
  return (
    

      Count: {store.count}
       store.increment()}>Increment
    
  );
});

export default MyComponent;

mobx-react-lite

mobx-react

observer

mobx-react-lite

MobX性能优化：避免不必要的渲染和计算

虽然MobX会自动更新UI，但过度更新UI会影响性能。以下是一些MobX性能优化的技巧：

1. 只观察需要的属性： 避免观察整个对象，只观察组件真正需要的属性。
2. 使用

   React.memo

   ： 对于纯函数组件，可以使用

   React.memo

   来避免不必要的渲染。
3. 使用

   useMemo

   和

   useCallback

   ： 对于计算值和回调函数，可以使用

   useMemo

   和

   useCallback

   来避免重复计算和创建。
4. 避免在渲染函数中修改状态： 在渲染函数中修改状态会导致无限循环。
5. 使用

   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应用。