通俗易懂的讲解MobX

什么是 MobX？

想象一下，你有一个小白板，上面写着你每天要做的事情。你每完成一件事，就在白板上打个勾。这个小白板就像是你的“状态”，而你打勾的动作就是“更新状态”。

MobX 就是这样一个工具，它帮助你管理和更新你的“小白板”。

核心概念

MobX 有几个核心概念：observable、action、computed 和 reaction。我们用一个家庭日常生活的例子来解释这些概念。

Observable（可观察的）

想象你有一个家庭记账本，上面记录了每个人的花销。这个记账本就是 observable，因为它是我们要观察和跟踪的对象。

在代码中，你可以这样创建一个 observable：

import {
    observable } from "mobx";

const familyExpenses = observable({
   
  father: 0,
  mother: 0,
  child: 0
});

Action（动作）

当你或者你的家人花了钱，你需要更新记账本。这时候，你就需要一个 action，它是用来改变 observable 状态的。

在代码中，action 可能是这样的：

import {
    action } from "mobx";

const addExpense = action((person, amount) => {
   
  familyExpenses[person] += amount;
});

Computed（计算值）

有时候，你可能想知道家庭总花销。这时候，你不需要手动去加每个人的花销，而是可以用 computed 来自动计算。

在代码中，computed 可能是这样的：

import {
    computed } from "mobx";

const totalExpenses = computed(()