深入剖析MobX之autorun：掌握响应式编程的精髓

2024-01-05 20:16:01

MobX 源码解析二（autorun）

在上一篇文章中，我们已经了解了MobX中observable所做的工作。然而，在我们的示例中，我们只是在按钮的点击事件中对bankUser.income进行自增和自减，并没有对incomeLabel进行操作，这是为什么呢？

autorun的作用

MobX中的autorun函数是一个强大的工具，它允许我们创建对状态变化做出反应的应用程序。autorun函数接收一个计算函数作为参数，该函数将MobX observable作为输入，并返回一个值。当任何输入的observable发生变化时，autorun函数将重新运行计算函数，并使用新的值更新输出值。

让我们通过一个简单的示例来了解autorun函数是如何工作的：

import {autorun} from "mobx";

class BankUser {
    @observable income = 100;
}

const bankUser = new BankUser();

autorun(() => {
    const incomeLabel = document.getElementById("income-label");
    incomeLabel.innerText = bankUser.income;
});

bankUser.income += 10;

在这个示例中，我们首先定义了一个BankUser类，其中有一个observable属性income。然后，我们创建了一个新的BankUser实例bankUser。

接下来，我们使用autorun函数创建一个autorun函数，该函数接收一个计算函数作为参数。计算函数接收bankUser.income作为输入，并返回一个字符串，其中包含bankUser.income的当前值。

当autorun函数运行时，它将把计算函数的返回值保存在一个内部变量中。当bankUser.income发生变化时，autorun函数将重新运行计算函数，并将新的返回值保存在内部变量中。

最后，我们使用document.getElementById函数获取income-label元素，并将计算函数的返回值设置为income-label元素的innerText属性。

当我们运行这个示例时，autorun函数将运行计算函数，并将bankUser.income的当前值保存在内部变量中。当我们点击按钮时，bankUser.income将增加10，autorun函数将重新运行计算函数，并将新的bankUser.income值保存在内部变量中。然后，我们将计算函数的返回值设置为income-label元素的innerText属性，这样income-label元素的文本内容就会更新为bankUser.income的最新值。