当网页逻辑变得更复杂,页面的状态管理将变成一个难题。
因此,不断有新的状态管理解决方案出现在我们的视野。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
也能够将普通对象转化为可观察对象。
// 待续