首页 > 其他分享 >30 天精通 RxJS (30):Cold & Hot Observable

30 天精通 RxJS (30):Cold & Hot Observable

时间:2024-04-22 22:46:01浏览次数:25  
标签:Observable 订阅 sub1 30 source Hot Cold

RxJS Logo

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

相关文章

  • 30 天精通 RxJS (29):30 天感言
    30天悄悄的就过了,这30篇的文章基本上已经把RxJS一个核心三个重点(Observable+Observer+Subject+Scheduler)以及各个operators几乎也都有写到。最开始写这个系列的文章是希望能让RxJS的学习曲线降低,所以文章的前后顺序及内容都是特别规划过的,不知道我到底是不是......
  • 30 天精通 RxJS (28):Scheduler 基本观念
    不晓得读者们还记不记得,我们在前面的文章中有提到Scheduler是为了解决RxJS衍生的最后一个问题,而我们现在就在揭晓这个谜底。其实RxJS用久了之后就会发现Observable有一个优势是可以同时处理同步和非同步行为,但这个优势也带来了一个问题,就是我们常常会搞不清处现在的......
  • MIT 6.5830 simpleDB Lab2
    Exercise1需要完成的是:src/java/simpledb/execution/Predicate.javasrc/java/simpledb/execution/JoinPredicate.javasrc/java/simpledb/execution/Filter.javasrc/java/simpledb/execution/Join.java这里主要实现两个功能:Filter:通过Predicate过滤一部分满足条件的Tupl......
  • 云原生周刊:Kubernetes v1.30 发布 | 2024.4.22
    开源项目推荐pv-migratepv-migrate是一个CLI工具/kubectl插件,可轻松将一个Kubernetes的内容迁移PersistentVolumeClaim到另一个Kubernetes。ClaudieClaudie是一个云原生的Kubernetes管理平台,具备跨多个云提供商和本地数据中心的多云和混合云集群管理能力。它通过......
  • 30 天精通 RxJS (27):简易实作 Observable(二)
    前一篇文章我们已经完成了基本的observable以及Observer的简易实现,这篇文章我们会接续上一篇的内容实现简易的Observable类别,以及一个creationoperator和一个transformoperator。建立简易Observable类别这是我们上一篇文章写的建立observable实例的函数func......
  • 3月30日成功举办——基于实在智能RPA的微信私域自动化运营公开课
    3月30日,RPA学习天地成功举办了,基于微信私域运营的RPA自动化直播公开课,成功地帮助学员们普及了社交化工具私域运营的自动化技巧。 本次公开课,主要介绍了如何使用实在智能RPA工具来自动化实现微信的好友添加,建群,群发信息等私域互动信息,受到了观众的好评。以下为公开课部分精彩......
  • 联想ThinkPad E430c 硬件升级指南:内存条与固态硬盘升级
    ThinkPadE430(3254B28)属于5-6年前的老古董了,装了win10,很吃力。平常也就办公用,看看资料(公司有macbookpro用)。再买一个,用得上的,也要3千多。由于穷,决定还是升级E430c系列配置参数基本参数 主板芯片组IntelHM77处理器 CPU系列英特尔酷睿i32代系列CPU型号......
  • 30 天精通 RxJS (26):简易实作 Observable(一)
    因为实在太多读者在问要如何实作Observable,所以特别调整了本系列文章最后几篇的内容,空出一天的位置来写如何简易实作Observable。为什么是简易实作而不完整实作呢?当然这个系列的文章是希望读者能学会如何使用RxJS,而实作Observable其实只是帮助我们理解Observable的......
  • 定制聚四氟乙烯反应釜30L
    特点:1、聚四氟乙烯材质耐酸碱耐腐蚀和各种有机溶剂2、使用温度:-200℃~+250℃3、内壁光滑无毛刺,不粘附4、各种样式规格均可定制,50L烧瓶也可以定制......
  • [BZOJ3037] 创世纪 题解
    基环内向树上dp,不过在这里提供给一种非典型做法。考虑将环上的每一条边都断开,这样就会形成多棵树,先在这些树上进行树形\(dp\)。设\(dp_{i,0/1}\)表示不选/选\(i\)时,\(i\)子树内的最大选点数。明显方程为:\[\begin{cases}dp_{u,0}=\sum\limits_{v\inuson}\max(dp_{v,0},dp......