MobX Observables 和 RxJS 有什么关系吗？

Question

标题几乎是自我解释的。我找不到任何关于它的信息。Angular 在幕后使用 RxJs observables 是不是在 React 和 MobX 中是一样的？

Answer 1

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

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

另一方面，RxJS 提供了一个全新的，有人会说是巨大的 API，用于修改由抽象 Observable 类型生成的所谓“通知”，这些类型不一定代表普通的 javascript 类型。不是直接强制更改对象，而是使用由可管道操作符组成的“LINQ-ish”语言来表达执行流程。在许多方面，RxJS 可以被视为 JavaScript 的语言扩展，以实现Observable 合约中定义的响应式编程。

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

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

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

Answer 2

这是来自官方 mobx github wiki 页面的一个易于理解的示例

假设您有一个具有三个属性的 person 对象（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