如何自己實現一個 mobx – 原理解析

小芋頭君發表於2019-03-04

首發於大搜車技術部落格:blog.souche.com/ru-he-zi-ji…

前言

mobx 是一個非常優雅的狀態管理庫,具有相當大的自由度,並且使用非常簡單,本文通過自己實現一個 mini 版的 mobx 來探究一下類似的 FRP 模式在 js 中的實現。

本文主要講述瞭如何自己實現一個 mobx,主要是其核心幾個 api 的實現。目的不是要重新造一個輪子,只是通過造輪子的過程,瞭解 mobx 的核心原理,以及一些具體實現的時候需要趟的坑,從而對RFP之類的程式設計正規化有更深入的瞭解。

所以,不要將此專案應用於專案中,除非你真的想節省那一點點頻寬(打包後 6K,GZip後 2.3K),用此專案瞭解 mobx 的原理即可。

另外,s-mobx 的實現和 mobx 的實現細節可能並不一致。

關於 s-mobx

github: github.com/xinyu198736…

npm: npm install s-mobx --save

核心組成

s-mobx 最最核心是兩個功能。

  1. Observable 。用來包裝一個屬性為 被觀察者
  2. autorun 。用來包裝一個方法為 觀察者

整個 s-mobx 就是圍繞這兩個功能做包裝。

依賴收集

autorun 是個神奇的函式,被他包裝過的方法,就會變為觀察者函式,並且這裡有一個很重要的特性,這個函式只會觀察自己依賴到的設為 observable 的值。

例如

autorun(function(){
    console.log(person.name);
});複製程式碼

假設person物件身上有很多個屬性是 observable 的,修改這些屬性值的時候不會觸發 autorun 包裝過的函式,只有修改 name 屬性的時候才會觸發。

這裡的原理就是依賴收集

那如何實現依賴收集呢?

這時候需要引申出一個很簡單的管理類,在 s-mobx 中,我們叫做 dependenceManager,這個工具類中管理了一個依賴的 map,結構是一個全域性唯一的 ID 和 對應的監聽的函式的陣列。

這個全域性唯一的 ID 實際上代表的就是各個被設定為 observable 的屬性值,是 Observable 類的一個屬性 obID。

當一個被 observable 包裝的屬性值發生 set 行為的時候,就會觸發 dependenceManager.trigger(obID); 從而觸發遍歷對應的監聽函式列表,並且執行,這就是 autorun 的基本原理。

那這個依賴的map 是如何收集上來的呢?

其實也很簡單,也是 dependenceManager 的操作,在執行 autorun(handler) 的時候會執行以下的程式碼(實際上也就這三句程式碼):

dependenceManager.beginCollect(handler);
handler();
dependenceManager.endCollect();複製程式碼

這裡 dependenceManager 標記現在開始收集依賴,然後執行 handler 函式,執行結束之後,標記當前收集結束。這裡的收集操作可以巢狀。具體實現見 dependenceManager。

在執行 handler 函式的時候,怎麼知道他依賴了什麼 observable 屬性值的?

這個是通過 observable 的 get 動作來實現的,每個被 observable 過的值在 get 的時候都會判斷當前是否正在收集依賴,如果是的話,就會把這個值 和 當前正在收集依賴的 handler 關聯起來儲存在 dependenceManager 中。

這就是整個 s-mobx 核心的原理。

其他的程式碼大部分只是在實現如何包裝 observable。

Observable

包裝物件值的 Observable ,核心原理是 Object.defineProperty ,給被包裝的屬性套上 get 和 set 的鉤子,在 get 中響應依賴收集,在 set 中觸發監聽函式。

陣列的包裝稍微麻煩,在 s-mobx 中使用 Proxy 來包裝,但是相容性不是很好,在 mobx 中,作者自己模擬了一個陣列物件的操作,然後包裝在原生陣列上。

另外對於 Object 物件,為其進行了遞迴包裝,每一級 Object 都繫結了一個 observable。

具體的程式碼見 s-observable (維護 Observable),s-extendObservable(包裝到具體物件屬性上)

Computed

Computed 是一種特殊的型別,他即是觀察者,也是被觀察者,然後它最大的特性是,他的計算不是每次呼叫的時候發生的,而是在每次依賴的值發生改變的時候計算的,呼叫只是簡單的返回了最後一次的計算結果。

這樣理解就明白了,其實在扮演觀察者的時候, Computed 只是 autorun 的一個變種。

Computed 中有一個方法,叫做 _reComputed,當被 computed 包裝的方法中依賴的 observable 值發生變化的時候,就會觸發 _reComputed 方法重新計算 Computed 的值。這裡的具體實現,其實就是把 _reComputed 當做 autorun 的handler 來處理,執行了一次依賴收集。

另外 Computed 還有一個特性就是可以被別人依賴,所以它也暴露了一個 get 的鉤子,在鉤子裡的操作和 observable 中的 get 鉤子做了同樣的處理。

所以,當用 @computed 包裝一個 class 的方法的時候,將其放入 autorun 中會執行兩次依賴收集,一次是收集 computed 對其他 observable 的依賴,另一次是收集 handler 對當前屬性方法的依賴。這裡 dependenceManager 提供了一種機制,可以巢狀收集依賴,採用了類似堆疊的機制。

observer

在 mobx-react 中,可以使用 @observer 對 react 物件進行包裝,使其 render 方法成為一個觀察者。

在 s-mobx 中直接整合這個功能,實現的程式碼:

var ReactMixin = {
    componentWillMount: function() {
        autorun(() => {
            this.render();
            this.forceUpdate();
        });
    }
};
function observer(target) {
    const targetCWM = target.prototype.componentWillMount;
    target.prototype.componentWillMount = function() {
        targetCWM && targetCWM.call(this);
        ReactMixin.componentWillMount.call(this);
    };
}複製程式碼

這裡給 react 元件的 prototype 做了一次 mixin,為其加入了一個 autorun,autorun的作用就是繫結元件 render 方法和其依賴的值的觀察關係。當依賴的值發生變化的時候會觸發 autorun 的引數 handler,handler中會強制執行 render() 方法和 forceUpdate()

這裡每次都強制重新渲染,沒有做很好的優化,在mobx中有個方法:isObjectShallowModified 來判斷是否需要強制重新渲染,可以考慮直接引入進來。

decorator

mobx 的最大特色就是簡單的註解使用方式,也就是 @observable @observer @computed 這些 decorator。

decorator 的實現其實很簡單,不過有些坑需要規避,例如 在 decorator 中出現的target,是class 的prototype,而不是class的例項。但是在 return 出來的 descriptor 中,set 和 get 鉤子中的this,則是 class 的例項。在實現一些複雜邏輯的時候要注意一下這個點。

具體的程式碼可以看 s-decorator

function observable(target, name, descriptor) {
    var v = descriptor.initializer.call(this);
    // 如果值是物件,為其值也建立observable
    if(typeof (v) === `object`) {
        createObservable(v);
    }
    var observable = new Observable(v);
    return {
        enumerable: true,
        configurable: true,
        get: function() {
            return observable.get();
        },
        set: function(v) {
            if(typeof (v) === `object`) {
                createObservable(v);
            }
            return observable.set(v);
        }
    };

};複製程式碼

小結

至此,一個簡化版的 mobx 基本就完成了,mobx 中常用的功能基本都做了實現。原理的話其實也很簡單,希望以後有人問起來,大家能夠說清楚 mobx 中的一些模式和實現,這就夠了。

相關文章