摘要：有了這個，下一步就是開始對變化作出反應。請注意，此延遲通知僅適用于當前函數(shù)范圍中的。最快的方法是提供功能。只有當返回的數(shù)據(jù)發(fā)生變化時，才會執(zhí)行副作用。最棒的部分是它會在運行后自動處理副作用。構建可觀察數(shù)據(jù)掌握數(shù)據(jù)變更方法高階應用實例

在上一部分中，我們研究了如何設置MobX狀態(tài)樹并使其可觀察。 有了這個，下一步就是開始對變化作出反應。 坦率地說，這就是有趣的開始！

MobX保證只要您的響應數(shù)據(jù)圖發(fā)生變化，依賴于可觀察屬性的部分就會自動同步。 這意味著您現(xiàn)在可以專注于對變化做出反應并引起的副作用，而不是擔心數(shù)據(jù)同步。

讓我們深入研究一下可以引起副作用的各種方法。

默認情況下，當您修改observable時，MobX將檢測并保持其他依賴的可觀察對象同步。 這是同步發(fā)生的。 但是，有時您可能希望在同一方法中修改多個observable。 這可能會導致多個通知被觸發(fā)，甚至可能會降低您的應用速度。

更好的方法是action()中包裝要調(diào)用的方法。 這會在您的方法周圍創(chuàng)建一個事務邊界，并且所有受影響的observable將在您執(zhí)行操作后保持同步。 請注意，此延遲通知僅適用于當前函數(shù)范圍中的observable。 如果您具有修改更多可觀察對象的異步操作，則必須將它們包裝在runInAction()中。

class Person {
    @observable firstName;
    @observable lastName;

    // 因為我們在@action中包裝了此方法，所以只有在changeName()成功執(zhí)行后，fullName才會更改
    @action changeName(first, last) {
        this.firstName = first;
        this.lastName = last;
    }

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

const p = new Person();
p.changeName("Pavan", "Podila");

Actions是改變Store的切入點。 通過使用Actions，您可以將多個observable更新為原子操作。

盡可能避免直接從外部操縱observable并公開@action方法為你做這個改變。 實際上，可以通過設置useStrict(true)來強制執(zhí)行此操作。

MobX確保可觀察圖形始終保持一致。 但如果這個世界只是關于可觀察的東西，那就不好玩了。 我們需要他們的同行：觀察者使事情變得有趣。

實際上，UI是mobx store的美化觀察者。 使用mobx-react，您將獲得一個綁定庫，使您的React組件可以觀察存儲并在存儲更改時自動呈現(xiàn)。

但是，UI不是系統(tǒng)中唯一的觀察者。 您可以向store添加更多觀察者以執(zhí)行各種有趣的事情。 一個非常基本的觀察者可能是一個控制臺記錄器，它只是在可觀察的變化時將當前值記錄到控制臺。

通過autorun，我們可以非常輕松地設置這些觀察者。 最快的方法是提供autorun功能。 MobX會自動跟蹤您在此函數(shù)中使用的任何可觀察對象。 每當它們改變時，你的功能都會重新執(zhí)行（也就是自動運行）！

class Person {

    @observable firstName = "None";
    @observable lastName = "None";

    constructor() {

        // A simple console-logger
        autorun(()=>{
            console.log(`Name changed: ${this.firstName}, ${this.lastName}`);
        });

        // 這里會導致autorun()運行
        this.firstName = "Mob";

        // autorun()再一次運行
        this.lastName = "X";
    }
}

// Will log: Name changed: None, None
// Will log: Name changed: Mob, None
// Will log: Name changed: Mob, X

正如您在上面的日志中所看到的，自動運行將立即運行，并且每次跟蹤的可觀察量發(fā)生變化時也會運行。 如果您不想立即運行，而是僅在發(fā)生更改時運行，該怎么辦？ 請繼續(xù)閱讀。

與autorun相比，reaction提供了更細粒度的控制。 首先，它們不會立即運行并等待對跟蹤的可觀察量的第一次更改。 API也與autorun略有不同。 在最簡單的版本中，您提供兩個輸入?yún)?shù)：

reaction(()=> data, data => { /* side effect */})

第一個函數(shù)（跟蹤函數(shù) tracking function）應該返回將用于跟蹤的數(shù)據(jù)。 然后將該數(shù)據(jù)傳遞給第二個函數(shù)（效果函數(shù) effect function）。 不跟蹤效果函數(shù)，您可以在此處使用其他可觀察對象。

默認情況下，reaction將不會在第一次運行，并將等待追蹤函數(shù)的變更。 只有當tracking function返回的數(shù)據(jù)發(fā)生變化時，才會執(zhí)行副作用。 通過將原始自動運行分解為tracking function +effect function，您可以更好地控制實際導致副作用的內(nèi)容。

import {reaction} from "mobx";

class Router {

    @observable page = "main";

    setupNavigation() {
        reaction(()=>this.page, (page)=>{
            switch(page) {
                case "main":
                    this.navigateToUrl("/");
                    break;

                case "profile":
                    this.navigateToUrl("/profile");
                    break;

                case "admin":
                    this.navigateToUrl("/admin");
                    break;
            }
        });
    }

    navigateToUrl(url) { /* ... */ }
}

在上面的示例中，我在加載“main”頁面時不需要導航。 一個reaction使用的完美案例。 僅當路由器的頁面屬性發(fā)生更改時，才會導航到特定URL。

以上是一個非常簡單的路由器，具有固定的頁面集。 您可以通過向URL添加頁面地圖來使其更具可擴展性。 使用這種方法，路由（使用URL更改）會成為更改Store某些屬性的副作用。

autorun和reaction是持續(xù)的副作用。 初始化應用程序時，您將創(chuàng)建此類副作用，并期望它們在應用程序的生命周期內(nèi)運行。

我之前沒有提到的一件事是這兩個函數(shù)都返回一個處理器函數(shù)。 您可以隨時調(diào)用該處理器函數(shù)并取消副作用。

const disposer = autorun(()=>{ 
    /* side-effects based on tracked observables */ 
});

// .... At a later time
disposer(); // Cancel the autorun 

現(xiàn)在我們構建的應用程序有各種用例。 您可能希望某些副作用僅在您到達應用程序中的某個點時運行。 此外，您可能希望這些副作用只運行一次，然后再也不會運行。

讓我們舉一個具體的例子：比如說，當用戶到達應用程序中的某個里程碑時，您希望向用戶顯示一條消息。 此里程碑僅對任何用戶發(fā)生一次，因此您不希望設置持續(xù)運行的副作用，如autorun或reaction。 現(xiàn)在是時候拿出when 這個API來完成這項工作了。

當拿出兩個參數(shù)時，就像reaction一樣。 第一個（跟蹤器函數(shù)）應該返回一個布爾值。 當這變?yōu)檎鏁r，它將運行效果函數(shù)，第二個參數(shù)為when。 最棒的部分是它會在運行后自動處理副作用。 因此，無需跟蹤處理器并手動調(diào)用它。

when(()=>this.reachedMilestone, ()=>{
    this.showMessage({ 
        title: "Congratulations", 
        message: "You did it!"
    });
})

到目前為止，我們已經(jīng)看到了各種技術來跟蹤對象圖上的變化，并對這些變化做出反應。 MobX提高了抽象級別，以便我們可以在更高級別進行思考，而不必擔心跟蹤和對變化做出反應的意外復雜性。

我們現(xiàn)在有了一個基礎，可以構建依賴于域模型更改的強大系統(tǒng)。 通過將域模型之外的所有內(nèi)容視為副作用，我們可以提供視覺反饋（UI）并執(zhí)行許多其他活動，如監(jiān)控，分析，日志記錄等。

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

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

Part 3 - 高階應用實例