初見mobX

先看以下的代碼

const {observable}= mobox;
const {observer}=mobxReact;
const {Component}=React;
const appState=observable({
    count:0
})
appState.increment=function(){
    this.count++
}
appState.decrement=function(){
    this.count--
}
@observer class Counter extends Component{
    render(){
        return(
            <div>
                Counter:{appState.count}
                <button onClick={this.handleInc}>+</button>
                <button onClick={this.handleDec}>-</button>
            </div>
        )
    }
    handleInc=()=>{
        appState.increment()
    }
    handleDec=()=>{
        appState.decrement()
    }

}

咱們若是事先並不瞭解mobox的話，看到這個代碼心中也會有必定的認知，那就是count是可變的。在mobox中將count封裝成爲了一個observabal
做爲一個被觀察的可觀察的對象，將其封裝成爲appState對象，咱們不用再去擔憂數據是如何流動的，它的中間狀態是什麼，由於它有匪夷所思的高效。

下面結合官網詳細的說一下這些代碼的意思
使用 MobX 將一個應用變成響應式的可概括爲如下三個步驟:

1. 定義狀態並使其可觀察
   能夠用任何你喜歡的數據結構來存儲狀態，如對象、數組、類。 循環數據結構、引用，都沒有關係。 只要確保全部會隨時間流逝而改變的屬性打上 mobx 的標記使它們變得可觀察便可。

import {observable} from 'mobx';

var appState = observable({
    timer: 0
});

如上， timer就是可觀察的屬性

1. 建立視圖以響應狀態的變化
   咱們的 appState 尚未觀察到任何的東西。 你能夠建立視圖，當 appState 中相關數據發生改變時視圖會自動更新。 MobX 會以一種最小限度的方式來更新視圖。
   事實上這一點能夠節省了你大量的樣板文件，而且它有着使人匪夷所思的高效。
2. 更改狀態
   第三件要作的事就是更改狀態。 也就是你的應用究竟要作什麼。 不像一些其它框架，MobX 不會命令你如何如何去作。 這是最佳實踐，但關鍵要記住一點: MobX
   幫助你以一種簡單直觀的方式來完成工做。

下面的代碼每秒都會修改你的數據，而當須要的時候UI會自動更新。 不管是在改變狀態的控制器函數中，仍是在應該更新的視圖中，都沒有明確的關係定義。 使用
observable 來裝飾你的狀態和視圖，這足以讓 MobX檢測全部關係了。

appState.resetTimer = action(function reset() {
    appState.timer = 0;
});

setInterval(action(function tick() {
    appState.timer += 1;
}), 1000);

只有在嚴格模式(默認是不啓用)下使用 MobX 時才須要 action 包裝。 建議使用 action，由於它將幫助你更好地組織應用，並表達出一個函數修改狀態的意圖。
同時,它還自動應用事務以得到最佳性能。
MobX 區分了如下幾個應用中的概念

1. State(狀態)
   狀態 是驅動應用的數據。 一般有像待辦事項列表這樣的領域特定狀態，還有像當前已選元素的視圖狀態。 記住，狀態就像是有數據的excel表格。

2. Derivations(衍生)
   任何 源自狀態而且不會再有任何進一步的相互做用的東西就是衍生。 衍生以多種形式存在:

用戶界面
衍生數據，好比剩下的待辦事項的數量。
後端集成，好比把變化發送到服務器端。
MobX 區分了兩種類型的衍生:

Computed values(計算值) - 它們是永遠可使用純函數(pure function)從當前可觀察狀態中衍生出的值。
Reactions(反應) - Reactions 是當狀態改變時須要自動發生的反作用。須要有一個橋樑來鏈接命令式編程(imperative programming)和響應式編程(reactive programming)。
或者說得更明確一些，它們最終都須要實現I / O 操做。
剛開始使用 MobX 時，人們傾向於頻繁的使用 reactions。 黃金法則: 若是你想建立一個基於當前狀態的值時，請使用 computed。
回到excel表格這個比喻中來，公式是計算值的衍生。但對於用戶來講，能看到屏幕給出的反應則須要部分重繪GUI。

1. Actions(動做)
   動做 是任一一段能夠改變狀態的代碼。用戶事件、後端數據推送、預約事件、等等。 動做相似於用戶在excel單元格中輸入一個新的值。

在 MobX 中能夠顯式地定義動做，它能夠幫你把代碼組織的更清晰。 若是是在嚴格模式下使用 MobX的話，MobX 會強制只有在動做之中才能夠修改狀態。
原則
MobX 支持單向數據流，也就是動做改變狀態，而狀態的改變會更新全部受影響的視圖。

當狀態改變時，全部衍生都會進行原子級的自動更新。所以永遠不可能觀察到中間值。

全部衍生默認都是同步更新。這意味着例如動做能夠在改變狀態以後直接能夠安全地檢查計算值。

計算值 是延遲更新的。任何不在使用狀態的計算值將不會更新，直到須要它進行反作用（I / O）操做時。 若是視圖再也不使用，那麼它會自動被垃圾回收。

全部的計算值都應該是純淨的。它們不該該用來改變狀態。

import {observable, autorun} from 'mobx';

var todoStore = observable({
    /* 一些觀察的狀態 */
    todos: [],

    /* 推導值 */
    get completedCount() {
        return this.todos.filter(todo => todo.completed).length;
    }
});

/* 觀察狀態改變的函數 */
autorun(function() {
    console.log("Completed %d of %d items",
        todoStore.completedCount,
        todoStore.todos.length
    );
});

/* ..以及一些改變狀態的動做 */
todoStore.todos[0] = {
    title: "Take a walk",
    completed: false
};
// -> 同步打印 'Completed 0 of 1 items'

todoStore.todos[0].completed = true;
// -> 同步打印 'Completed 1 of 1 items'

本文整理自：https://cn.mobx.js.org/intro/concepts.html