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 应该取消哪一个流?
- 因为流是创建符创建出的,所以取消的是创建符创建的流