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

Posted 2021-04-30 读一读我

我们知道 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：这个操作符接收一个事件流参数，丢弃原始的事件流，使用参数提供的事件流继续运行。

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