認識一下 Mobx

袋鼠雲數棧UED發表於2022-12-22

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式資料中臺產品。我們始終保持工匠精神，探索前端道路，為社群積累並傳播經驗價值。

本文作者：霜序 LuckyFBB

前言

在之前的文章中，我們講述了 React 的資料流管理，從 props → context → Redux，以及 Redux 相關的三方庫 React-Redux。

那其實說到 React 的狀態管理器，除了 Redux 之外，Mobx 也是應用較多的管理方案。Mobx 是一個響應式庫，在某種程度上可以看作沒有模版的 Vue，兩者的原理差不多

先看一下 Mobx 的簡單使用，線上示例

export class TodoList {
    @observable todos = [];

    @computed get getUndoCount() {
        return this.todos.filter((todo) => !todo.done).length;
    }
    @action add(task) {
        this.todos.push({ task, done: false });
    }
    @action delete(index) {
        this.todos.splice(index, 1);
    }
}

Mobx 藉助於裝飾器來實現，使得程式碼更加簡潔。使用了可觀察物件，Mobx 可以直接修改狀態，不用像 Redux 那樣寫 actions/reducers。Redux 是遵循 setState 的流程，MobX就是幹掉了 setState 的機制

透過響應式程式設計使得狀態管理變得簡單和可擴充套件。Mobx v5 版本利用 ES6 的proxy來追蹤屬性，以前的舊版本透過Object.defineProperty實現的。透過隱式訂閱，自動追蹤被監聽的物件變化

Mobx 的執行流程，一張官網結合上述例子的圖

mobx

MobX將應用變為響應式可歸納為下面三個步驟

  1. 定義狀態並使其可觀察

    使用observable對儲存的資料結構成為可觀察狀態

  2. 建立檢視以響應狀態的變化

    使用observer來監聽檢視，如果用到的資料發生改變檢視會自動更新

  3. 更改狀態

    使用action來定義修改狀態的方法

Mobx核心概念

observable

給資料物件新增可觀察的功能，支援任何的資料結構

const todos = observable([{
    task: "Learn Mobx",
    done: false
}])

// 更多的採用裝飾器的寫法
class Store {
    @observable todos = [{
        task: "Learn Mobx",
        done: false
    }]
}

computed

在 Redux 中，我們需要計算已經 completeTodo 和 unCompleteTodo，我們可以採用：在 mapStateToProps 中，透過 allTodos 過濾出對應的值，線上示例

const mapStateToProps = (state) => {
    const { visibilityFilter } = state;
    const todos = getTodosByVisibilityFilter(state, visibilityFilter);
    return { todos };
};

在 Mobx 中可以定義相關資料發生變化時自動更新的值，透過@computed呼叫getter/setter函式進行變更

一旦 todos 的發生改變，getUndoCount 就會自動計算

export class TodoList {
    @observable todos = [];

    @computed get getUndo() {
        return this.todos.filter((todo) => !todo.done)
    }

    @computed get getCompleteTodo() {
        return this.todos.filter((todo) => todo.done)
    }
}

action

動作是任何用來修改狀態的東西。MobX 中的 action 不像 redux 中是必需的，把一些修改 state 的操作都規範使用 action 做標註。

在 MobX 中可以隨意更改todos.push({ title:'coding', done: false })，state 也是可以有作用的，但是這樣雜亂無章不好定位是哪裡觸發了 state 的變化，建議在任何更新observable或者有副作用的函式上使用 actions。

在嚴格模式useStrict(true)下，強制使用 action

// 非action使用
<button
    onClick={() => todoList.todos.push({ task: this.inputRef.value, done: false })}
>
    Add New Todo
</button>

// action使用
<button
    onClick={() => todoList.add(this.inputRef.value)}
>
    Add New Todo
</button>

class TodoList {
    @action add(task) {
        this.todos.push({ task, done: false });
    }
}

Reactions

計算值 computed 是自動響應狀態變化的值。反應是自動響應狀態變化的副作用，反應可以確保相關狀態變化時指定的副作用執行。

  1. autorun

    autorun負責執行所提供的sideEffect並追蹤在sideEffect執行期間訪問過的observable的狀態

    接受一個函式sideEffect，當這個函式中依賴的可觀察屬性發生變化的時候，autorun裡面的函式就會被觸發。除此之外，autorun裡面的函式在第一次會立即執行一次。

    autorun(() => {
    console.log("Current name : " + this.props.myName.name);
});

// 追蹤函式外的間接引用不會生效
const name = this.props.myName.name;
autorun(() => {
    console.log("Current name : " + name);
});

  2. reaction

    reaction是autorun的變種，在如何追蹤observable方面給予了更細粒度的控制。 它接收兩個函式，第一個是追蹤並返回資料，該資料用作第二個函式，也就是副作用的輸入。

    autorun 會立即執行一次，但是 reaction 不會

    reaction(
    () => this.props.todoList.getUndoCount,
    (data) => {
        console.log("Current count : ", data);
    }
);

observer

使用 Redux 時，我們會引入 React-Redux 的 connect 函式，使得我們的元件能夠透過 props 獲取到 store 中的資料

在 Mobx 中也是一樣的道理，我們需要引入 observer 將元件變為響應式元件

包裹 React 元件的高階元件，在元件的 render 函式中任何使用的observable發生變化時，元件都會呼叫 render 重新渲染，更新 UI

⚠️ 不要放在頂層 Page，如果一個 state 改變，整個 Page 都會 render，所以 observer 儘量去包裹小元件，元件越小重新渲染的變化就越小

@observer
export default class TodoListView extends Component {
    render() {
        const { todoList } = this.props;
        return (
            <div className="todoView">
                <div className="todoView__list">
                    {todoList.todos.map((todo, index) => (
                        <TodoItem
                            key={index}
                            todo={todo}
                            onDelete={() => todoList.delete(index)}
                        />
                    ))}
                </div>
            </div>
        );
    }
}

Mobx原理實現

前文中提到 Mobx 實現響應式資料，採用了Object.defineProperty或者Proxy

上面講述到使用 autorun 會在第一次執行並且依賴的屬性變化時也會執行。

const user = observable({ name: "FBB", age: 24 })
autorun(() => {
    console.log(user.name)
})

當我們使用 observable 建立了一個可觀察物件user，autorun 就會去監聽user.name是否發生了改變。等於user.name被 autorun 監控了，一旦有任何變化就要去通知它

user.name.watchers.push(watch)
// 一旦user的資料發生了改變就要去通知觀察者
user.name.watchers.forEach(watch => watch())

action

observable

裝飾器一般接受三個引數: 目標物件、屬性、屬性描述符

透過上面的分析，透過 observable 建立的物件都是可觀察的，也就是建立物件的每個屬性都需要被觀察

每一個被觀察物件都需要有自己的訂閱方法陣列

const counter = observable({ count: 0 })
const user = observable({ name: "FBB", age: 20 })
autorun(function func1() {
    console.log(`${user.name} and ${counter.count}`)
})
autorun(function func2() {
    console.log(user.name)
})

對於上述程式碼來說，counter.count 的 watchers 只有 func1，user.name 的 watchers 則有 func1/func2

實現一下觀察者類 Watcher，藉助 shortid 來區分不同的觀察者例項

class Watcher {
    id: string
    value: any;
    constructor(v: any, property: string) {
        this.id = `ob_${property}_${shortid()}`;
        this.value = v;
    }
    // 呼叫get時，收集所有觀察者
    collect() {
        dependenceManager.collect(this.id);
        return this.value;
    }
    // 呼叫set時，通知所有觀察者
    notify(v: any) {
        this.value = v;
        dependenceManager.notify(this.id);
    }
}

實現一個簡單的裝飾器，需要攔截我們屬性的 get/set 方法，並且使用 Object.defineProperty 進行深度攔截

export function observable(target: any, name: any, descriptor: { initializer: () => any; }) {
    const v = descriptor.initializer();
    createDeepWatcher(v)
    const watcher = new Watcher(v, name);
    return {
        enumerable: true,
        configurable: true,
        get: function () {
            return watcher.collect();
        },
        set: function (v: any) {
            return watcher.notify(v);
        }
    };
};

function createDeepWatcher(target: any) {
    if (typeof target === "object") {
        for (let property in target) {
            if (target.hasOwnProperty(property)) {
                const watcher = new Watcher(target[property], property);
                Object.defineProperty(target, property, {
                    get() {
                        return watcher.collect();
                    },
                    set(value) {
                        return watcher.notify(value);
                    }
                });
                createDeepWatcher(target[property])
            }
        }
    }
}

在上面 Watcher 類中的get/set中呼叫了 dependenceManager 的方法還未寫完。在呼叫屬性的get方法時，會將函式收集到當前 id 的 watchers 中，呼叫屬性的set方法則是去通知所有的 watchers，觸發對應收集函式

那這這裡其實我們還需要藉助一個類，也就是依賴收集類DependenceManager，馬上就會實現

autorun

前面說到 autorun 會立即執行一次，並且會將函式收集起來，儲存到對應的observable.id的 watchers 中。autorun 實現了收集依賴，執行對應函式。再執行對應函式的時候，會呼叫到對應observable物件的get方法，來收集依賴

export default function autorun(handler) {
    dependenceManager.beginCollect(handler)
    handler()
    dependenceManager.endCollect()
}

實現DependenceManager類:

  • beginCollect: 標識開始收集依賴，將依賴函式存到一個類全域性變數中
  • collect(id): 呼叫get方法時，將依賴函式放到存入到對應 id 的依賴陣列中
  • notify: 當執行set的時候，根據 id 來執行陣列中的函式依賴
  • endCollect: 清除剛開始的函式依賴，以便於下一次收集
class DependenceManager {
    _store: any = {}
    static Dep: any;
    beginCollect(handler: () => void) {
        DependenceManager.Dep = handler
    }
    collect(id: string) {
        if (DependenceManager.Dep) {
            this._store[id] = this._store[id] || {}
            this._store[id].watchers = this._store[id].watchers || []
            if (!this._store[id].watchers.includes(DependenceManager.Dep))
                this._store[id].watchers.push(DependenceManager.Dep);
        }
    }
    notify(id: string) {
        const store = this._store[id];
        if (store && store.watchers) {
            store.watchers.forEach((watch: () => void) => {
                watch.call(this);
            })
        }
    }
    endCollect() {
        DependenceManager.Dep = null
    }
}

一個簡單的 Mobx 框架都搭建好了~

computed

computed 的三個特點:

  • computed 方法是一個 get 方法
  • computed 會根據依賴的屬性重新計算值
  • 依賴 computed 的函式也會被重新執行

發現 computed 的實現大致和 observable 相似，從以上特點可以推斷出 computed 需要兩次收集依賴，一次是收集 computed 所依賴的屬性，一次是依賴 computed 的函式

首先定義一個 computed 方法，是一個裝飾器

export function computed(target: any, name: any, descriptor: any) {
    const getter = descriptor.get; // get 函式
    const _computed = new ComputedWatcher(target, getter);

    return {
        enumerable: true,
        configurable: true,
        get: function () {
            _computed.target = this
            return _computed.get();
        }
    };
}

實現 ComputedWatcher 類，和 Watcher 類差不多。在執行 get 方法的時候，我們和之前一樣，去收集一下依賴 computed 的函式，豐富 get 方法

class ComputedWatcher {
    // 標識是否繫結過recomputed依賴，只需要繫結一次
    hasBindAutoReCompute: boolean | undefined;
    value: any;
    // 繫結recompute 和 內部涉及到的觀察值的關係
    _bindAutoReCompute() {
        if (!this.hasBindAutoReCompute) {
            this.hasBindAutoReCompute = true;
            dependenceManager.beginCollect(this._reComputed, this);
            this._reComputed();
            dependenceManager.endCollect();
        }
    }
    // 依賴屬性變化時呼叫的函式
    _reComputed() {
        this.value = this.getter.call(this.target);
        dependenceManager.notify(this.id);
    }
    // 提供給外部呼叫時收集依賴使用
    get() {
        this._bindAutoReCompute()
        dependenceManager.collect(this.id);
        return this.value
    }
}

observer

observer 相對實現會簡單一點，其實是利用 React 的 render 函式對依賴進行收集，我們採用在 componnetDidMount 中呼叫 autorun 方法

export function observer(target: any) {
    const componentDidMount = target.prototype.componentDidMount;
    target.prototype.componentDidMount = function () {
        componentDidMount && componentDidMount.call(this);
        autorun(() => {
            this.render();
            this.forceUpdate();
        });
    };
}

至此一個簡單的 Mobx 就實現了，線上程式碼地址

文章中使用的 Object.defineProperty 實現，Proxy 實現差不多，線上程式碼地址

Mobx vs Redux

  1. 資料流

    Mobx 和 Redux 都是單向資料流，都透過 action 觸發全域性 state 更新，再通知檢視

    Redux 的資料流

    redux

    Mobx 的資料流

    mobx1

  2. 修改資料的方式

    • 他們修改狀態的方式是不同的，Redux 每一次都返回了新的 state。Mobx 每次修改的都是同一個狀態物件，基於響應式原理，get時收集依賴，set時通知所有的依賴
    • 當 state 發生改變時，Redux 會通知所有使用 connect 包裹的元件；Mobx 由於收集了每個屬性的依賴，能夠精準通知
    • 當我們使用 Redux 來修改資料時採用的是 reducer 函式，函數語言程式設計思想；Mobx 使用的則是物件導向代理的方式

  3. Store 的區別

    • Redux 是單一資料來源，採用集中管理的模式，並且資料均是普通的 JavaScript 物件。state 資料可讀不可寫，只有透過 reducer 來改變
    • Mobx 是多資料來源模式，並且資料是經過observable包裹的 JavaScript 物件。state 既可讀又可寫，在非嚴格模式下，action 不是必須的，可以直接賦值

一些補充

observable 使用函式式寫法

在採用的 proxy 寫法中，可以劫持到一個物件，將物件存在 weakMap 中，每次觸發對應事件去獲取相關資訊
image

Proxy 監聽 Map/Set

image

總結

本文從 Mobx 的簡單示例開始，講述了一下 Mobx 的執行流程，引入了對應的核心概念，然後從零開始實現了一個簡版的 Mobx，最後將 Mobx 和 Redux 做了一個簡單的對比

參考連結

相關文章