MobX的可观察对象是否与RxJS的可观察对象有关？

Question

标题基本上已经解释了问题。我找不到任何关于它的信息。Angular在幕后使用RxJs可观察对象，React和MobX是否也是这样？

- Davit Karapetyan

---

不，MobX和RxJs是完全不同的库。 - Tholle

Answer 1

根据我在MobX源代码中的观察，它们之间没有很多重叠。它们都不使用彼此，也没有共同依存项。

MobX中Observable的解释似乎是将对象、数组、映射等用代理对象包装起来以跟踪和通知属性更改。这用于通过应用程序通信状态更改，同时相对于普通JavaScript类型（这可能是他们所说的“透明”）变化较小。虽然这些类型可以被观察（作为动词），但它们不是由ReactiveX定义的Observables的实现。

另一方面，RxJS提供了一个完全新的、有人会说是巨大的API，用于修改抽象Observable类型生成的所谓“通知”，这些类型不一定表示普通的JavaScript类型。与直接命令式地更改对象不同，使用由可管道的运算符组成的“LINQ-ish”语言来表达执行流程。在许多方面上，RxJS可以被看作是JavaScript的语言扩展，以启用Observable合约中定义的反应式编程。

不过有一个重叠点，那就是“MobX”声称是一个库，用于“透明地应用函数响应式编程”。

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

- ggradnig

---

我会尽力进行翻译，以下是需要翻译的内容：我会补充一下（没必要发表自己的答案），RXJS 实现可观察流，而 mobx 则实现可观察值。这些概念非常不同，并且极大地影响了你编写应用程序的方式。 - Kev

Answer 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

如上所示，以下是链接阅读中的关键点：

1. 在MobX中，你几乎不需要运算符，因为通常通过普通的javascript构造来组合内容。
2. 在RxJS中，您需要使用combineLatest或任何其他操作符来完成此操作。
3. MobX将自动停止监听未被积极使用的可观察对象。
4. MobX对于高效地处理复杂数据结构（如对象、数组和映射）具有一流的支持。

何时使用其中之一？ “如果时间很重要，例如节流、累积事件或具有复杂的联接模式（如zip），这些都是您想使用流（RxJS）的情况，否则您可以简单地使用MobX。” 欲了解更详细的解释，请访问MobX Repo。

- Mussa Charles

---

忘记提到 RxJS 需要 Observable 的额外设置，否则上述代码无法正常工作。 - steve