Hot Observable 跟 Cold Observable 的差别,其实就是 资料源(Data Source) 在 Observable 内部建立还是外部建立。
在 RxJS 中很常会看到 Cold Observable 跟 Hot Observable 这两个名词,其实他们是在区分不同行为的 Observable,所谓的 Cold Observable 就是指每次订阅都是独立的执行,而 Hot Observable 则是共享的订阅。
Cold Observable
Cold Observable 代表 Observable 的每个订阅都是独立的,他们不会互相影响,如下
const source = Rx.Observable.interval(1000).take(5)
source.subscribe((value) => console.log('sub1: ' + value))
setTimeout(() => {
source.subscribe((value) => console.log('sub2: ' + value))
}, 3500)
// sub1: 0
// sub1: 1
// sub1: 2
// sub1: 3
// sub2: 0
// sub1: 4
// sub2: 1
// sub2: 2
// sub2: 3
// sub2: 4
从上面的代码可以看出来每次订阅source
都是独立运行的,这种每次订阅都是独立执行的 Observable 就称为 Cold Observable。
如果从 Observable 内部来看,代表 资料源(Data Source) 是在 Observable 内部建立的的,大概会长像下面
const source = Rx.Observable.create(function (observer) {
// 订阅时,才建立新的资料源
const someDataSource = getSomeDataSource()
someDataSource.addEventListener('message', (data) => {
observer.next(data)
})
})
因为每次订阅都建立一个新的数据源,就会使数据从头开始传送。
Hot Observable
Hot Observable 代表 Observable 的每个订阅是共享的,所谓的共享订阅就是指 一个 Observable 在多次订阅时,不会每次都从新开始发送元素,例如
var source = Rx.Observable
.interval(1000)
.take(5)
.share() // 共用
source.subscribe((value) => console.log('sub1: ' + value))
setTimeout(() => {
source.subscribe((value) => console.log('sub2: ' + value))
}, 3500)
// sub1: 0
// sub1: 1
// sub1: 2
// sub1: 3
// sub2: 3
// sub1: 4
// sub2: 4
从上面的代码可以看出,当我们对source第二次做订阅时,接收到的元素是接续第一个订阅往下发送的,而不是从新(0)开始,这种共享订阅的 Observable 就称为 Hot Observable。
如果从 Observable 内部来看,就是数据源是在 Observable 外部建立的,代码大概就会像下面这样
// 只有一个数据源,每次订阅都是用同一个
const someDataSource = getSomeDataSource()
const source = Rx.Observable.create(function (observer) {
someDataSource.addEventListener('message', (data) => {
observer.next(data)
})
})
Cold 与 Hot
一般的情况下 Observable 都是 Cold 的,这样不同的订阅才不会有 Side Effect 互相影响。 但在需要多次订阅的情境下,我们就很有可能需要 Hot Observable,而让 RxJS 提供了很多让 Cold Observable 变成 Hot Observable 的方法,这个部分可以参考以下文章:
- 30 天精通 RxJS(22): Subject 基本观念
- 30 天精通 RxJS(24): Observable operators - multicast, refCount, publish, share
小结
Hot Observable 跟 Cold Observable 的差异就是多次订阅时,是否共享订阅或是独立执行。 而这一切的差异就是来自于资料源 是在 Observable 内部建立还是外部建立。
本系列仅作为学习记录所用,摘录自30 天精通 Rxjs!强烈推荐!膜拜大佬!
标签:Observable,订阅,sub1,30,source,Hot,Cold From: https://www.cnblogs.com/xiaojiuwow/p/18151742