Angular Subject和BehaviorSubject之间的区别

Subject和BehaviorSubject是RxJS中两种常用的Subject类型。

概念:

  1. Subject:

    • Subject是一种特殊的Observable,同时也是Observer。它可以被用来订阅Observable,也可以手动向它推送新的值。
    • Subject是一种热Observable,它会在订阅时开始推送值,而不管它们何时被推送。
    • Subject不会缓存最新的值,新的订阅者只能接收到订阅后推送的值,而无法获取之前推送的值。
    • Subject适用于需要将事件转换为Observable的场景,或者在多个订阅者之间共享相同的Observable。
  2. BehaviorSubject:

    • BehaviorSubject是一种特殊的Subject,它会缓存最新的值,并在有新的订阅者订阅时立即发送这个最新值给订阅者。
    • BehaviorSubject需要一个初始值作为参数,在没有收到任何值时会发送这个初始值给订阅者。
    • BehaviorSubject适用于需要保存当前状态并让新订阅者立即获取到最新状态的场景。
    • BehaviorSubject常用于管理应用程序的状态,例如全局的用户身份验证状态、主题颜色等。

区别:

  1. 初始值:

    • Subject在创建时不需要指定初始值,而且第一个订阅者只会收到Subject之后调用next()方法推送的值。
    • BehaviorSubject在创建时需要指定一个初始值,这个初始值会立即发送给所有订阅者,无需等待调用next()方法。
  2. 订阅时机:

    • 对于Subject,如果订阅发生在next()方法之后,订阅者将不会收到之前已经通过next()方法推送的值。
    • 对于BehaviorSubject,无论订阅发生在何时,订阅者都会立即收到最新的值,包括初始值和之后通过next()方法推送的值。
  3. 缓存最新值:

    • Subject不会缓存最新的值,每次调用next()方法都会向所有订阅者发送新值。
    • BehaviorSubject会保存最新推送的值,无论是通过next()方法推送的值还是初始值,并在有新订阅者订阅时立即发送这个最新值给订阅者。
    • 当有新的订阅者订阅BehaviorSubject时,它会立即收到缓存的最新值,即使之前已经有值被推送过,而不是等待下一次值的推送。

示例:

两者明显的区别在于Subject不会缓存最新的值,而BehaviorSubject会缓存最新的值,并在有新的订阅者订阅时立即发送这个最新值给订阅者。下面是有关详细说明这两者之间的区别的代码示例:

  • 首先,我们创建一个Subject和一个BehaviorSubject,并分别订阅它们:
javascript 复制代码
import { Subject, BehaviorSubject } from 'rxjs';

// 创建一个 Subject
const subject = new Subject<number>();

// 创建一个 BehaviorSubject,初始值为0
const behaviorSubject = new BehaviorSubject<number>(0);

// 订阅 Subject
subject.subscribe(value => console.log('Subject Subscription:', value));

// 订阅 BehaviorSubject
behaviorSubject.subscribe(value => console.log('BehaviorSubject Subscription:', value));
  • 接下来,我们分别向Subject和BehaviorSubject推送值,并再次订阅它们:
javascript 复制代码
// 向 Subject 推送值
subject.next(1);

// 向 BehaviorSubject 推送值
behaviorSubject.next(1);

// 再次订阅 Subject
subject.subscribe(value => console.log('Subject Subscription 2:', value));

// 再次订阅 BehaviorSubject
behaviorSubject.subscribe(value => console.log('BehaviorSubject Subscription 2:', value));
  • 运行以上代码后,我们可以看到以下输出:
javascript 复制代码
Subject Subscription: 1
BehaviorSubject Subscription: 0
BehaviorSubject Subscription: 1
Subject Subscription 2: 1
BehaviorSubject Subscription 2: 1

示例总结:

上面的示例很好的说明了它们最明显的区别:**会不会缓存最新的值。**什么叫会缓存最新的值呢?

简单来说就是:

缓存最新值就是保存了最新值的意思,也就是说BehaviorSubject 从它订阅开始就一定会收到值,要不就是初始值,要不就是最新一次的next()方法的传递的值。换句话说,BehaviorSubject从订阅开始就会向订阅者发送值,确保订阅者能够获取到初始值或者最新值。但是Subject对象是收到从它订阅开始之后next()传递的最新值,订阅时不会收到任何值!

误区:

对于BehaviorSubject对象,每次调用next()方法,Observer只会收到一个新的值,不会重复收到之前的值,也就是不会累积之前的值,因为它缓存的是最新的值,并不是缓存所有值!

举例说明:

javascript 复制代码
import { BehaviorSubject } from 'rxjs';

const behaviorSubject = new BehaviorSubject<number>(0);

// Observer在BehaviorSubject初始化时订阅
behaviorSubject.subscribe(value => console.log('Observer 1:', value));

// 调用next()方法传递新值
behaviorSubject.next(1);

// Observer再次订阅
behaviorSubject.subscribe(value => console.log('Observer 2:', value));

// 再次调用next()方法传递新值
behaviorSubject.next(2);



//运行以上代码后,我们可以看到以下输出:
Observer 1: 0
Observer 1: 1
Observer 2: 1
Observer 1: 2
Observer 2: 2
相关推荐
code_Bo23 分钟前
不只命令行:我把跨 Agent 会话同步做成了桌面应用
前端·javascript·后端
kyriewen37 分钟前
AI 能把页面写出来,为什么改个需求就开始崩?
前端·javascript·人工智能
OpsEye41 分钟前
同一套用例跑两个大模型接口,差异到底出在哪
javascript·ai编程
X1A0RAN1 小时前
PPT 图片批量处理教程:导出全部幻灯片 · 提取全部素材
开发语言·javascript·powerpoint
涛涛ing2 小时前
2026年最值得关注的前端变化,藏在“默认值”里
前端
量化分析码农2 小时前
股票历史数据的复权参数对照:多级别返回的字段与数值差异
java·javascript·后端
亿元程序员4 小时前
太牛了!这AI做出来的游戏,居然还能变现!
前端
hellice4 小时前
闪传 FlashDrop 实战:我用 300 行 Node 代码做了个「4 位取件码」临时文件中转站
前端·产品
用户0829773260054 小时前
RTX 5500 MIG 踩坑记录:切分之后模型跑不起来,排错整整一下午
前端
Lank_M4 小时前
AI 放大后的图更清楚,但它不能当原图入库
前端