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也能够将普通对象转化为可观察对象。

// 待续