MobX入門

繆宇發表於2017-12-22

本文嘗試解釋MobX是如何運作的。我們將用MobX建立一個小案例。如果你正在找靠譜的MobX文件，可以去看官方文件。

什麼是MobX

官方文件的解釋：簡潔，易擴充套件的狀態管理。簡單來說，MobX可以很好的管理應用程式的狀態/資料，同時又簡潔，易擴充套件。先來看一張圖：

mobx-diagram

我們通過上圖的的步驟來建立一個簡單應用。

State

mobx-store

在MobX中你可以設定一個或者多個state，我們先設定一個：

var store = mobx.observable({
    counter: 0
})

複製程式碼

我們初始化store，只有一個狀態資料counter。你的物件可能有多個層級對應多個不同的屬性。

Rendering

mobx-render

MobX和react.js一起用效果很好，但是不用react.js也可以。我們用原生JavaScript來把狀態渲染到頁面：

`<div>-</div>`

複製程式碼
function render(state) {
    document.getElementById('counter').textContent = state.counter;
}

複製程式碼

我們拿到了狀態並更新到了頁面。

Actions

mobx-action

當action發生，我們可以直接改變狀態：

<button id="button">Increment</button>
複製程式碼
document.getElementById('button').addEventListener('click', function() {
    store.counter = store.counter + 1
})

複製程式碼

當我們點選按鈕，state 中的 counter將會加1。

改變State

當我們改變狀態，我們將更新渲染：

mobx.observe(store, function() {
    render(store)
})

複製程式碼

最終程式碼

jsfiddle

// html
<button id="button">Increment</button>
複製程式碼
// JavaScript
var store = mobx.observable({
    counter: 0
})

function render(state) {
    document.getElementById('counter').textContent = state.counter;
}

document.getElementById('button').addEventListener('click', function() {
    store.counter = store.counter + 1
})

mobx.observe(store, function() {
    render(store)
})
複製程式碼

與Redux比較

比起Redux，MobX不管是寫程式碼還是理解，似乎都要簡單很多，而且你不用寫很多重複的程式碼。但是隨之而來的代價就是你不知道它內部是如何運作的。MobX也可以寫的和Redux一樣：用actions，建立action，建立非同步action等等，但是不是強制的。總的來說，如果你保持你的程式碼模組化，可測試以及資料單向流，MobX是個不錯的選擇。

> 原文：https://bumbu.github.io/simple-mobx/

相關文章