如何使用MOBX管理JavaScript应用程序状态-js教程-PHP中文网

How to Manage Your JavaScript Application State with MobX

本文由Michel Weststrate和Aaron Boyer同行评审。感谢所有SitePoint的同行评审员，使SitePoint的内容尽善尽美！

如果您曾经使用jQuery编写过比非常简单的应用程序更复杂的应用程序，您可能遇到过保持UI不同部分同步的问题。通常，数据的更改需要反映在多个位置，并且随着应用程序的增长，您可能会发现自己陷入困境。为了控制这种混乱，通常使用事件来让应用程序的不同部分知道何时发生了更改。

那么，您今天是如何管理应用程序状态的呢？我要冒昧地说，您过度订阅了更改。没错。我什至不认识你，但我就要指出来。如果您没有过度订阅，那么我敢肯定您工作太努力了。

当然，除非您使用MobX……

关键要点

利用MobX简化状态管理：利用MobX通过可观察对象有效地管理应用程序状态，减少在Redux等其他状态管理库中发现的复杂性和样板代码。
MobX自动更新：实现MobX的autorun功能，以自动响应状态更改更新UI组件，无需手动事件处理，从而简化整个应用程序的同步过程。
使用计算值增强性能：使用MobX的计算值从状态派生数据，确保仅在必要时重新渲染组件，从而提高整体应用程序性能。
MobX易于上手：通过将标准对象转换为可观察对象，将MobX无缝集成到现有的JavaScript应用程序中，允许逐步采用，而无需完全重写。
利用MobX操作进行事务性修改：应用MobX操作将状态修改封装在事务中，从而批量更新并最大限度地减少冗余渲染，从而获得更高效、更不易出错的代码。

什么是“状态”？

这是一个人物。嘿，那就是我！我有一个firstName、lastName和age。此外，如果我遇到麻烦，fullName()函数可能会出现。

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

登录后复制

您将如何通知您的各种输出（视图、服务器、调试日志）对该人员的修改？您将在何时触发这些通知？在MobX之前，我将使用触发自定义jQuery事件或js-signals的setter。这些选项为我提供了良好的服务，但是，我对它们的用法远非细致入微。如果person对象的任何部分发生更改，我将触发一个“changed”事件。

假设我有一段视图代码显示我的名字。如果我更改了我的年龄，该视图将更新，因为它与该person的changed事件绑定。

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

登录后复制

我们如何收紧这种过度触发？简单。只需为每个字段设置一个setter，并为每个更改设置单独的事件。等等——如果您想一次更改age和firstName，您可能会开始过度触发。您必须创建一种方法来延迟事件触发，直到两个更改都完成。这听起来像工作，而我很懒……

MobX来救援

MobX是由Michel Weststrate开发的一个简单、专注、高效且不显眼的状态管理库。

来自MobX文档：

只需对状态执行某些操作，MobX将确保您的应用程序尊重这些更改。

person.events = {};

person.setData = function (data) {
  $.extend(person, data);
  $(person.events).trigger('changed');
};

$(person.events).on('changed', function () {
  console.log('first name: ' + person.firstName);
});

person.setData({age: 38});

登录后复制

注意到区别了吗？mobx.observable是我所做的唯一更改。让我们再次查看该console.log示例：

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
});

登录后复制

使用autorun，MobX将只观察已访问的内容。

如果您认为这很整洁，请查看以下内容：

mobx.autorun(function () {
  console.log('first name: ' + person.firstName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 仍然为空
person.firstName = 'Matthew!'; // 此处触发

登录后复制

感兴趣吗？我知道你感兴趣。

MobX核心概念

observable

mobx.autorun(function () {
  console.log('Full name: ' + person.fullName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 触发
person.firstName = 'Matthew!'; // 也触发

登录后复制

MobX可观察对象只是对象。在这个例子中，我没有观察任何东西。此示例显示了如何开始将MobX集成到您现有的代码库中。只需使用mobx.observable()或mobx.extendObservable()即可开始。

autorun

var log = function(data) {
  $('#output').append('' +data+ '');
}

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 34
});

log(person.firstName);

person.firstName = 'Mike';
log(person.firstName);

person.firstName = 'Lissy';
log(person.firstName);

登录后复制

当您的可观察值发生变化时，您想做些什么，对吧？让我介绍autorun()，它将在任何引用的可观察值发生变化时触发回调。请注意，在上面的示例中，当age更改时，autorun()不会触发。

computed

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 0
});

mobx.autorun(function () {
  log(person.firstName + ' ' + person.age);
});

// 这将打印Matt NN 10次
_.times(10, function () {
  person.age = _.random(40);
});

// 这将什么也不打印
_.times(10, function () {
  person.lastName = _.random(40);
});

登录后复制

看到那个fullName函数了吗？注意它没有参数以及get？MobX将自动为您创建一个计算值。这是我最喜欢的MobX功能之一。注意person.fullName有什么奇怪的地方吗？再看一遍。这是一个函数，您无需调用它就可以看到结果！通常，您将调用person.fullName()而不是person.fullName。您刚刚遇到了您的第一个JS getter。

乐趣并没有到此结束！MobX将监视计算值的依赖项以进行更改，并且仅在它们发生更改时运行。如果没有任何更改，则将返回缓存的值。请参见下面的情况：

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 0,
  get fullName () {
    return this.firstName + ' ' + this.lastName;
  }
});
log(person.fullName);

person.firstName = 'Mike';
log(person.fullName);

person.firstName = 'Lissy';
log(person.fullName);

登录后复制

在这里您可以看到，我已经多次命中了person.fullName计算，但是函数运行的唯一时间是当firstName或lastName发生更改时。这是MobX可以极大地加快应用程序速度的方法之一。