MobX详解（三）：MobX基本

2024年4月1日 301次阅读 来源: 九死蚕传人bo

当网页逻辑变得更庞杂，页面的状况治理将变成一个困难。

因而，不停有新的状况治理解决方案出现在我们的视野。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也可以将一般对象转化为可视察对象。

// 待续
    原文作者：九死蚕传人bo
    原文地址: https://segmentfault.com/a/1190000013088851
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞