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觸發(fā)state的變化，進而觸發(fā)state的衍生對象（computed value & Reactions）。
State
在Mobx中，State就對應業(yè)務的最原始狀態(tài)，通過observable方法，可以使這些狀態(tài)變得可觀察。
通常支持被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。
通常應該盡可能的使用計算屬性，并且由于其函數式的特點，可以最大化優(yōu)化性能。如果計算屬性依賴的state沒改變，或者該計算值沒有被其他計算值或響應（reaction）使用，computed便不會運行。在這種情況下，computed處于暫停狀態(tài)，此時若該計算屬性不再被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'
最后一行其實只是改了數組中的一個值，但是也觸發(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
另一個響應state的api便是autorun。和computed類似，每當依賴的值改變時，其都會改變。不同的是，autorun沒有了computed的優(yōu)化（當然，依賴值未改變的情況下也不會重新運行，但不會被自動回收）。因此在使用場景來說，autorun通常用來執(zhí)行一些有副作用的。例如打印日志，更新UI等等。
action
在redux中，唯一可以更改state的途徑便是dispatch一個action。這種約束性帶來的一個好處是可維護性。整個state只要改變必定是通過action觸發(fā)的，對此只要找到reducer中對應的action便能找到影響數據改變的原因。強約束性是好的，但是Redux要達到約束性的目的，似乎要寫許多樣板代碼，雖說有許多庫都在解決該問題，然而Mobx從根本上來說會更加優(yōu)雅。
首先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內的回調函數就會發(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ā)現，log了兩遍ob.b的值。其實從這個就能猜到，Mobx是通過代理變量的getter和setter來實現的變量更新功能。首先先代理變量的getter函數，然后通過預執(zhí)行一遍autorun中回調，從而觸發(fā)getter函數，來實現觀察值的收集，依次來代理setter。之后只要setter觸發(fā)便執(zhí)行收集好的回調就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函數中會執(zhí)行autorun里的回調函數，緊接著會觸發(fā)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中的值時，都會觸發(fā)這里的set，然后隨即觸發(fā)綁定的函數。
Mobx的一些坑
通過autorun的實現原理可以發(fā)現，會出現很多我們想象中應該觸發(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)方法來實現。
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. 回調函數若依賴外部環(huá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的回調函數在預執(zhí)行的時候無法到達ob.b那一行代碼，所以收集不到。
參考鏈接：
