MobX詳解（三）：MobX基礎

當網頁邏輯變得更復雜，頁面的狀態管理將變成一個難題。

所以，不斷有新的狀態管理解決方案出如今咱們的視野。MobX則是最優秀的解決方案之一。

安裝

cnpm install mobx --save

基本概念：

狀態

在一個項目中，咱們可能會用一個index變量來控制列表中的某一項顯示爲選中狀態。那麼這個index變量就能夠認爲是一個狀態值。當咱們想要控制更多的元素，那麼則須要更多的狀態值，許多狀態值或者數據組成的對象，就能夠理解爲一個項目的狀態。

咱們經常會將全部的狀態值放在一個對象中來統一管理。

var state = {
  index: 1,
  todos: [...],
  isLogin: false
  // ...
}

衍生

任何 源自狀態而且不會再有任何進一步的相互做用的東西就是衍生。

例如在狀態對象中，保存了了須要完成的事件列表todos，以及一個已經完成事件的數量，那麼咱們就能夠衍生出未完成事件的數量。

MobX區分兩種衍生：

• Computed： 計算值。
• Reactions： 反應，當狀態改變時，須要作哪些UI操做來和狀態的改變保持一致。

動做

動做：action 是指改變狀態的代碼。例如事件觸發，數據請求等。

一般的流程是action改變狀態，狀態改變時，須要監聽到狀態的改變，並在UI上作出一致的響應。

咱們能夠利用mobx提供的observable將狀態對象轉換爲可觀察的對象，這樣咱們就可以藉助mobx監聽到狀態的改變，並作出對應的響應了。

observable

import { observable } from 'mobx';

var index = 10;

// 轉化爲可觀察對象
var oIndex = observable(index);

oIndex是變量index的可觀察對象。當咱們想要訪問與修改存儲在oIndex中的狀態時。

// 訪問
oIndex.get(); // 10

// 設置
oIndex.set(20); 
oIndex.get(); // 20

autorun

當可觀察對象中保存的值發生變化時，能夠在mobx.autorun中被觀察到。例以下面的例子中，用index表示body的邊框寬度。咱們將index轉化爲可觀察對象，並在不一樣的時機改變觀察對象的值，並在autorun中，進行對應的UI響應。

import { observable, autorun } from 'mobx';

var index = 0;
var oIndex = observable(index);

autorun(() => {
    document.body.style.border = `${oIndex.get() * 2}px solid red`;
})


oIndex.set(10);

setTimeout(() => {
    oIndex.set(20);
}, 1000)

咱們發現，當咱們想要改變body的邊框時，只須要利用oIndex.set改變狀態值就能夠了。這正是響應式編程的特色，咱們再也不每次狀態改變時，都去執行一次對應的UI改變，咱們只須要將UI變化(衍生)定義好，僅僅改變狀態值就好了，MobX幫助咱們完成了剩餘的其餘工做。

computed

利用mobx.computed也能將狀態轉變爲可觀察對象。可是一般狀況下，computed觀察的值，是經過其餘已有狀態值衍生而來。

import { observable, autorun, computed } from 'mobx';

var index = 0;
var oIndex = observable(index);
var oComputed = computed(() => oIndex.get() % 2 == 0)

autorun(() => {
    document.body.style.background = oComputed.get() ? 'red' : 'orange';
})


setInterval(() => {
    oIndex.set(oIndex.get() + 1)
}, 500)

通過這幾個例子，相信你們都已經能感覺到可觀察對象中值的變化可以在autorun中對應到UI變化上，所以後面的例子就直接log出最新的值，再也不列出新的UI變化了

在計算總成績，計算總價格等場景，computed也能很好的勝任。

將Object轉化爲可觀察對象

除了可以將基礎類型轉化爲可觀察對象，observable也可以將普通對象轉化爲可觀察對象。

// 待續