成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

高效的Mobx模式（Part 1 - 構(gòu)建可觀察數(shù)據(jù)）

trigkit4 / 791人閱讀

摘要：高效的模式提供了一種簡單而強(qiáng)大的方法來管理客戶端狀態(tài)。允許屬性本身可觀察，但不允許其任何子節(jié)點(diǎn)。默認(rèn)情況下，僅將引用更改視為更改。構(gòu)建可觀察數(shù)據(jù)掌握數(shù)據(jù)變更方法高階應(yīng)用實(shí)例

起因

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

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

高效的Mobx模式 - （Part 1）

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

MobX導(dǎo)致思維方式的轉(zhuǎn)變（For the better），并改變您的心理模型圍繞管理客戶端狀態(tài)。

Part 1 - 構(gòu)建可觀察者

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

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

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

    @observable photos = [] 
}
修剪可觀察屬性

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

asReference

當(dāng)某些屬性永遠(yuǎn)不會改變值時，這是非常有用的。 請注意，如果您確實(shí)更改了引用本身，它將觸發(fā)更改。

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

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

// 將觸發(fā)通知，因?yàn)檫@是屬性引用更改
contact.address = new Address();

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

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

asFlat

這比asReference略寬一些。 asFlat允許屬性本身可觀察，但不允許其任何子節(jié)點(diǎn)。 典型用法適用于您只想觀察數(shù)組實(shí)例而不是其項(xiàng)目的數(shù)組。 請注意，對于數(shù)組，length屬性仍然是可觀察的，因?yàn)樗跀?shù)組實(shí)例上。 但是，對子屬性的任何更改都不會被觀察到。

首先創(chuàng)建@observable所有內(nèi)容，然后應(yīng)用asReference和asFlat修飾符來修剪可觀察屬性。

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

import {observable} from "mobx";

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

擴(kuò)展可觀察屬性

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

asStructure

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

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

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

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

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

// 將被視為一種變化，因?yàn)樗且粋€新的引用
contact.address = address2;

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

// 不會被視為一種變化，因?yàn)樗哂邢嗤膬r值
contact.address = address2;

asMap

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

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

computed

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

class Person {
    @observable firstName;
    @observable lastName;

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

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

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

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

Part 1 - 構(gòu)建可觀察數(shù)據(jù)

Part 2 - 掌握數(shù)據(jù)變更方法

Part 3 - 高階應(yīng)用實(shí)例

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97366.html

相關(guān)文章

  • 高效的Mobx模式（Part 2 - 掌握數(shù)據(jù)變更方法）

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

    xinhaip 評論0 收藏0

  • 高效的Mobx模式（Part 3 高階應(yīng)用實(shí)例）

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

    eccozhou 評論0 收藏0

  • 【用故事解讀 MobX 源碼（五）】 Observable

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

    leeon 評論0 收藏0

  • React 狀態(tài)管理庫: Mobx

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

    liujs 評論0 收藏0

  • 【用故事解讀 MobX 源碼（四）】裝飾器 和 Enhancer

    摘要：所以這是一篇插隊(duì)的文章，用于去理解中的裝飾器和概念。因此，該的作用就是根據(jù)入?yún)⒎祷鼐唧w的描述符。其次局部來看，裝飾器具體應(yīng)用表達(dá)式是，其函數(shù)簽名和是一模一樣。等裝飾器語法，是和直接使用是等效等價的。 ================前言=================== 初衷：以系列故事的方式展現(xiàn) MobX 源碼邏輯，盡可能以易懂的方式講解源碼； 本系列文章： 《【用故事解...

    maybe_009 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<