Mobx解決的問題

傳統(tǒng)React使用的數(shù)據(jù)管理庫為Redux。Redux要解決的問題是統(tǒng)一數(shù)據(jù)流，數(shù)據(jù)流完全可控并可追蹤独榴。要實(shí)現(xiàn)該目標(biāo)蔬蕊，便需要進(jìn)行相關(guān)的約束结澄。Redux由此引出了dispatch action reducer等概念，對state的概念進(jìn)行強(qiáng)約束。然而對于一些項目來說麻献，太過強(qiáng)们妥，便失去了靈活性。Mobx便是來填補(bǔ)此空缺的勉吻。

這里對Redux和Mobx進(jìn)行簡單的對比：

1. Redux的編程范式是函數(shù)式的而Mobx是面向?qū)ο蟮模?/p>

2. 因此數(shù)據(jù)上來說Redux理想的是immutable的监婶，每次都返回一個新的數(shù)據(jù)，而Mobx從始至終都是一份引用齿桃。因此Redux是支持?jǐn)?shù)據(jù)回溯的惑惶；

3. 然而和Redux相比，使用Mobx的組件可以做到精確更新短纵，這一點(diǎn)得益于Mobx的observable带污；對應(yīng)的，Redux是用dispath進(jìn)行廣播踩娘，通過Provider和connect來比對前后差別控制更新粒度刮刑，有時需要自己寫SCU；Mobx更加精細(xì)一點(diǎn)养渴。

Mobx核心概念

圖片來自官方文檔

Mobx的核心原理是通過action觸發(fā)state的變化雷绢，進(jìn)而觸發(fā)state的衍生對象（computed value & Reactions）。

State

在Mobx中理卑，State就對應(yīng)業(yè)務(wù)的最原始狀態(tài)翘紊，通過observable方法，可以使這些狀態(tài)變得可觀察藐唠。

通常支持被observable的類型有三個帆疟，分別是Object, Array, Map；對于原始類型宇立，可以使用Obserable.box踪宠。

值得注意的一點(diǎn)是，當(dāng)某一數(shù)據(jù)被observable包裝后妈嘹，他返回的其實(shí)是被observable包裝后的類型柳琢。

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const obArray = observable([1, 2, 3]);
console.log("ob is Array:", Array.isArray(obArray));
console.log("ob:", obArray);

控制臺輸出為：

ob is Array: false
ob: ObservableArray {}

對于該問題，解決方法也很簡單润脸，可以通過Mobx原始提供的observable.toJS()轉(zhuǎn)換成JS再判斷柬脸，或者直接使用Mobx原生提供的APIisObservableArray進(jìn)行判斷。

computed

Mobx中state的設(shè)計原則和redux有一點(diǎn)是相同的毙驯，那就是盡可能保證state足夠小倒堕，足夠原子。這樣設(shè)計的原則不言而喻爆价，無論是維護(hù)性還是性能垦巴。那么對于依賴state的數(shù)據(jù)而衍生出的數(shù)據(jù)媳搪，可以使用computed。

簡而言之魂那，你有一個值蛾号，該值的結(jié)果依賴于state稠项，并且該值也需要被obserable涯雅，那么就使用computed。

通常應(yīng)該盡可能的使用計算屬性展运，并且由于其函數(shù)式的特點(diǎn)活逆，可以最大化優(yōu)化性能。如果計算屬性依賴的state沒改變拗胜，或者該計算值沒有被其他計算值或響應(yīng)（reaction）使用蔗候，computed便不會運(yùn)行。在這種情況下埂软，computed處于暫停狀態(tài)锈遥，此時若該計算屬性不再被observable。那么其便會被Mobx垃圾回收勘畔。

簡單介紹computed的一個使用場景

假如你觀察了一個數(shù)組所灸，你想根據(jù)數(shù)組的長度變化作出反應(yīng)，在不使用computed時代碼是這樣的

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
autorun(() => console.log(numbers.length));
// 輸出 '3'
numbers.push(4);
// 輸出 '4'
numbers[0] = 0;
// 輸出 '4'

最后一行其實(shí)只是改了數(shù)組中的一個值炫七，但是也觸發(fā)了autorun的執(zhí)行爬立。此時如果用computed便會解決該問題。

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
var sum = computed(() => numbers.length);
autorun(() => console.log(sum.get()));
// 輸出 '3'
numbers.push(4);
// 輸出 '4'
numbers[0] = 1;

autorun

另一個響應(yīng)state的api便是autorun万哪。和computed類似侠驯，每當(dāng)依賴的值改變時，其都會改變奕巍。不同的是吟策，autorun沒有了computed的優(yōu)化（當(dāng)然，依賴值未改變的情況下也不會重新運(yùn)行的止，但不會被自動回收）檩坚。因此在使用場景來說，autorun通常用來執(zhí)行一些有副作用的冲杀。例如打印日志效床，更新UI等等。

action

在redux中权谁，唯一可以更改state的途徑便是dispatch一個action剩檀。這種約束性帶來的一個好處是可維護(hù)性。整個state只要改變必定是通過action觸發(fā)的旺芽，對此只要找到reducer中對應(yīng)的action便能找到影響數(shù)據(jù)改變的原因沪猴。強(qiáng)約束性是好的辐啄，但是Redux要達(dá)到約束性的目的，似乎要寫許多樣板代碼运嗜，雖說有許多庫都在解決該問題壶辜，然而Mobx從根本上來說會更加優(yōu)雅。

首先Mobx并不強(qiáng)制所有state的改變必須通過action來改變担租，這主要適用于一些較小的項目砸民。對于較大型的，需要多人合作的項目來說奋救，可以使用Mobx提供的api configure來強(qiáng)制岭参。

Mobx.configure({enforceActions: true})

其原理也很簡單

function configure(options){

    if (options.enforceActions !== undefined) {
        globalState.enforceActions = !!options.enforceActions
        globalState.allowStateChanges = !options.enforceActions
    }

}

通過改變?nèi)值膕trictMode以及allowStateChanges屬性的方式來實(shí)現(xiàn)強(qiáng)制使用action。

Mobx異步處理

和Redux不同的是尝艘，Mobx在異步處理上并不復(fù)雜演侯，不需要引入額外的類似redux-thunk、redux-saga這樣的庫背亥。

唯一需要注意的是秒际，在嚴(yán)格模式下，對于異步action里的回調(diào)狡汉，若該回調(diào)也要修改observable的值娄徊，那么

該回調(diào)也需要綁定action。

const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;

  @action
  changeA() {
    this.a = 0;
    setTimeout(this.changeB, 1000);
  }
  @action.bound
  changeB() {
    this.a = 1000;
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

這里用了action.bound語法糖轴猎，目的是為了解決javascript作用域問題嵌莉。

另外一種更簡單的寫法是直接包裝action

const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;
  @action
  changeA() {
    this.a = 0;
    setTimeout(action('changeB',()=>{
      this.a = 1000;
    }), 1000);
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

如果不想到處寫action，可以使用Mobx提供的工具函數(shù)runInAction來簡化操作捻脖。

...

 @action
  changeA() {
    this.a = 0;
    setTimeout(
      runInAction(() => {
        this.a = 1000;
      }),
      1000
    );
  }

通過該工具函數(shù)锐峭，可以將所有對observable值的操作放在一個回調(diào)里，而不是命名各種各樣的action可婶。

最后沿癞，Mobx提供的一個工具函數(shù)，其原理redux-saga矛渴，使用ES6的generator來實(shí)現(xiàn)異步操作椎扬，可以徹底擺脫action的干擾。

@asyncAction
  changeA() {
    this.a = 0;
    const data = yield Promise.resolve(1)
    this.a = data;
  }

Mobx原理分析

autorun

Mobx的核心就是通過observable觀察某一個變量具温，當(dāng)該變量產(chǎn)生變化時蚕涤，對應(yīng)的autorun內(nèi)的回調(diào)函數(shù)就會發(fā)生變化。

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const ob = observable({ a: 1, b: 1 });
autorun(() => {
  console.log("ob.b:", ob.b);
});

ob.b = 2;

執(zhí)行該代碼會發(fā)現(xiàn)，log了兩遍ob.b的值。其實(shí)從這個就能猜到膳音，Mobx是通過代理變量的getter和setter來實(shí)現(xiàn)的變量更新功能。首先先代理變量的getter函數(shù)天吓，然后通過預(yù)執(zhí)行一遍autorun中回調(diào)贿肩，從而觸發(fā)getter函數(shù)，來實(shí)現(xiàn)觀察值的收集龄寞，依次來代理setter汰规。之后只要setter觸發(fā)便執(zhí)行收集好的回調(diào)就ok了。
具體源碼如下：

function autorun(view, opts){
    reaction = new Reaction(name, function () {
           this.track(reactionRunner);
    }, opts.onError);
   function reactionRunner() {
        view(reaction);
    }
}

autorun的核心就是這一段物邑，這里view就是autorun里的回調(diào)函數(shù)溜哮。具體到track函數(shù)，比較關(guān)鍵到代碼是：

Reaction.prototype.track = function (fn) {
    var result = trackDerivedFunction(this, fn, undefined);
}

trackDerivedFunction函數(shù)中會執(zhí)行autorun里的回調(diào)函數(shù)拂封，緊接著會觸發(fā)obserable中代理的函數(shù)：

function generateObservablePropConfig(propName) {
    return (observablePropertyConfigs[propName] ||
        (observablePropertyConfigs[propName] = {
            configurable: true,
            enumerable: true,
            get: function () {
                return this.$mobx.read(this, propName);
            },
            set: function (v) {
                this.$mobx.write(this, propName, v);
            }
        }));
}

在get中會將回調(diào)與其綁定茬射，之后更改了obserable中的值時，都會觸發(fā)這里的set冒签，然后隨即觸發(fā)綁定的函數(shù)。

Mobx的一些坑

通過autorun的實(shí)現(xiàn)原理可以發(fā)現(xiàn)钟病，會出現(xiàn)很多我們想象中應(yīng)該觸發(fā)萧恕，但是沒有觸發(fā)的場景，例如：

1. 無法收集新增的屬性

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
autorun(() => {
  if(ob.c){
    console.log("ob.c:", ob.c);
  }
});
ob.c = 1

對于該問題肠阱，可以通過extendObservable(target, props)方法來實(shí)現(xiàn)票唆。

const Mobx = require("mobx");
const { observable, autorun, computed, extendObservable } = Mobx;
var numbers = observable({ a: 1, b: 2 });
extendObservable(numbers, { c: 1 });
autorun(() => console.log(numbers.c));
numbers.c = 3;

// 1

// 3

extendObservable該API會可以為對象新增加observal屬性。

當(dāng)然屹徘，如果你對變量的entry增刪非常關(guān)心走趋，應(yīng)該使用Map數(shù)據(jù)結(jié)構(gòu)而不是Object。

2. 回調(diào)函數(shù)若依賴外部環(huán)境噪伊，則無法進(jìn)行收集

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
let x = 0;
autorun(() => {
  if(x == 1){
    console.log("ob.c:", ob.b);
  }
});
x = 1;
ob.b = 2;

很好理解簿煌，autorun的回調(diào)函數(shù)在預(yù)執(zhí)行的時候無法到達(dá)ob.b那一行代碼，所以收集不到鉴吹。

參考鏈接：

1. https://www.zhihu.com/question/52219898
2. http://taobaofed.org/blog/2016/08/18/react-redux-connect
3. https://Mobx.js.org/index.html