MobX 最佳实践

MobX 是一个简单、可预测的 JavaScript 状态管理库，它使状态管理变得非常简单。以下是一些 MobX 的最佳实践：

1. 使用 observable 来声明状态

使用 observable 来声明你的状态，这样 MobX 就可以跟踪这些状态的变化。

import { observable } from 'mobx';

const store = observable({
  count: 0
});

2. 使用 action 来修改状态

使用 action 来包装修改状态的代码，这样 MobX 就可以跟踪这些变化，并自动更新视图。

import { action } from 'mobx';

store.incrementCount = action(() => {
  store.count++;
});

3. 使用 computed 来创建派生状态

使用 computed 来创建基于其他状态的派生状态，这样就可以自动计算并更新。

import { computed } from 'mobx';

store.isEven = computed(() => store.count % 2 === 0);

4. 使用 autorun 来自动执行副作用

使用 autorun 来自动执行副作用，当相关状态发生变化时，副作用会自动执行。

import { autorun } from 'mobx';

autorun(() => {
  console.log(`当前计数为：${store.count}`);
});

5. 使用 makeAutoObservable 来简化 observable 的使用

如果你有一个普通的 JavaScript 对象，你可以使用 makeAutoObservable 来自动将其转换为 observable 对象。

import { makeAutoObservable } from 'mobx';

class User {
  constructor(name) {
    makeAutoObservable(this);
    this.name = name;
  }
}

6. 避免在 observable 中使用复杂逻辑

尽量保持 observable 中的逻辑简单，避免在 observable 中进行复杂的计算或异步操作。

7. 使用 MobX 的插件来扩展功能

MobX 提供了许多插件，可以扩展其功能，例如 mobx-react、mobx-state-tree 等。

更多关于 MobX 的最佳实践，可以参考本站的其他文章。

深入理解 MobX

MobX Logo