Subject、BehaviorSubject、ReplaySubject、AsyncSubject、VoidSubject比较

RxJS 中各种 Subject 类型的比较

RxJS 提供了多种 Subject 变体,每种都有不同的特性。以下是主要的 Subject 类型及其比较:

1. Subject

基本特性

  • 纯粹的发布/订阅模式
  • 不存储任何值
  • 新订阅者只能收到订阅后发出的值

javascript

javascript 复制代码
const subject = new Subject();
subject.subscribe(v => console.log(`A: ${v}`)); // 不会立即收到值

subject.next(1); // A: 1
subject.next(2); // A: 2

subject.subscribe(v => console.log(`B: ${v}`)); // 不会收到之前的值
subject.next(3); // A: 3, B: 3

2. BehaviorSubject

基本特性

  • 存储"当前"值
  • 新订阅者立即收到最后一个值
  • 必须提供初始值

javascript

css 复制代码
const behaviorSubject = new BehaviorSubject(0);
behaviorSubject.subscribe(v => console.log(`A: ${v}`)); // A: 0

behaviorSubject.next(1); // A: 1
behaviorSubject.next(2); // A: 2

behaviorSubject.subscribe(v => console.log(`B: ${v}`)); // B: 2
behaviorSubject.next(3); // A: 3, B: 3

3. ReplaySubject

基本特性

  • 可以缓存指定数量的值
  • 新订阅者会收到缓存的所有值
  • 可以设置缓存窗口时间

javascript

ini 复制代码
const replaySubject = new ReplaySubject(2); // 缓存最后2个值
replaySubject.next(1);
replaySubject.next(2);
replaySubject.next(3);

replaySubject.subscribe(v => console.log(`A: ${v}`)); 
// 输出: A: 2, A: 3 (收到最后2个值)

4. AsyncSubject

基本特性

  • 只在 complete 时发送最后一个值
  • 如果没有值则什么都不发送
  • 新订阅者在 complete 后也会收到最后一个值

javascript

ini 复制代码
const asyncSubject = new AsyncSubject();
asyncSubject.subscribe(v => console.log(`A: ${v}`));

asyncSubject.next(1);
asyncSubject.next(2);
asyncSubject.next(3);

asyncSubject.complete(); // A: 3

5. VoidSubject

基本特性

  • 专门用于不携带数据的事件通知
  • 只关心事件发生,不关心值

javascript

javascript 复制代码
const voidSubject = new Subject<void>();
voidSubject.subscribe(() => console.log('事件发生了'));
voidSubject.next();

比较表格

特性 Subject BehaviorSubject ReplaySubject AsyncSubject VoidSubject
需要初始值
存储值 最后一个 可配置数量 最后一个
新订阅者接收的值 最后一个 缓存的所有 完成时的最后
完成前发送值
典型用途 事件总线 状态管理 历史记录 最终结果 无值事件

使用建议

  1. 需要初始状态 → BehaviorSubject
  2. 只需要最新事件 → Subject
  3. 需要历史记录 → ReplaySubject
  4. 只关心最终结果 → AsyncSubject
  5. 无值通知 → VoidSubject

选择哪种 Subject 取决于你的具体需求,特别是关于值存储和新订阅者行为的要求。

相关推荐
To_OC5 小时前
踩了个 TS 的坑之后,我终于把 type 和 interface 掰明白了
前端·react.js·typescript
GreenTea6 小时前
深度解读 Anthropic 多智能体报告:更强的模型 ≠ 更好的协调
前端·后端·算法
浮生望6 小时前
前端API工程化:用 Mock 数据与 Axios 配置实现独立于后端的并行开发
前端
万少6 小时前
给 DeepSeek Harness 装个"应用商店":一条命令,595 个插件随你逛
前端·javascript·后端
波波0077 小时前
C# 15 重磅新特性: 带标签 break 与 continue:重新定义嵌套循环控制流
服务器·前端·c#
Brown.alexis7 小时前
es6知识点1-自备使用
前端·ecmascript·es6
小爬的老粉丝8 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps
计算机魔术师9 小时前
新兴多智能体系统的模式与问题
前端
用户059540174469 小时前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
满栀58510 小时前
状态管理:Redux、Vuex、Pinia 核心区别
前端·javascript·typescript