mobx學習總結

Mobx解決的問題

傳統React使用的數據管理庫爲Redux。Redux要解決的問題是統一數據流，數據流徹底可控並可追蹤。要實現該目標，便須要進行相關的約束。Redux由此引出了dispatch action reducer等概念，對state的概念進行強約束。然而對於一些項目來講，太過強，便失去了靈活性。Mobx即是來填補此空缺的。

這裏對Redux和Mobx進行簡單的對比：

1. Redux的編程範式是函數式的而Mobx是面向對象的；

2. 所以數據上來講Redux理想的是immutable的，每次都返回一個新的數據，而Mobx從始至終都是一份引用。所以Redux是支持數據回溯的；

3. 然而和Redux相比，使用Mobx的組件能夠作到精確更新，這一點得益於Mobx的observable；對應的，Redux是用dispath進行廣播，經過Provider和connect來比對先後差異控制更新粒度，有時須要本身寫SCU；Mobx更加精細一點。

 Mobx核心概念

Mobx的核心原理是經過action觸發state的變化，進而觸發state的衍生對象（computed value & Reactions）。

State

在Mobx中，State就對應業務的最原始狀態，經過observable方法，可使這些狀態變得可觀察。

一般支持被observable的類型有三個，分別是Object, Array, Map；對於原始類型，可使用Obserable.box。

值得注意的一點是，當某一數據被observable包裝後，他返回的實際上是被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()轉換成JS再判斷，或者直接使用Mobx原生提供的APIisObservableArray進行判斷。

computed

Mobx中state的設計原則和redux有一點是相同的，那就是儘量保證state足夠小，足夠原子。這樣設計的原則不言而喻，不管是維護性仍是性能。那麼對於依賴state的數據而衍生出的數據，可使用computed。

簡而言之，你有一個值，該值的結果依賴於state，而且該值也須要被obserable，那麼就使用computed。

一般應該儘量的使用計算屬性，而且因爲其函數式的特色，能夠最大化優化性能。若是計算屬性依賴的state沒改變，或者該計算值沒有被其餘計算值或響應（reaction）使用，computed便不會運行。在這種狀況下，computed處於暫停狀態，此時若該計算屬性再也不被observable。那麼其便會被Mobx垃圾回收。

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

假如你觀察了一個數組，你想根據數組的長度變化做出反應，在不使用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'

最後一行其實只是改了數組中的一個值，可是也觸發了autorun的執行。此時若是用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

另外一個響應state的api即是autorun。和computed相似，每當依賴的值改變時，其都會改變。不一樣的是，autorun沒有了computed的優化（固然，依賴值未改變的狀況下也不會從新運行，但不會被自動回收）。所以在使用場景來講，autorun一般用來執行一些有反作用的。例如打印日誌，更新UI等等。

action

在redux中，惟一能夠更改state的途徑即是dispatch一個action。這種約束性帶來的一個好處是可維護性。整個state只要改變一定是經過action觸發的，對此只要找到reducer中對應的action便能找到影響數據改變的緣由。強約束性是好的，可是Redux要達到約束性的目的，彷佛要寫許多樣板代碼，雖然說有許多庫都在解決該問題，然而Mobx從根本上來講會更加優雅。

首先Mobx並不強制全部state的改變必須經過action來改變，這主要適用於一些較小的項目。對於較大型的，須要多人合做的項目來講，可使用Mobx提供的api configure來強制。

Mobx.configure({enforceActions: true})

其原理也很簡單

function configure(options){

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

}

經過改變全局的strictMode以及allowStateChanges屬性的方式來實現強制使用action。

Mobx異步處理

和Redux不一樣的是，Mobx在異步處理上並不複雜，不須要引入額外的相似redux-thunk、redux-saga這樣的庫。

惟一須要注意的是，在嚴格模式下，對於異步action裏的回調，若該回調也要修改observable的值，那麼

該回調也須要綁定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提供的工具函數runInAction來簡化操做。

...

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

經過該工具函數，能夠將全部對observable值的操做放在一個回調裏，而不是命名各類各樣的action。

最後，Mobx提供的一個工具函數，其原理redux-saga，使用ES6的generator來實現異步操做，能夠完全擺脫action的干擾。

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

Mobx原理分析

autorun

Mobx的核心就是經過observable觀察某一個變量，當該變量產生變化時，對應的autorun內的回調函數就會發生變化。

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;

執行該代碼會發現，log了兩遍ob.b的值。其實從這個就能猜到，Mobx是經過代理變量的getter和setter來實現的變量更新功能。首先先代理變量的getter函數，而後經過預執行一遍autorun中回調，從而觸發getter函數，來實現觀察值的收集，依次來代理setter。以後只要setter觸發便執行收集好的回調就ok了。
具體源碼以下：

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

autorun的核心就是這一段，這裏view就是autorun裏的回調函數。具體到track函數，比較關鍵到代碼是：

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

trackDerivedFunction函數中會執行autorun裏的回調函數，緊接着會觸發obserable中代理的函數：

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中會將回調與其綁定，以後更改了obserable中的值時，都會觸發這裏的set，而後隨即觸發綁定的函數。

Mobx的一些坑

經過autorun的實現原理能夠發現，會出現不少咱們想象中應該觸發，可是沒有觸發的場景，例如：

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)方法來實現。

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屬性。

固然，若是你對變量的entry增刪很是關心，應該使用Map數據結構而不是Object。

2. 回調函數若依賴外部環境，則沒法進行收集

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的回調函數在預執行的時候沒法到達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