MobX Observables 和 RxJS 有什么关系吗？答案

【问题标题】：Does MobX Observables have anything to do with RxJS ones?MobX Observables 和 RxJS 有什么关系吗？
【发布时间】：2018-12-10 14:36:00
【问题描述】：

标题几乎是自我解释的。我找不到任何关于它的信息。 Angular 在底层使用 RxJs 可观察对象，在 React 和 MobX 中也是如此吗？

【问题讨论】：

不，MobX 和 RxJs 是完全独立的库。

标签： javascript angular reactjs rxjs mobx

【解决方案1】：

从我在 MobX 源代码中看到的内容来看，重叠的地方并不多。它们都不互相使用，也不相互有共同的依赖关系。

在 MobX 中对 Observable 的解释似乎是对象、数组、地图等都被包裹了一个 Proxy 对象来跟踪和通知属性的变化。这用于通过应用程序传达状态更改，同时对 vanilla javascript 类型的更改相对较少（这可能是他们所说的“透明”）。虽然这些类型可能是可观察的（如在动词中），但它们不是Observables defined by ReactiveX 的实现。

另一方面，RxJS 提供了一个全新的，有些人会说是巨大的 API，用于修改由不一定代表 vanilla javascript 类型的抽象 Observable 类型生成的所谓“通知”。代替直接强制更改对象，由可管道运算符组成的“LINQ-ish”语言用于表达执行流程。在许多方面，RxJS 可以被视为 JavaScript 的语言扩展，以启用响应式编程as defined in the Observable contract。

虽然有一个重叠，那就是“MobX”声称是一个用于

的库

透明地应用函数式反应式编程

RxJS 也提供响应式编程，但绝对不透明。

【讨论】：

我会补充一点（没有必要自己回答），RXJS 实现了可观察的流，而 mobx 实现了可观察的值。这些是非常不同的概念，并且会严重影响您编写应用程序的方式。

【解决方案2】：

这是一个来自官方mobx github wiki page的简单易懂的例子

假设您有一个具有三个属性的人对象（MobX 中的可观察属性或 RxJs 中的流）：

class Person {
  constructor(firstname, lastname, nickname) {
    this.firstname = firstname
    this.lastname = lastname
    this.nickname = nickname
  }
}

让我们假设您想要被动地为该人派生一个“显示名”。你想要这样的东西......

displayname() {
   return this.nickname ? this.nickname : this.firstname + ' ' + this.lastname
}

在 MobX 中，你只需要这样：-

const displayname = computed(() => this.nickname ? this.nickname : this.firstname + ' ' + this.lastname)

但是，在 RxJS 中，您必须执行以下操作：-

const displayStream = person.nickname.combineLatest(this.nickname, this.firstname, this.lastname)
  .map([nickname, firstname, lastname] => nickname ? nickname : firstname + " " + lastname)
  .distinctUntilChanged

如上例所示，这里是链接阅读的关键点：-

在 MobX 中您几乎没有运算符，因为通常通过普通的 javascript 结构来组合内容。
在 RxJS 中，您需要使用 combineLatest 或任何其他运算符来执行此操作。
MobX 将自动停止侦听未主动使用的 observable。
MobX 具有一流的支持，可高效处理对象、数组和映射等复杂数据结构。

什么时候使用一个而不是另一个？

“如果时间起着重要作用，例如在节流、累积事件或具有复杂的连接模式（如 zip）时，这些情况下您希望使用流 (RxJS)，否则您可以简单地使用 MobX。”

如需更详细的解释，请前往MobX Repo

【讨论】：