这是我参与「第四届青训营 」笔记创作活动的的第14天

什么是MobX

MobX是一种简单、可扩展且经过实战检验的状态管理解决方案。MobX背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得。

MobX原理简介

状态是每个应用程序的核心，创建有缺陷、无法管理的应用程序的最快方法莫过于生成与徘徊的局部变量不同步的不一致状态或状态。因此，许多状态管理解决方案尝试限制修改状态的方式，例如通过使状态不可变。但这带来了新的问题：数据需要规范化，引用完整性无法再得到保证。

MobX通过解决根本问题再次使状态管理变得简单：它使不可能产生不一致的状态。实现这一目标的策略很简单：确保可以从应用程序状态派生的所有内容都将派生出来。

简单代码

在MobX中，我们可以声明当组件状态更新后，可以自动更新组件。自动执行完全依赖于状态的代码。因此，函数组件会自动更新，就像电子表格中的图表一样。为了实现这一点，必须变得可观察，以便MobX可以跟踪正在进行的所有更改。让我们对类进行足够多的更改以实现此目的。

此外，该属性可以从待办事项列表自动派生，我们可以在对象上引入可观察的属性：

class ObservableTodoStore {
  todos = [];
  pendingRequests = 0;

  constructor() {
    makeObservable(this, {
      todos: observable,
      pendingRequests: observable,
      completedTodosCount: computed,
      report: computed,
      addTodo: action,
    });
    autorun(() => console.log(this.report));
  }

  get completedTodosCount() {
    return this.todos.filter(
      todo => todo.completed === true
    ).length;
  }

  get report() {
    if (this.todos.length === 0)
      return "<none>";
    const nextTodo = this.todos.find(todo => todo.completed === false);
    return `Next todo: "${nextTodo ? nextTodo.task : "<none>"}". ` +
      `Progress: ${this.completedTodosCount}/${this.todos.length}`;
  }

  addTodo(task) {
    this.todos.push({
      task: task,
      completed: false,
      assignee: null
    });
  }
}

const observableTodoStore = new ObservableTodoStore();

总结

相较于Redux复杂的概念，MobX显得更加地简洁和易用，一个前端开发者根据文档即可在半小时内上手。这决定它十分适合用于中小型项目。