JS `Functional Reactive Programming` (FRP) 与 `RxJS` 的冷热流概念

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊 JS 领域里高大上的 Functional Reactive Programming (FRP) 以及 RxJS 中让人挠头的冷热流概念。保证让各位听完之后，感觉自己也像个 FRP 大师一样，指点江山，激扬文字！

开场白：为啥要有 FRP？

咱们先来想想，平时写 JS 代码，是不是经常遇到各种异步操作？比如用户点击按钮、网络请求、定时器等等。这些操作会产生一堆事件，然后我们需要手动去处理这些事件，代码写多了就成了意大利面条，乱成一锅粥。

FRP 就是来拯救我们的！它把一切都看作是数据流，然后用函数式的方式来处理这些数据流，让我们的代码更加简洁、易于维护。

FRP 核心概念：数据流和函数式操作

FRP 的核心就是数据流 (Data Stream)。你可以把数据流想象成一条河流，河里流淌着各种数据，比如鼠标点击事件、键盘输入、网络请求结果等等。

然后，我们可以用各种函数式操作 (Functional Operations) 来处理这些数据流，比如 map (映射)、filter (过滤)、reduce (归约) 等等。

举个例子：

// 假设 clicks 是一个鼠标点击事件的数据流
const clicks = fromEvent(document, 'click');

// 将点击事件转换为点击位置的坐标
const positions = clicks.pipe(
  map(event => ({ x: event.clientX, y: event.clientY }))
);

// 过滤掉 Y 坐标小于 100 的点击事件
const filteredPositions = positions.pipe(
  filter(position => position.y >= 100)
);

// 订阅数据流，将过滤后的点击位置输出到控制台
filteredPositions.subscribe(position => {
  console.log('有效点击位置:', position);
});

这段代码用 RxJS 实现了一个简单的 FRP 例子：

fromEvent 创建了一个基于 DOM 事件的数据流 clicks。
map 操作将点击事件转换为点击位置的坐标对象。
filter 操作过滤掉 Y 坐标小于 100 的点击事件。
subscribe 操作订阅数据流，并在控制台输出过滤后的点击位置。

RxJS：FRP 的 JS 实现

RxJS (Reactive Extensions for JavaScript) 是一个非常流行的 FRP 库，它提供了丰富的操作符来处理数据流，让我们可以轻松地构建复杂的异步应用。

冷流与热流：傻傻分不清楚？

好，现在进入正题，也是很多人觉得比较头疼的部分：冷流 (Cold Observable) 和热流 (Hot Observable)。

冷流：按需生产，独立消费

冷流就像一个按需生产的工厂。只有当有人订阅它的时候，它才会开始生产数据。而且，每个订阅者都会得到一份独立的数据流。

想象一下，你点了一份外卖，只有当你下单的时候，商家才会开始做。而且，你点的外卖是专属于你的，别人没法分一杯羹。

// 创建一个冷流
const coldObservable = new Observable(subscriber => {
  console.log('开始生产数据...');
  subscriber.next(Math.random()); // 产生一个随机数
  subscriber.complete();
});

// 订阅者 1
coldObservable.subscribe(value => {
  console.log('订阅者 1 收到:', value);
});

// 订阅者 2
coldObservable.subscribe(value => {
  console.log('订阅者 2 收到:', value);
});

// 输出结果：
// 开始生产数据...
// 订阅者 1 收到: 0.123456789
// 开始生产数据...
// 订阅者 2 收到: 0.987654321

可以看到，每次订阅 coldObservable，都会重新执行 Observable 构造函数中的代码，生成一个新的随机数。每个订阅者都得到了不同的随机数。

热流：持续放送，共享消费

热流就像一个电视台，它会持续不断地放送节目，不管有没有人看。而且，所有订阅者都共享同一个数据流。

想象一下，你在看电视，电视节目会一直播放，不管你看不看。而且，你看到的节目是所有人都能看到的，不会因为你是 VIP 就给你单独播放一套。

// 创建一个热流 (使用 Subject)
const hotObservable = new Subject();

// 订阅者 1
hotObservable.subscribe(value => {
  console.log('订阅者 1 收到:', value);
});

// 订阅者 2
hotObservable.subscribe(value => {
  console.log('订阅者 2 收到:', value);
});

// 往热流中推送数据
hotObservable.next('hello');
hotObservable.next('world');

// 输出结果：
// 订阅者 1 收到: hello
// 订阅者 2 收到: hello
// 订阅者 1 收到: world
// 订阅者 2 收到: world

可以看到，hotObservable 使用 Subject 创建。当我们使用 hotObservable.next() 推送数据时，所有订阅者都会收到相同的数据。

冷流 vs 热流：一张表看懂区别

特性	冷流 (Cold Observable)	热流 (Hot Observable)
数据生产时机	订阅时	持续放送
数据共享	不共享，每个订阅者一份	共享，所有订阅者同一份
适用场景	独立的数据源，如 HTTP 请求	事件流、广播

如何创建热流？

除了使用 Subject，还可以使用以下方式创建热流：

BehaviorSubject: 初始值，订阅时立即收到一个值。
ReplaySubject: 缓存最近的数据，订阅时立即收到缓存的数据。
AsyncSubject: 只发出最后一个值，并在 complete 时发出。
share() 操作符：将冷流转换为热流。
publish(), multicast(), connect() 操作符：更灵活的热流控制。

代码示例：share() 操作符

// 创建一个冷流
const coldObservable = new Observable(subscriber => {
  console.log('开始生产数据...');
  subscriber.next(Math.random());
  subscriber.complete();
});

// 使用 share() 将冷流转换为热流
const hotObservable = coldObservable.pipe(share());

// 订阅者 1
hotObservable.subscribe(value => {
  console.log('订阅者 1 收到:', value);
});

// 订阅者 2
hotObservable.subscribe(value => {
  console.log('订阅者 2 收到:', value);
});

// 输出结果：
// 开始生产数据...
// 订阅者 1 收到: 0.123456789
// 订阅者 2 收到: 0.123456789

可以看到，使用 share() 之后，coldObservable 只会被执行一次，所有订阅者都收到了相同的随机数。

何时使用冷流？何时使用热流？

冷流： 适用于需要为每个订阅者提供独立数据源的场景，比如 HTTP 请求。每次订阅都应该发起一个新的请求。
热流： 适用于需要共享数据源的场景，比如事件流、广播。所有订阅者都应该收到相同的数据。

冷热流的应用场景举例：

冷流：
- HTTP 请求： 每次订阅都应该发起一个新的 HTTP 请求，获取最新的数据。
- 读取文件： 每次订阅都应该重新读取文件内容。
热流：
- 鼠标移动事件： 所有订阅者都应该收到相同的鼠标移动事件。
- WebSocket 连接： 所有订阅者都应该共享同一个 WebSocket 连接。
- 股票行情： 所有订阅者都应该收到相同的实时股票行情。

进阶：publish(), multicast(), connect()

publish(), multicast(), connect() 是一组更灵活的热流控制操作符，它们可以让我们更精确地控制热流的激活时机和数据共享方式。

简单来说：

publish()：将冷流转换为一个可连接的热流，需要手动调用 connect() 才能激活。
multicast()：允许我们自定义 Subject 来管理热流的数据共享，更加灵活。
connect()：手动激活热流，开始推送数据。

这些操作符比较高级，需要深入理解 RxJS 的原理才能灵活运用。

总结：

FRP 是一种用函数式的方式处理数据流的编程范式。
RxJS 是 JS 中常用的 FRP 库，提供了丰富的操作符来处理数据流。
冷流和热流是 RxJS 中重要的概念，理解它们的区别对于编写高效的 RxJS 代码至关重要。
冷流按需生产，独立消费；热流持续放送，共享消费。
根据不同的应用场景选择合适的冷热流类型。
share(), publish(), multicast(), connect() 等操作符可以帮助我们更灵活地控制热流。

尾声：

希望今天的讲座能帮助大家更好地理解 JS 中的 FRP 和 RxJS，特别是冷热流的概念。记住，理解了概念只是第一步，更重要的是在实践中运用它们，才能真正掌握 FRP 的精髓。

最后，祝大家写出更优雅、更强大的 JS 代码！下次再见！

发表回复 取消回复

发表回复取消回复