RxJS 原理及入门demo
前置知识
- iterable pattern 可遍历模式的API设计，比如observer.next()
- observer pattern 观察者模式的API设计，比如subscribe
- functional programming比如内部数据处理的copy API
概念
流
数据从创建符创建，通过pipe管道流动，经过操作符，最后通过subscribe输出结果
创建符
从 rxjs 直接引入的函数import { interval } from "rxjs";
操作符
从 rxjs/operators 引入的函数import { tap, take } from "rxjs/operators";
难点
目前中文的rxjs资料较少，且官方中文文档为过时的v5，目前主流为v6，两者api相差较大。
目前rxjs已到v7，相对v6改动不大。
学习方式
在实现一个需求时
- 有 点击、拖拽、滚动 等输入事件
- 需要同步多个异步事件且有顺序要求
- 需要在异步时有时间上的要求
- websocket 的需求
如果出现以上需求，可以尝试使用 rxjs 解决
关于源码
源码部分函数传参比较绕，多打断点调试试试，看看代码是如何运行的
工具网站
官网
弹珠图
API 动图解释
官方文档
https://github.com/RxJS-CN/rxjs-articles-translation/tree/master/articles https://cn.rx.js.org/manual/overview.html
问题
- 为什么是观察者而不是发布订阅？
- 发布订阅需要中间人
- 为什么要将流设计为 创建好后需要 subscribe?
- 避免类似promise的问题，promise在创建好后会立即执行，所以需要函数包裹一层，而rxjs这种设计则不再需要包裹
- unsubscribe 应该取消哪一个流?
- 因为流是创建符创建出的，所以取消的是创建符创建的流