使用RxJS first()操作符的Angular组件是否存在内存泄漏风险？

核心问题解答 #

如果valueInStore$始终未发出符合filter条件的值（比如一直是undefined），你当前的订阅会一直保留，导致内存泄漏。因为first()操作符只有在收到第一个符合条件的next通知后，才会自动完成订阅并取消监听；如果流始终没有满足条件的值，订阅会一直处于活跃状态，组件销毁后依然持有引用，进而引发内存泄漏。

最佳实践方案 #

1. 给first()设置默认值 #

通过first(null, defaultValue)的形式，当流始终没有符合条件的值时，直接发出默认值并完成订阅：

lockSelectToText: boolean = false;

this.valueInStore$.pipe(
  filter((value: string | undefined) => !!value),
  first(null, null), // 无符合条件值时发出null并完成
  tap(value => {
    this.lockSelectToText = value === 'foo';
  })
).subscribe();

2. 结合takeUntil处理组件销毁 #

这是Angular中管理订阅的通用方案，不管first()是否触发，组件销毁时都会强制取消订阅：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

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

lockSelectToText: boolean = false;

ngOnInit() {
  this.valueInStore$.pipe(
    filter((value: string | undefined) => !!value),
    first(),
    tap(value => {
      this.lockSelectToText = value === 'foo';
    }),
    takeUntil(this.destroy$)
  ).subscribe();
}

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

3. 使用Async管道（推荐） #

将状态转换为Observable，直接在模板中使用async管道，Angular会自动处理订阅的创建与销毁，完全避免手动订阅的风险：

import { startWith } from 'rxjs/operators';

lockSelectToText$ = this.valueInStore$.pipe(
  filter((value: string | undefined) => !!value),
  first(),
  map(value => value === 'foo'),
  startWith(false) // 设置初始默认值
);

模板中使用：

<!-- 根据lockSelectToText$的值切换显示文本框或选择器 -->
<div *ngIf="lockSelectToText$ | async">
  <input type="text" />
</div>
<div *ngIf="!(lockSelectToText$ | async)">
  <select>
    <!-- 选择器选项 -->
  </select>
</div>

内容的提问来源于stack exchange，提问作者Heribert Greinix