简介

RxJS（Reactive Extensions for JavaScript）是一个将响应式编程概念引入 JavaScript 的库。它提供了一套强大的工具，用于处理异步数据流和事件。RxJS 的核心思想是Observable，它是一个强大的数据类型，表示随着时间推移的一系列值或事件 ，Observable 的核心关注点：- 创建- 订阅- 执行- 清理

基本概念

1. Observable：表示一个可调用的未来值或事件的集合。
2. Observer：是一组回调，知道如何监听 Observable 传递的值。
3. Subscription：表示 Observable 的执行，主要用于取消执行。
4. Operators：是纯函数，允许使用类似于数组方法（如 map、filter、concat、reduce 等）以函数式编程的方式处理集合。
5. Subject：等效于 EventEmitter，是将值或事件广播给多个 Observers 的唯一方式。
6. Schedulers：是集中的调度程序，用于控制并发，允许我们协调计算的发生时间，例如 setTimeout 或 requestAnimationFrame 等。

用法示例：

1. 注册事件监听器（普通 JavaScript）：

   document.addEventListener("click", () => console.log("Clicked!"));

   使用 RxJS 创建 Observable：

   import { fromEvent } from "rxjs";
   
   fromEvent(document, "click").subscribe(() => console.log("Clicked!"));

2. 纯函数处理状态：

   // 普通 JavaScript
   let count = 0;
   document.addEventListener("click", () =>
     console.log(`Clicked ${++count} times`)
   );
   
   // 使用 RxJS 隔离状态
   import { fromEvent, scan } from "rxjs";
   
   fromEvent(document, "click")
     .pipe(scan((count) => count + 1, 0))
     .subscribe((count) => console.log(`Clicked ${count} times`));

3. 控制事件流：

   // 普通 JavaScript
   let count = 0;
   let rate = 1000;
   let lastClick = Date.now() - rate;
   
   document.addEventListener("click", () => {
     if (Date.now() - lastClick >= rate) {
       console.log(`Clicked ${++count} times`);
       lastClick = Date.now();
     }
   });
   
   // 使用 RxJS
   import { fromEvent, throttleTime, scan } from "rxjs";
   
   fromEvent(document, "click")
     .pipe(
       throttleTime(1000),
       scan((count) => count + 1, 0)
     )
     .subscribe((count) => console.log(`Clicked ${count} times`));