MobX详解（三）：MobX基础

verano 发布于2019-08-26 11:34 / 689人阅读

摘要：则是最优秀的解决方案之一。衍生任何源自状态并且不会再有任何进一步的相互作用的东西就是衍生。例如事件触发，数据请求等。通常的流程是改变状态，状态改变时，需要监听到状态的改变，并在上做出一致的响应。利用也能将状态转变为可观察对象。

当网页逻辑变得更复杂，页面的状态管理将变成一个难题。

因此，不断有新的状态管理解决方案出现在我们的视野。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也能够将普通对象转化为可观察对象。

// 待续

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107138.html

前端每周清单第 55 期: MobX 4 特性概览，iOS Hacks 分享, 分布式事务详解

摘要：异步剪贴板操作过去的数年中，各浏览器基本上都在使用来进行剪贴板交互。而提供了新的，则为我们提供了另一种异步式的剪贴板操作方式，本文即是对该机制与接口规范的详细介绍。 showImg(https://segmentfault.com/img/remote/1460000013854167); 前端每周清单第 55 期: MobX 4 特性概览，iOS Hacks 分享, 分布式事务详解 ...

zombieda 2019-08-22 15:32 评论0 收藏0
【用故事解读 MobX 源码（五）】 Observable

摘要：前言初衷以系列故事的方式展现源码逻辑，尽可能以易懂的方式讲解源码本系列文章用故事解读源码一用故事解读源码二用故事解读源码三用故事解读源码四装饰器和用故事解读源码五文章编排每篇文章分成两大段，第一大段以简单的侦探系列故事的形式讲解所涉及人物场 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式...

leeon 2019-08-23 10:39 评论0 收藏0
MobX详解（一）：装饰者模式

摘要：当我们想要扩展一个对象的能力时，通常可以通过添加原型方法，修改构造函数，继承等方式。构造函数继承战士战士的移动血条战士的移动速度原型的继承战士的奔跑动作战士的基础攻击接下来我们要创建装饰类。当我们想要扩展一个对象的能力时，通常可以通过添加原型方法，修改构造函数，继承等方式。除此之外，我们还可以通过妆饰者模式来达到目的。例如一个游戏角色，我们在不改变这个角色对象的条件下，给角色穿一件...

xingqiba 2019-08-26 11:32 评论0 收藏0
前端进阶资源整理

摘要：前端进阶进阶构建项目一配置最佳实践状态管理之痛点分析与改良开发中所谓状态浅析从时间旅行的乌托邦，看状态管理的设计误区使用更好地处理数据爱彼迎房源详情页中的性能优化从零开始，在中构建时间旅行式调试用轻松管理复杂状态如何把业务逻辑这个故事讲好和前端进阶 webpack webpack进阶构建项目(一) Webpack 4 配置最佳实践 react Redux状态管理之痛点、分析与...

BlackMass 2019-08-23 12:36 评论0 收藏0
【用故事解读 MobX源码（三）】 shouldCompute

摘要：最简单的情况张三的存贷这里我们创建了实例探长实例观察员这个示例和我们之前在首篇文章用故事解读源码一中所用示例是一致的。 ================前言=================== 初衷：以系列故事的方式展现 MobX 源码逻辑，尽可能以易懂的方式讲解源码；本系列文章：《【用故事解读 MobX源码（一）】 autorun》《【用故事解读 MobX源码（二）】...

JackJiang 2019-08-22 16:57 评论0 收藏0