When to use computed/observables in mobx

在 MobX 中，合理选择使用计算值（computed values）和可观测值（observables）对于优化你的应用性能和确保响应式系统的正确性至关重要。我将分别说明它们的使用场景，并给出相应的例子：

可观测值（Observables）

可观测值是 MobX 中的基本概念，用于追踪应用状态的变化。你应该将那些你想要在 UI 或其他计算中作为依赖的状态定义为 observable。这些状态可以是简单数据类型，如字符串和数字，也可以是复杂数据类型，如对象、数组和映射。

使用场景举例：

假设你正在开发一个待办事项应用，用户可以添加、删除和标记待办事项。在这种情况下，待办事项列表应该是一个 observable，因为 UI 需要在待办事项列表的内容发生变化时更新显示。

javascript
import { observable } from 'mobx';

class TodoStore {
  @observable todos = [];

  addTodo(item) {
    this.todos.push(item);
  }

  removeTodo(id) {
    this.todos = this.todos.filter(todo => todo.id !== id);
  }
}

计算值（Computed Values）

计算值用于根据现有的 observables 自动派生一些值。当依赖的 observable 值变化时，computed values 会自动重新计算。使用计算值可以帮助你避免不必要的计算，并保持数据的一致性。

使用场景举例：

继续以待办事项应用为例，假设你需要在 UI 中显示未完成的待办事项数量。这个值可以从 todos observable 派生得到，因此它应该定义为一个 computed value。

javascript
import { computed } from 'mobx';

class TodoStore {
  @observable todos = [];

  @computed get unfinishedTodoCount() {
    return this.todos.filter(todo => !todo.finished).length;
  }
}

在这个例子中，unfinishedTodoCount 是一个计算值，它依赖于 todos 这个 observable。每当 todos 发生变化时，unfinishedTodoCount 会自动更新，这样确保了 UI 中显示的未完成待办事项数量总是最新的。

总结

• 使用可观测值：当你有一些应用状态，这些状态的变化需要被追踪并触发 UI 更新或其他副作用时。
• 使用计算值：当你需要从现有的 observables 派生或计算出新的值，并且希望这个值能够自动更新以反映依赖数据的变化时。

正确地使用 observables 和 computed values 不仅可以使你的应用更加高效，还能使代码更清晰、更容易维护。