高效的Mobx模式（Part 1 - 構建可觀察數據）

trigkit4 發布于2019-08-23 11:43 / 785人閱讀

摘要：高效的模式提供了一種簡單而強大的方法來管理客戶端狀態。允許屬性本身可觀察，但不允許其任何子節點。默認情況下，僅將引用更改視為更改。構建可觀察數據掌握數據變更方法高階應用實例

起因

很早之前看到的一篇關于mobx的文章，之前記得是有人翻譯過的，但是怎么找都找不到，故花了點時間通過自己那半桶水的英文水平，加上Google翻譯一下，對于初學者，以及mobx的開發者提供些許幫助。

這里針對已經了解mobx，且有過一些簡單的開發的同學，其中對文章有一些刪減，還有翻譯的不對的地方歡迎大家指出。

高效的Mobx模式 - （Part 1）

MobX提供了一種簡單而強大的方法來管理客戶端狀態。它使用一種稱為（TFRP-Transparent Functional Reactive Programming）的技術，其中如果任何相關值發生變化，它會自動計算派生值。也就是通過設置跟蹤值更改的依賴關系圖來完成的。

MobX導致思維方式的轉變（For the better），并改變您的心理模型圍繞管理客戶端狀態。

Part 1 - 構建可觀察者

當我們使用Mobx時，建立客戶端狀態模型是第一步，這是最有可能被客戶端上呈現你的域模型的直接體現。實際上客戶端狀態也就是我們通常說的Store，了解redux的對此都很熟悉，雖然你只有一個Store，但是它是由多個子Store組件的，每一個子Store用來處理應用程序的各種功能。

最簡單的入門方法是注釋Store的屬性，這些屬性將隨著@observable而不斷變化。請注意，我使用的是裝飾器語法，但使用簡單的ES5函數包裝器可以實現相同的功能。

import { observable } from "mobx"
class MyStore {
    @observable name
    @observable description
    @observable author

    @observable photos = [] 
}

修剪可觀察屬性

通過將對象標記為@observable，您將自動觀察其所有嵌套屬性。現在這可能是你想要的東西，但很多時候它更能限制可觀察性。你可以使用一些MobX修飾符來做到這一點：

asReference

當某些屬性永遠不會改變值時，這是非常有用的。請注意，如果您確實更改了引用本身，它將觸發更改。

let address = new Address();
let contact = observable({
    person: new Person(),
    address: asReference(address)
});

address.city = "New York"; // 不會觸發通知任何

// 將觸發通知，因為這是屬性引用更改
contact.address = new Address();

在上面的示例中，address屬性將不可觀察。如果您更改地址詳細信息，則不會收到通知。但是，如果您更改地址引用本身，您將收到通知。

一個有趣的消息是一個可觀察對象的屬性，其值具有原型（類實例）將自動使用asReference()注釋。此外，這些屬性不會被進一步遞歸。

asFlat

這比asReference略寬一些。 asFlat允許屬性本身可觀察，但不允許其任何子節點。典型用法適用于您只想觀察數組實例而不是其項目的數組。請注意，對于數組，length屬性仍然是可觀察的，因為它在數組實例上。但是，對子屬性的任何更改都不會被觀察到。

首先創建@observable所有內容，然后應用asReference和asFlat修飾符來修剪可觀察屬性。

當你深入實現應用程序的各種功能時，你會發現這種修剪的好處。且當你開始時可能并不明顯，這完全很正常。當你識別出不需要深度可觀察性的屬性時，請確保重新檢查你的Store，它可以對您的應用程序的性能產生積極影響。

import {observable} from "mobx";

class AlbumStore {
    @observable name;
    
    // 這里不需要觀察
    @observable createdDate = asReference(new Date()); 
    
    @observable description;
    @observable author;
    
    // 只觀察照片數組，而不是多帶帶的照片
    @observable photos = asFlat([]); 
}

擴展可觀察屬性

和修剪可觀察屬性相反，你可以擴展對象上可觀察性的范圍/行為，而不是刪除可觀察性。這里有三個可以控制它的修飾符：

asStructure

這會修改將新值分配給observable時完成相等性檢查的方式。默認情況下，僅將引用更改視為更改。如果您希望基于內部結構進行比較，則可以使用此修飾符。這主要是針對值類型（也稱為結構），只有在它們的值匹配時才相等。如下圖：

const { asStructure, observable } = require("mobx");

let address1 = {
    zip: 12345,
    city: "New York"
};

let address2 = {
    zip: 12345,
    city: "New York"
};

let contact = {
    address: observable(address1)
};

// 將被視為一種變化，因為它是一個新的引用
contact.address = address2;

// 使用 asStructure() 修飾
let contact2 = {
    address: observable(asStructure(address1)) 
};

// 不會被視為一種變化，因為它具有相同的價值
contact.address = address2;

asMap

默認情況下，將對象標記為可觀察對象時，它只能跟蹤最初在對象上定義的屬性。如果添加新屬性，則不會跟蹤這些屬性。使用asMap，您甚至可以使新添加的屬性可觀察。在內部，MobX將創建一個類似ES6的Map，它具有與原生Map類似的API。

除了使用此修飾符，您還可以通過從常規可觀察對象開始來實現類似的效果。然后，您可以使用extendObservable()API添加更多可觀察的屬性。當您想要延遲添加可觀察屬性時，此API非常有用。

computed

這是一個如此強大的概念，其重要性無法得到足夠的重視。計算屬性不是域的真實屬性，而是使用實際屬性派生（也稱為計算）。一個典型的例子是person實例的fullName屬性。它派生自firstName和lastName屬性。通過創建簡單的計算屬性，您可以簡化域邏輯。例如，您可以只創建一個計算的hasLastName屬性，而不是檢查一個人是否在任何地方都有lastName

class Person {
    @observable firstName;
    @observable lastName;

    @computed get fullName() {
        return `${this.firstName}, ${this.lastName}`;
    }

    @computed get hasLastName() {
        return !!this.lastName;
    }
}

構建可觀察樹是使用MobX的一個重要方面，這使MobX開始跟蹤您的store中有趣且值得改變的部分！

特此聲明： 在新版本4.0以上，asFlat、asStructure、asReference以及asMap等其他API已經被棄用，具體事宜需參閱更新文檔。

Part 1 - 構建可觀察數據

Part 2 - 掌握數據變更方法

Part 3 - 高階應用實例

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97366.html

高效的Mobx模式（Part 2 - 掌握數據變更方法）

摘要：有了這個，下一步就是開始對變化作出反應。請注意，此延遲通知僅適用于當前函數范圍中的。最快的方法是提供功能。只有當返回的數據發生變化時，才會執行副作用。最棒的部分是它會在運行后自動處理副作用。構建可觀察數據掌握數據變更方法高階應用實例在上一部分中，我們研究了如何設置MobX狀態樹并使其可觀察。有了這個，下一步就是開始對變化作出反應。坦率地說，這就是有趣的開始！ MobX保證只要您的...

xinhaip 2019-08-23 11:45 評論0 收藏0
高效的Mobx模式（Part 3 高階應用實例）

摘要：當樹變異時，連接的部分將作出反應并更新以反映變化。接下來，我們必須對這些行動狀態發生的變化作出反應。這可用于將工作流轉換為其他狀態。將其視為產生價值的可觀察物。構建可觀察數據掌握數據變更方法高階應用實例前兩部分側重于MobX的基本構建塊。有了這些塊，我們現在可以通過MobX的角度開始解決一些真實場景。這篇文章將是一系列應用我們迄今為止所見概念的例子。當然，這不是一個詳盡的清單，...

eccozhou 2019-08-23 11:48 評論0 收藏0
【用故事解讀 MobX 源碼（五）】 Observable

摘要：前言初衷以系列故事的方式展現源碼邏輯，盡可能以易懂的方式講解源碼本系列文章用故事解讀源碼一用故事解讀源碼二用故事解讀源碼三用故事解讀源碼四裝飾器和用故事解讀源碼五文章編排每篇文章分成兩大段，第一大段以簡單的偵探系列故事的形式講解所涉及人物場 ================前言=================== 初衷：以系列故事的方式展現 MobX 源碼邏輯，盡可能以易懂的方式...

leeon 2019-08-23 10:39 評論0 收藏0
React 狀態管理庫: Mobx

摘要：關心性能的情況下，需要手動設置這時就需要引入狀態管理庫。現在常用的狀態管理庫有和，本文會重點介紹，然后會將和進行對比，最后展望下未來的狀態管理方面趨勢。如果在任何地方都修改可觀察數據，將導致頁面狀態難以管理。 React 是一個專注于視圖層的庫。React 維護了狀態到視圖的映射關系，開發者只需關心狀態即可，由 React 來操控視圖。在小型應用中，單獨使用 React 是沒什么問題...

liujs 2019-08-20 17:49 評論0 收藏0
【用故事解讀 MobX 源碼（四）】裝飾器和 Enhancer

摘要：所以這是一篇插隊的文章，用于去理解中的裝飾器和概念。因此，該的作用就是根據入參返回具體的描述符。其次局部來看，裝飾器具體應用表達式是，其函數簽名和是一模一樣。等裝飾器語法，是和直接使用是等效等價的。 ================前言=================== 初衷：以系列故事的方式展現 MobX 源碼邏輯，盡可能以易懂的方式講解源碼；本系列文章：《【用故事解...

maybe_009 2019-08-22 18:30 評論0 收藏0