RxJS 是一个基于Observables的异步编程库，可以让我们更轻松地处理异步操作和事件流。如果你是前端开发人员，那么你非常可能会在你的工作中使用 RxJS。在 RxJS 中，你将会遇到两个重要的概念：冷流和热流。
什么是冷流和热流？
在 RxJS 中，流可以是“冷”或“热”。当一个 observable 被订阅时，如果它开始发射的数据是源头产生的新数据，那么它就是一个“冷” observable。如果 observable 发射的数据独立于订阅，那么它就是一个“热” observable。
理解背后的原理
要理解冷流和热流的区别，首先需要理解observable的工作方式。当我们订阅一个observable时，它就开始执行，带着一些数据发送给观察者。同样，当多个观察者订阅一个 observable 时，它也会运行多次，从而为每个观察者发送自己的独立数据。
但是，这并不适用于所有 observable。冷 observable 是基于记忆的，即当观察者们订阅它时，它会重新计算。即使两个观察者订阅了一个冷 observable，这个 observable 也会为这两个观察者提供独立的数据流。
另一方面，热 observable是无状态的，即当一个观察者订阅它时，它会始终持续地发出相同的值流。这意味着，当多个观察者订阅热 observable 时，它们可以访问相同的数据流，并且不会独立生成一个数据流。
应用场景
对于一个应用程序，正确选择冷或热流是很重要的，它可能会影响应用程序的性能和功能。
冷流的应用场景
冷流适用于这样的场景：当每一个订阅者从同一个起始状态开始需要一个独立的流时。比如当我们需要一个新对象的实例时，假如重复操作将得到相同的结果，那么这个 observable 应该是冷流。当我们使用 HTTP 请求或长轮询时，通常会使用冷流。在这些场景中，每个订阅者需要获取不同的数据结果，而不是共享一个结果。
以下是冷流的示例代码：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - ---- - ---- -----------------
-- ------------------
----- ---------- - -----------------------------
-- -- ----------------
--------------------------- -- -
----------------------- ---- ------
---
-- ----------- ----------
------------- -- -
--------------------------- -- -
----------------------- ---- ------
---
-- ------输出结果：
Subscriber A: 0 Subscriber A: 1 Subscriber A: 2 Subscriber B: 0 Subscriber B: 1 Subscriber B: 2
在这个例子中，当我们订阅 observable 时，它开始发射值，在第8秒之后，我们再次订阅相同的 observable 时，它重新启动定时器。
热流的应用场景
与冷流不同，热流适用于订阅的相同时间段内需要相同的数据流情况。当我们与一组 UI 组件交互时，通常会使用热流。这是因为每个组件都需要访问相同的数据，而不是为它们的每个实例创建一个新的流。
以下是热流示例代码：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ------------ - ---- -----------------
-- ---- ----- ------------
----- ---------- - ------------------- ----------------------------------
-- -- ----------
--------------------------- -- -
----------------------- ---- ------
---
-- ----------- ----------
------------- -- -
--------------------------- -- -
----------------------- ---- ------
---
-- ------输出结果：
Subscriber A: MouseEvent { … }
Subscriber A: MouseEvent { … }
Subscriber B: MouseEvent { … }
Subscriber B: MouseEvent { … }在这个例子中，热 observable 从document中触发click事件。无论何时单击文档，都会触发该事件并发出数据。当第二个订阅者加入后，事件流仍在继续，并且两个订阅者将获得相同的结果。
结论
冷流和热流都在 RxJS 中发挥着重要的作用。正确选择使用它们将有助于我们实现更可靠和高效的应用程序。为了知道在什么时候使用冷流或热流，我们需要考虑我们的应用程序的性能和要求。理解这两种类型的流后，我们就可以根据不同的场景来应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ad175ddd3a70eb6d0dd7e