首頁 >web前端 >js教程 >如何使用MOBX管理JavaScript應用程序狀態

如何使用MOBX管理JavaScript應用程序狀態

Christopher Nolan原創: 2025-02-17 08:57:08615瀏覽

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()函數可能會出現。

<code class="language-javascript">var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};</code>

您將如何通知您的各種輸出（視圖、服務器、調試日誌）對該人員的修改？您將在何時觸發這些通知？在MobX之前，我將使用觸發自定義jQuery事件或js-signals的setter。這些選項為我提供了良好的服務，但是，我對它們的用法遠非細緻入微。如果person對象的任何部分發生更改，我將觸發一個“changed”事件。

假設我有一段視圖代碼顯示我的名字。如果我更改了我的年齡，該視圖將更新，因為它與該person的changed事件綁定。

<code class="language-javascript">var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};</code>

我們如何收緊這種過度觸發？簡單。只需為每個字段設置一個setter，並為每個更改設置單獨的事件。等等——如果您想一次更改age和firstName，您可能會開始過度觸發。您必須創建一種方法來延遲事件觸發，直到兩個更改都完成。這聽起來像工作，而我很懶……

MobX來救援

MobX是由Michel Weststrate開發的一個簡單、專注、高效且不顯眼的狀態管理庫。

來自MobX文檔：

只需對狀態執行某些操作，MobX將確保您的應用程序尊重這些更改。

<code class="language-javascript">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});</code>

注意到區別了嗎？ mobx.observable是我所做的唯一更改。讓我們再次查看該console.log示例：

<code class="language-javascript">var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
});</code>

使用autorun，MobX將只觀察已訪問的內容。

如果您認為這很整潔，請查看以下內容：

<code class="language-javascript">mobx.autorun(function () {
  console.log('first name: ' + person.firstName);
});

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

感興趣嗎？我知道你感興趣。

MobX核心概念

observable

<code class="language-javascript">mobx.autorun(function () {
  console.log('Full name: ' + person.fullName);
});

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

MobX可觀察對像只是對象。在這個例子中，我沒有觀察任何東西。此示例顯示瞭如何開始將MobX集成到您現有的代碼庫中。只需使用mobx.observable()或mobx.extendObservable()即可開始。

autorun

<code class="language-javascript">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);</code>

當您的可觀察值發生變化時，您想做些什麼，對吧？讓我介紹autorun()，它將在任何引用的可觀察值發生變化時觸發回調。請注意，在上面的示例中，當age更改時，autorun()不會觸發。

computed

<code class="language-javascript">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);
});</code>

看到那個fullName函數了嗎？注意它沒有參數以及get？ MobX將自動為您創建一個計算值。這是我最喜歡的MobX功能之一。注意person.fullName有什麼奇怪的地方嗎？再看一遍。這是一個函數，您無需調用它就可以看到結果！通常，您將調用person.fullName()而不是person.fullName。您剛剛遇到了您的第一個JS getter。

樂趣並沒有到此結束！ MobX將監視計算值的依賴項以進行更改，並且僅在它們發生更改時運行。如果沒有任何更改，則將返回緩存的值。請參見下面的情況：

<code class="language-javascript">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);</code>

在這裡您可以看到，我已經多次命中了person.fullName計算，但是函數運行的唯一時間是當firstName或lastName發生更改時。這是MobX可以極大地加快應用程序速度的方法之一。

如何使用MOBX管理JavaScript應用程序狀態

observable

autorun

computed

更多！

相關文章