[RxJS] Share vs ShareReply
https://www.learnrxjs.io/learn-rxjs/operators/multicasting/sharereplay
https://www.learnrxjs.io/learn-rxjs/operators/multicasting/share
Share and ShareReplay, they are mainly the same. Just for ShareReplay, the subscriber subscribe after event emitted can also get value, similar to ReplaySubject.
// simulate url change with subject const routeEnd = new Subject(); // grab url and share with subscribers const lastUrl = routeEnd.pipe( pluck('url'), share() ); // initial subscriber required const initialSubscriber = lastUrl.subscribe(console.log); // nothing // simulate route change routeEnd.next({data: {}, url: 'my-path'}); // nothing logged const lateSubscriber = lastUrl.subscribe(console.log); // my-path
In the code, only lateSubscribe got the value. initialSubscribe didn't get the value.
import { Subject } from 'rxjs/Subject'; import { ReplaySubject } from 'rxjs/ReplaySubject'; import { pluck, share, shareReplay, tap } from 'rxjs/operators'; // simulate url change with subject const routeEnd = new Subject<>(); // grab url and share with subscribers const lastUrl = routeEnd.pipe( tap(_ => console.log('executed')), pluck('url'), // defaults to all values so we set it to just keep and replay last one shareReplay(1) ); // requires initial subscription const initialSubscriber = lastUrl.subscribe(console.log); // simulate route change // logged: 'executed', 'my-path' routeEnd.next({data: {}, url: 'my-path'}); // logged: 'my-path' const lateSubscriber = lastUrl.subscribe(console.log);
Both got the value.
Side effect only execute once
import { timer } from "rxjs"; import { tap, mapTo, shareReplay, share } from "rxjs/operators"; //emit value in 1s const source = timer(1000); //log side effect, emit result const example = source.pipe( tap(() => console.log("***SIDE EFFECT***")), mapTo("***RESULT***"), ); /* ***NOT SHARED, SIDE EFFECT WILL BE EXECUTED TWICE*** output: "***SIDE EFFECT***" "***RESULT***" "***SIDE EFFECT***" "***RESULT***" */ const subscribe = example.subscribe((val) => console.log(val)); const subscribeTwo = example.subscribe((val) => console.log(val));
If we use share or shareReplay(1)
//share observable among subscribers const sharedExample = example.pipe(share()); /* ***SHARED, SIDE EFFECT EXECUTED ONCE*** output: "***SIDE EFFECT***" "***RESULT***" "***RESULT***" */ const subscribeThree = sharedExample.subscribe((val) => console.log(val)); const subscribeFour = sharedExample.subscribe((val) => console.log(val));
Side effect only execute once
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2020-09-16 [Machine Learning] Neural Networks Week 5 Ex
2020-09-16 [Machine Learning] Neural Networks - back propagation - Put it together
2019-09-16 [CSS] Change the Alignment of a Single Flexed Item with 'align-self'
2019-09-16 [CSS] Change the off-axis Alignment of a Flexed Container with `align-items`
2019-09-16 [CSS] The :empty Pseudo Selector Gotchas
2018-09-16 [Tools] Create a Chrome Extension
2016-09-16 [Angular 2] Factory Provider