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

// 待续