MobX入门

本文尝试解释MobX是如何运做的。咱们将用MobX建立一个小案例。若是你正在找靠谱的MobX文档，能够去看官方文档。

什么是MobX

官方文档的解释：简洁，易扩展的状态管理。简单来讲，MobX能够很好的管理应用程序的状态/数据，同时又简洁，易扩展。先来看一张图：

咱们经过上图的的步骤来建立一个简单应用。

State

在MobX中你能够设置一个或者多个state，咱们先设置一个：

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

复制代码

咱们初始化store，只有一个状态数据counter。你的对象可能有多个层级对应多个不一样的属性。

Rendering

MobX和react.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
<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/