如何在 RxJS 中防止内存泄漏？

核心答案

RxJS 内存泄漏的根因是订阅了 Observable 却未取消订阅，导致回调闭包持有外部引用，阻止垃圾回收。防止泄漏的关键就一条：确保每个订阅都有取消的时机。

最推荐的方式是 takeUntil 模式：

typescript
private destroy$ = new Subject<void>();

ngOnInit() {
  this.http.get('/api/data').pipe(
    takeUntil(this.destroy$)
  ).subscribe(data => this.data = data);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

组件销毁时 destroy$ 发出通知，所有通过 takeUntil 管道的订阅自动完成，闭包释放，GC 可回收相关内存。

哪些 Observable 必须取消订阅

判断标准：不会自动 complete 的流必须手动取消。

• interval、timer —— 持续发射，永不完成
• fromEvent —— 事件监听，永不完成
• Subject / BehaviorSubject —— 需手动调 complete()
• Angular 的 params、valueChanges —— 持续流

HTTP 请求 httpClient.get() 发射一次后自动 complete，理论上不必取消，但用 takeUntil 也不亏——能顺便中断请求。

三种取消策略对比

1. takeUntil —— 最推荐，声明式，一个 destroy$ 管所有订阅

2. Subscription 聚合 —— new Subscription() + .add()，批量 unsubscribe()，适合非组件场景

3. take(1) / first() —— 只需首个值时用，取完自动 complete，注意如果流不发射也不会自动取消

容易踩的坑

嵌套订阅：外层订阅的回调里再 subscribe，内层订阅完全失控。用 switchMap 替代——它自动取消前一次内部订阅：

typescript
// 嵌套订阅，内层泄漏
this.http.get('/user').subscribe(user => {
  this.http.get(`/posts/${user.id}`).subscribe(...);
});

// switchMap 自动管理
this.http.get('/user').pipe(
  switchMap(user => this.http.get(`/posts/${user.id}`))
).subscribe(posts => ...);

闭包引用大对象：订阅回调捕获外部变量，即使该变量不再使用，只要订阅存活就无法回收。取消订阅即释放闭包引用。

服务中的订阅：Service 生命周期等于应用生命周期，在里面 .subscribe() 几乎不可能取消。正确做法是返回 Observable，让调用方决定何时订阅和取消。

追问方向

• takeUntil 和 unsubscribe() 有什么区别？——前者在管道中完成流，后者是外部强制中断；takeUntil 更符合声明式风格
• switchMap、concatMap、mergeMap 哪个能防止内存泄漏？——switchMap 自动取消前一次，其余不会；多对多场景需配合 takeUntil
• 如何检测 RxJS 内存泄漏？——Chrome DevTools Memory 面板拍快照，对比组件销毁前后 retained size；或在 ngOnDestroy 打日志确认是否执行