RxJS 让代码更纯粹, 让状态更易控制

下面是一个计数器的常规写法, 可以看到, count 在函数体之外, 这个 count 就是一个状态, 它受到 click 监听函数的控制, 相当于是分开的两部分, 这种看起来没啥大毛病, 但并不优雅.
如果状态变多了, 或者它们受多个来源控制, 那状态就有可能乱掉, 容易引发混乱.

let count = 0;
document.addEventListener("click", () => {
  document.body.innerText = String(count++);
});

下面是 RxJS 版的, 可以看到, 它干掉了"自由变量" count, 让 count 成为其数据流中的一个中间环节自行产生. scan 方法的作用不明, 从实际行为来看, 应该是类似定义了一个中间状态, 这个状态随着事件的触发, 保留了上一次的值.
这个就可以延伸出来了, 比如: 请求一个接口, 用 scan 给他做一些返回值的处理\赋值等等. scan 是扫描的意思, 也能辅助理解.

import { fromEvent, scan } from "rxjs";

fromEvent(document, "click")
  .pipe(scan((count) => count + 1, 0))
  .subscribe((count) => {
    document.body.innerText = String(count);
  });