vlambda博客
学习文章列表

响应式编程实战——RxJS 手动停止事件流的正确方式

我们知道 Rx 是 push 模式。比如 1 秒产生一个事件的流,即使我们不去使用它,它也会产生事件。如何人为的停止这个流是今天我们要解决的问题。

先把场景搭建好,从页面中得到按钮的 click 事件流:

import React, { useRef, useEffect } from "react";

import { fromEvent } from "rxjs";

export default function App() {
const btnRef = useRef(null);

useEffect(() => {
const stopBtnClick$ = fromEvent(btnRef.current, "click");

const subscription = stopBtnClick$.subscribe(() => {
console.log("单击事件");
});
return () => {
subscription.unsubscribe();
};
});

return (
<div className="App">
<button ref={btnRef}>停止按钮</button>
</div>

);
}

然后我们使用 interval 操作符创建一个间隔为 1 秒发生的事件流:

const perSecond$ = interval(1000);

const subscription = perSecond$.subscribe((value) => {
console.log(value);
});

我们知道 subscribe 函数会返回一个 subscription 对象,这个对象上有个 unsubscribe 函数,调用这个函数将会停止事件流。这也是我们为什么要在 useEffect 的返回值中调用它,防止内存泄露。既然如此,停止 perSecond$ 就简单了:

const stopBtnClick$ = fromEvent(btnRef.current, "click");

const perSecond$ = interval(1000);

const perSecondSubscription = perSecond$.subscribe(value => {
console.log(value);
});

stopBtnClick$.subscribe(_ => {
perSecondSubscription.unsubscribe();
});

这样做确实可以解决我们的问题,然而这是完全错误的做法。

之前的文章说过,Rx 编程模型是组合编程理念的最佳实践。让我们来考虑一下如何组合 stopBtnClick\$ 和 perSecond\$ 来解决我们的问题:

takeUntil:这个操作符接收另一个流作为参数, 等于它监控了两个流。它做的事就是从原始的流接收事件,但不是一直接收,当参数流中开始产生事件时,它就停止接收原始流的事件了,也就是把原始流停掉了。

有了这个操作符,就可以组合使用之前的两个流了:

const stopBtnClick$ = fromEvent(btnRef.current, "click");

const perSecond$ = interval(1000);

const intervalCanBeStopped$ = perSecond$.pipe(takeUntil(stopBtnClick$));

const subscription = intervalCanBeStopped$.subscribe(v => console.log(v));

我们再给时间间隔流加一个开始按钮,完整代码如下:

import React, { useRef, useEffect } from "react";

import { fromEvent, interval } from "rxjs";
import { takeUntil, switchMapTo } from "rxjs/operators";

export default function App() {
const stopBtnRef = useRef(null);
const startBtnRef = useRef(null);

useEffect(() => {
const stopBtnClick$ = fromEvent(stopBtnRef.current, "click");
const startBtnClick$ = fromEvent(startBtnRef.current, "click");
const perSecond$ = interval(1000);

const intervalCanBeStopped$ = perSecond$
.pipe(takeUntil(stopBtnClick$));

const subscription = startBtnClick$.pipe(
switchMapTo(intervalCanBeStopped$)
).subscribe(v => console.log(v));

return () => {
subscription.unsubscribe();
};
});

return (
<div className="App">
<button ref={startBtnRef}>开始按钮</button>
<button ref={stopBtnRef}>停止按钮</button>
</div>

);
}

switchMapTo:这个操作符接收一个事件流参数,丢弃原始的事件流,使用参数提供的事件流继续运行。

我们没有对之前的程序逻辑做任何修改,只是添加了一个开始按钮的事件流,再和之前的事件流组合起来完成了开始输出,定时输出,停止输出的功能。有没有点儿搭积木的意思?