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

本文由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可以極大地加快應用程序速度的方法之一。

更多！

我不會再繼續重寫MobX精彩的文檔了。查看文檔以了解有關使用和創建可觀察對象的更多方法。

(以下內容略去部分代碼示例和詳細解釋，保留核心內容和結構)

將MobX投入使用

在過分枯燥之前，讓我們構建一些東西。

這是一個簡單的非MobX示例，它將顯示每當人員更改時人員的全名。

注意，即使我們從未更改名字，名稱也渲染了10次。您可以使用許多事件或檢查某種更改的有效負載來優化此問題。這工作量太大了。

這是一個使用MobX構建的相同示例：

注意，沒有事件、觸發器或on。使用MobX，您正在處理最新值以及它已更改的事實。注意它只渲染了一次嗎？這是因為我沒有更改autorun正在監視的任何內容。

讓我們構建一些稍微不那麼瑣碎的東西：

在這裡，我們能夠編輯整個person對象並自動監視數據輸出。現在，此示例中有一些軟點，最值得注意的是輸入值與person對像不同步。讓我們解決這個問題：

我知道，你還有一個抱怨：“Ruby，你渲染過度了！”你是對的。這就是為什麼許多人選擇使用React的原因。 React允許您輕鬆地將輸出分解成可以單獨渲染的小組件。

為了完整起見，這裡有一個我已優化的jQuery示例。

我會在真實的應用程序中做這樣的事情嗎？可能不會。如果我需要這種粒度，我隨時都會使用React。當我在真實的應用程序中使用MobX和jQuery時，我使用足夠細緻的autorun()，以至於我沒有在每次更改時都重建整個DOM。

您已經走到了這一步，所以這裡是用React和MobX構建的相同示例

讓我們構建一個幻燈片放映

您將如何表示幻燈片放映的狀態？讓我們從單個幻燈片工廠開始：

我們應該有一些東西可以聚合我們所有的幻燈片。讓我們現在構建它：

幻燈片放映開始了！這更有趣，因為我們有一個可觀察的幻燈片數組，它允許我們從集合中添加和刪除幻燈片，並相應地更新我們的UI。接下來，我們添加activeSlide計算值，該值將根據需要保持自身最新。

讓我們渲染我們的幻燈片放映。我們還沒有準備好HTML輸出，所以我們只會打印到控制台。

很酷，我們有一些幻燈片，autorun剛剛打印出了它們當前的狀態。讓我們更改一個或兩個幻燈片：

看起來我們的autorun正在工作。如果您更改autorun正在監視的任何內容，它將觸發。讓我們將輸出派生從控制台更改為HTML：

我們現在已經有了這個幻燈片放映的基本顯示，但是，還沒有交互性。您不能點擊縮略圖並更改主圖像。但是，您可以輕鬆地使用控制台更改圖像文本並添加幻燈片：

讓我們創建我們的第一個也是唯一一個操作來設置選定的幻燈片。我們將不得不通過添加以下操作來修改slideShowModelFactory：

您可能會問，為什麼要使用操作？好問題！ MobX操作不是必需的，正如我在更改可觀察值的其他示例中所展示的那樣。

操作在幾個方面對您有所幫助。首先，所有MobX操作都在事務中運行。這意味著我們的autorun和其他MobX反應將等待操作完成後再觸發。考慮一下。如果我嘗試在事務之外停用活動幻燈片並激活下一個幻燈片會發生什麼？我們的autorun將觸發兩次。第一次運行會很尷尬，因為將沒有活動幻燈片可供顯示。

除了它們的事務性質之外，MobX操作往往使調試更簡單。我傳遞給mobx.action的第一個可選參數是字符串“set active slide”。此字符串可以使用MobX的調試API輸出。

所以我們有我們的操作，讓我們使用jQuery連接它的用法：

就是這樣。您現在可以點擊縮略圖，並且活動狀態將按預期傳播。這是幻燈片放映的工作示例：

這是一個使用React的相同幻燈片放映的示例。

注意，我根本沒有更改模型？就MobX而言，React只是您數據的另一種派生，例如jQuery或控制台。

jQuery幻燈片放映示例的警告

請注意，我沒有以任何方式優化jQuery示例。我們在每次更改時都會破壞整個幻燈片放映DOM。通過破壞，我的意思是我們在每次點擊時都會替換幻燈片放映的所有HTML。如果您要構建一個強大的基於jQuery的幻燈片放映，您可能會在初始渲染後調整DOM，方法是設置和刪除活動類並更改mainImage的src屬性。

想了解更多？

如果您想了解更多關於MobX的信息，請查看下面一些其他有用的資源：

如果您有任何疑問，請在下面的評論中告訴我，或者在MobX gitter頻道中找到我。

關於使用MobX管理JavaScript應用程序狀態的常見問題解答（FAQ）

(以下內容略去FAQ部分，因為篇幅過長，且與核心內容關係不大。)

以上是如何使用MOBX管理JavaScript應用程序狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！