RxJS 是一个强大的函数响应式编程库，它能极大的简化前端开发中复杂的异步操作和数据流控制。在 RxJS 中，Observable 是一个非常重要的概念，它代表了一个可以被任意数量的观察者订阅的可观察对象。Observable 又分为 Hot Observables 和 Cold Observables 两种类型，它们的行为和使用方式有很大的区别。
Cold Observables
Cold Observables 是最常见的 Observable 类型。它们代表了一个数据流的生成器，并且每个订阅者都会产生独立的数据流。这类 Observable 可以被多个订阅者订阅，每个订阅者都会独立的获取数据流。此外，当新的订阅者订阅一个已经发射的 Cold Observable 时，它会从最开始重新发射数据流。
下面是一个简单的示例代码，它创建了一个 Cold Observable，并且通过两个订阅者订阅了它：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ---------- - --- ----------------------- -- - ----------------------- ------------- ------------------- ------------------- ------------------- ---------------------- --- ---------------------------- -- ----------------------- ---- -------- ---------------------------- -- ----------------------- ---- --------
这个代码里面，我们使用 Observable 类创建了一个简单的 Cold Observable。在 Observable 的执行函数中，我们依次发射了三个数字，并且最后调用了 complete 方法，表示数据流结束。
当我们运行这个代码时，控制台输出如下：
Generating Observable Subscriber A: 1 Subscriber A: 2 Subscriber A: 3 Subscriber B: 1 Subscriber B: 2 Subscriber B: 3
我们可以看到，控制台输出了生成 Observable 的日志，并且两个订阅者都独立的获取了数据流。当第二个订阅者订阅时，它从头开始重新获取了一遍数据流。
Hot Observables
Hot Observables 是相对比较复杂的 Observable 类型，它们代表了一个已经存在的数据流，订阅者可以随时订阅这个数据流，并且在订阅时就能开始获取数据。多个订阅者共享同一个数据流，当新的订阅者订阅一个 Hot Observable 时，它不会从头开始重新发射数据流。
在 RxJS 中，有很多操作符可以把一个普通的 Observable 转换成一个 Hot Observable，比如 publish、share、multicast 等。这里以 publish 操作符为例，来演示 Hot Observable 的使用方式：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ------ - ------- - ---- ----------------- ----- -------------- - --- ----------------------- -- - ----------------------- ------------- ------------------- ------------------- ------------------- ---------------------- --- ----- ---------- - ------------------------------- --------------------- ---------------------------- -- ----------------------- ---- -------- ---------------------------- -- ----------------------- ---- --------
这段代码首先创建了一个 Cold Observable，然后通过 publish 操作符把它转换成了一个 Hot Observable，并且通过 connect 方法激活了这个 Observable。
当两个订阅者订阅时，它们获取到的数据流是相同的，输出如下：
Generating Observable Subscriber A: 1 Subscriber A: 2 Subscriber A: 3 Subscriber B: 1 Subscriber B: 2 Subscriber B: 3
这里需要注意的是，在这个例子中我们使用了 connect 方法来激活 Hot Observable，同时后面的两个订阅者也是通过同一个 Observable 来订阅的，如果我们把其中任意一个改成独立的 Observable 对象，它们获取到的数据流就不一样了。
总结与指导意义
Hot Observables 和 Cold Observables 都是 RxJS 中非常重要的概念，它们的行为和使用方式有很大的区别。在实际开发中，我们需要根据实际需求选择合适的 Observable 类型，并且适当使用 Hot Observable 转换操作符来提高数据流的重用性和性能。同时，我们还需要注意 Hot Observable 的订阅管理问题，避免出现订阅泄露等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6530d0b87d4982a6eb260b15