angular - 使用 BehaviorSubject 与 angular 中的普通 bool 属性

Question

假设一个 HTML 元素使用像这样的 Angular 代码

<div *ngIf="(stateX$ | async)" ...

哪里stateX$是一个 rxjs BehaviorSubject<boolean> Angular 组件的代码包含

this.stateX$.next(...)

经过一些繁琐的计算。我们能否同样很好地定义 stateX作为一个boolean并使用

<div *ngIf="stateX" ...

分别在组件代码中

this.stateX = ...

假设 angular 将获取 stateX 的变化就像它应该在 BehaviorSubject 中记录一个新值一样？如果任何一种方法都有效，这两种解决方案的优点/缺点是什么？

Answer 1

性能。

Angular 的变更检测速度相当快，但在较大的动态应用程序上，它会很快开始占用大量时间。 Angular 需要遍历每个组件中的每个变量并检查更改。

状态X$ | async 不需要 Angular 的变化检测(因此)。这种方法告诉 Angular 正在更改什么，在哪里更改以及何时更改。严重依赖这种方法的程序可以完全消除 Angular 的变化检测!

为较小的应用程序执行此操作只会产生很小的好处，以至于增加的复杂性可能不值得。然而，对于较大的应用程序，仅此一项优势就值得付出努力。

设计。

Observables 是面向 future 的设计，因为它们是前端开发中一个非常古老且普遍存在的问题的解决方案

网页设计一直充斥着控制反转。在早期，大多数 javascript 涉及设置对各种 DOM 事件的订阅并让浏览器适本地运行您的代码。

现在编写的 JS 可以“响应” 来自 DOM、服务器、内部服务的事件，不胜枚举。您编写的大部分代码由您无法直接控制的其他系统控制。

好处是您无法控制这些外部系统，因此不需要管理它们。例如:网站不需要 JS 来呈现 DOM，浏览器会为您处理所有这些。我可以在没有一行 JS 的情况下创建一个网站。

缺点是一样的，很难控制外部服务调用您的代码的顺序/频率等。传统上，这会导致回调 hell 。 Promise 和 Observables 都在不同程度上解决了这一主要缺点。

使这种响应式(Reactive)代码更易于编写/管理。

---

Angular 变化检测将此控制权留在调用者手中的时间稍长一些。好处是更改变量仍然是非常简单的一行。缺点是整个系统无法与前端开发工作的其他方式互操作。

想象一下: 由整个组件主机读取/更新的 bool 值对组件变得重要是一种新方法。这个新组件想要记录每次此值设置为真和每次此值设置为假的次数。该组件的状态以某种方式与值的变化相关联。

使用 RxJS，值与服务器响应或 DOM 事件没有区别。它们只是您可以 Hook 的事件。编写这段代码很简单。

没有 RxJS，这会变得很复杂。您可以添加一些代码，在您更新此 bool 值的每个位置调用这些代码，然后祈祷 future 的维护者也记得这样做(容易出错)。你可以把它变成一个带有 getters 和 setters 的“服务”，以及一种 Hook 这些变化的方法，但是突然之间你正在写一些比 observable 更复杂的东西，它不具有与这个经过实战测试的库相同的性能/可扩展性.何必呢？

---

最后，您可以通过尽可能统一您使用的抽象来管理大型系统的复杂性。如果你打算在其他地方使用 RxJS，为什么不完全放弃 Angular 变化检测并全力以赴呢？当然，更新 bool 值变得有点不符合人体工程学，但整个应用程序中的所有内容都将使用相同的数据流处理。