MobX入門

MobX入門

本文嘗試解釋MobX是如何運做的。咱們將用MobX建立一個小案例。若是你正在找靠譜的MobX文檔，能夠去看官方文檔。

什麼是MobX

官方文檔的解釋：簡潔，易擴展的狀態管理。簡單來講，MobX能夠很好的管理應用程序的狀態/數據，同時又簡潔，易擴展。先來看一張圖：

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

State

在MobX中你能夠設置一個或者多個state，咱們先設置一個：

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

咱們初始化store，只有一個狀態數據counter。你的對象可能有多個層級對應多個不一樣的屬性。

Rendering

MobX.js一塊兒用效果很好，可是不用react.js也能夠。咱們用原生JavaScript來把狀態渲染到頁面：

`<div>-</div>`

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

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

Actions

當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-->
<div id="counter">-</div>
<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是個不錯的選擇。

本文轉載自：衆成翻譯
譯者：miaoYu
連接：http://www.zcfy.cc/article/4730
原文：https://bumbu.github.io/simple-mobx

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