{
"title": " RxJS —— 学习笔记",
"tags": [
"post",
"rxjs"
],
"sources": [
"xlog"
],
"external_urls": [
"https://tomorrow-bye.xlog.app/RxJS--xue-xi-bi-ji"
],
"date_published": "2023-04-20T09:30:34.448Z",
"content": "[RxJS](https://rxjs.dev/guide/overview) 是 Javascript 的响应式编程库。它使用可观察的序列来解决异步操作和事件处理。它提供一种核心类型，即 Observable、卫星类型（Observer、Schedulers、Subjects）和受 Array 方法 （map、filter、reduce、every 等）启发的运算符，以允许处理异步事件作为集合。\nReactiveX 将观察者模式与迭代器模式以及函数式编程与集合相结合，以满足对管理事件序列的理想方式的需求。\nRxJS 中解决异步事件管理的基本概念是:\n\n- **Observable:** 表示未来值或事件的可调用集合的想法。\n- **Observer:** 是回调的集合，知道如何监听 Observer 传递的值。\n- **Subscription:** 表示 Observable 的执行，主要用于取消执行。\n- **Operators:** 运算符，是纯函数，支持使用 map、filter、concat、reduce 等操作处理集合的函数式编程风格。\n- **Subject:** 相当于一个 EventEmitter，是将一个值或事件多播给多个 Observers 的唯一途径。\n- **Schedulers**: 调度程序，是控制并发的集中式调度程序，允许我们在计算发生时进行协调，例如 setTimeout 或 requestAnimationFrame 等。\n\n**举个例子**\n通常你注册事件监听器\n\n```typescript\ndocument.addEventListener('click', () => console.log('Clicked!'));\n\n```\n\n使用 RxJS，你可以创建一个可观察者对象\n\n```typescript\nimport { fromEvent } from 'rxjs';\n\nfromEvent(document, 'click').subscribe(() => console.log('Clicked!'));\n```\n\n## 纯函数\n\n使 RxJS 强大的是它的纯函数产生值的能力。这意味着你的代码不太容易出错。\n通常你会创建一个不纯的函数，你的代码的其他部分可能会弄乱你的状态。\n\n```typescript\nlet count = 0;\ndocument.addEventListener('click', () => console.log(`Clicked ${++counts} times`));\n```\n\n使用 RxJS 可以隔离状态。\n\n```typescript\nimport { fromEvent, scan } from 'rxjs';\n\nfromEvent(document, 'click')\n\t.pipe(scan((count) => count + 1, 0))\n\t.subscribe((count) => console.log(`Clicked ${++count} times`));\n```\n\n**scan** 运算符的工作方式与数组 **reduce** 类似。它接受一个暴露给回调的值。回调的返回值将成为下一次回调运行时的入参。\n\n## 流\n\nRxJS 拥有一整套操作符，可帮助你控制事件如何流经你的可观察对象。\n这是你允许每秒最多点击一次的方式，使用纯 javascript:\n\n```typescript\nlet count = 0;\nlet rate = 1000;\nlet lastClick = Date.now() - rate;\ndocument.addEventListener('click', () => {\n\tif (Date.now() - lastClick >= rate) {\n\t\tconsole.log(`Clicked ${++count} times`);\n\t\tlastClick = Date.now();\n\t}\n});\n```\n\n用 RxJS 实现：\n\n```typescript\nimport { fromEvent, throttleTime, scan } from 'rxjs';\n\nfromEvent(document, 'click')\n\t.pipe(\n\t\tthrottleTime(1000),\n\t\tscan((count) => count + 1, 0)\n\t)\n\t.subscribe((count) => console.log(`Clicked ${count} times`));\n```\n\n其他流控制运算符还有 **filter、delay、debounceTime、take、takeUntil、distinct、distinctUntilChanged** 等。\n\n## 值\n\n你可以转换通过可观察者对象的值。\n以下是如何在纯 javascript 中为每次点击添加当前鼠标 x 的位置:\n\n```typescript\nlet count = 0;\nconst rate = 1000;\nlet lastClick = Date.now() - rate;\ndocument.addEventListener('click', (event) => {\n\tif (Date.now() - lastClick >= rate) {\n\t\tcount += event.clientX;\n\t\tconsole.log(count);\n\t\tlastClick = Date.now();\n\t}\n})\n```\n\n用 RxJS 实现：\n\n```typescript\nimport { fromEvent, throttleTime, map, scan } from 'rxjs';\n\nfromEvent(document, 'click')\n\t.pipe(\n\t\tthrottleTime(1000),\n\t\tmap((event) => event.clientX),\n\t\tscan((count, clientX) => count + clientX, 0)\n\t)\n\t.subscribe((count) => console.log(count));\n```\n\n其他转换值的操作符还有 **pluck、pairwise、sample** 等。",
"attributes": [
{
"value": "RxJS--xue-xi-bi-ji",
"trait_type": "xlog_slug"
}
]
}
