RxJS 是一个流式编程库，它可以帮助我们以响应式编程方式处理数据。在 RxJS 中，有两种类型的 Observable：热 Observable 和冷 Observable。这两种 Observable 之间存在着很大的区别，因此我们需要深入了解它们之间的差异，从而更好地利用 RxJS。
什么是 Hot Observable？
Hot Observable 是一种 Observable，可以在被订阅之前就开始发出数据流。 Hot Observable 通常以事件的形式表现，因此，当订阅它时，订阅者可能会错过已经发生的一些事件。
对 Hot Observable 进行订阅的两个订阅者将会收到相同的事件序列，如果 Hot Observable 在订阅之后继续发出事件，那么这两个订阅者都将收到这些事件。
下面是 Hot Observable 的实现示例：
-- -------------------- ---- ------- ----- ---------- - --- ------------- ---------------------- ----- --- -- ----------------------- ------ --- ---------------------- ----- --- -- ----------------------- ------ --- ------------------- -------------------
在这个例子中，我们创建了一个 Rx.Subject 对象，它是 Hot Observable 的一种实现形式。我们使用了两个订阅者来订阅它，然后我们分别向它发送了两个消息（1 和 2）。两个订阅者都将收到这些消息，并打印到控制台上。
什么是 Cold Observable？
Cold Observable 是一种 Observable，只有在被订阅的时候，才开始发出数据流。 Cold Observable 通常以数据的形式表现，因此，当第一个订阅者订阅它时，它开始发出数据流。如果第二个订阅者在第一个订阅者完成前订阅，那么第二个订阅者将会从头开始接收数据流。
对 Cold Observable 进行订阅的两个订阅者将会收到不同的事件序列，除非它们订阅的时间相同，并且 Cold Observable 发出相同的数据流。
下面是 Cold Observable 的实现示例：
-- -------------------- ---- ------- ----- ---------- - ----------------------------- ---------- - ----------------- ----------------- --- ---------------------- ----- --- -- ----------------------- ------ --- ---------------------- ----- --- -- ----------------------- ------ ---
在这个例子中，我们创建了一个 Rx.Observable 对象，并在创建它时，向它发送了两个消息（1 和 2）。当我们使用两个订阅者订阅它的时候，它将从头开始发出数据流。两个订阅者将收到不同的事件序列，因为它们的订阅时间不同。
Hot Observable 和 Cold Observable 的应用
在实际开发中，我们通常需要根据不同的场景来选择 Hot Observable 或 Cold Observable。
Hot Observable 适用于需要实时接收数据流的场景，例如鼠标移动事件、键盘按键事件、定时器事件等。 Hot Observable 的缺点是可能会错过已经发生的事件，因此实时性可能会受到影响。
Cold Observable 适用于需要从头开始处理数据流的场景，例如获取数据、从本地存储中读取数据等。 Cold Observable 的缺点是可能会造成性能浪费，因为它需要在每次订阅时重新生成数据流。
总结
Hot Observable 和 Cold Observable 是 RxJS 中的两种基本类型，它们之间存在着很大的区别。 Hot Observable 在被订阅之前就开始发出数据流，而 Cold Observable 在被订阅时才开始发出数据流。在实际开发中，我们应该根据不同的场景来选择使用 Hot Observable 或 Cold Observable，并且避免出现使用不当而造成性能问题的情况。
示例代码：https://stackblitz.com/edit/rxjs-hot-cold-observable-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66558c72d3423812e4a37313