Angular中BehaviorSubject的意外更新与重复订阅：深度解析

一、RxJS订阅机制与重复日志的根源

在使用rxjs的可观察对象（observable）和主题（subject）时，理解订阅（subscription）的工作方式至关重要。当您订阅一个可观察对象时，您是在告诉它：“当有新值发出时，请执行我提供的回调函数。”一个订阅会一直存在，直到它被明确地取消订阅，或者可观察对象完成（complete）或发生错误（error）。

1. 基础订阅行为

以Subject为例，每次调用next()方法，所有当前活跃的订阅者都会收到通知并执行其回调函数。

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

export class ExampleComponent implements OnInit {
  exampleSubject = new Subject();

  ngOnInit(): void {
    // 第一次订阅
    this.exampleSubject.pipe(
      tap(value => console.log('订阅1:', value))
    ).subscribe();

    // 第二次订阅
    this.exampleSubject.pipe(
      tap(value => console.log('订阅2:', value))
    ).subscribe();
  }

  emitValue(): void {
    this.exampleSubject.next("Hello RxJS");
  }
}

当emitValue()被调用时，控制台会输出：

订阅1: Hello RxJS
订阅2: Hello RxJS

这表明，每次next()被调用，两个订阅都收到了值。

2. BehaviorSubject的特性

BehaviorSubject是一种特殊类型的主题，它会“记住”其最新的值。当新的订阅者订阅BehaviorSubject时，它会立即收到BehaviorSubject当前持有的最新值，然后才接收后续发出的值。

3. 为什么会出现重复日志？

在原始代码示例中，AppComponent的addTask()方法内部包含了对this.tasks（一个BehaviorSubject）的订阅逻辑：

public addTask() {
  this._tasksService.addTask({ /* ... */ });

  // 每次点击按钮都会新增一个订阅
  this.tasks.pipe(
    tap((value) => console.log(value))
  ).subscribe();
}

问题在于，每次点击“Add Task”按钮时，addTask()方法都会被调用，从而每次都创建一个新的订阅。由于BehaviorSubject的特性，每次新订阅都会立即收到当前的_tasks数组。因此，如果您点击按钮3次，就会有3个活跃的订阅。当_tasksService.addTask()内部调用_tasks$.next(this._tasks)时（或即使不调用，见下一节），所有这3个订阅都会被触发，导致控制台出现重复的日志输出。

解决方案： 订阅操作应该只执行一次，通常是在组件的ngOnInit生命周期钩子中。这样可以确保只有一个订阅者在监听值的变化。

// AppComponent.ts
export class AppComponent implements OnInit {
  public tasks!: Observable; // 推荐使用Observable而非BehaviorSubject类型

  constructor(private _tasksService: TasksService) {}

  ngOnInit(): void {
    console.log('OnInit');
    // 在这里订阅一次，而不是在addTask中
    this.tasks = this._tasksService.getTasks(); // getTasks返回BehaviorSubject，这里直接赋值即可
    // 如果需要日志，可以这样订阅一次
    this.tasks.pipe(
      tap(value => console.log('当前任务列表:', value))
    ).subscribe();
  }

  public addTask() {
    this._tasksService.addTask({
      id: crypto.randomUUID(),
      isImportant: true,
      text: 'Added task'
    });
    // 这里不再需要重复订阅
  }
}

二、BehaviorSubject在未调用next()时更新的秘密：引用与突变

这是另一个常见的困惑点，也是理解JavaScript/TypeScript中对象和数组工作方式的关键。

1. 引用类型与值类型

在JavaScript中，原始类型（如字符串、数字、布尔值）是按值传递的，而对象和数组是按引用传递的。这意味着当你将一个数组或对象赋值给另一个变量时，你实际上是传递了对同一个底层数据的引用，而不是创建了一个新的副本。

let arr1 = [1, 2, 3];
let arr2 = arr1; // arr2现在引用的是arr1所指向的同一个数组
arr2.push(4);
console.log(arr1); // 输出: [1, 2, 3, 4] - arr1也变了

2. BehaviorSubject持有引用

在TasksService中，_tasks$这个BehaviorSubject持有对_tasks数组的引用：

// TasksService.ts
private _tasks : ITask[] = [];
private _tasks$: BehaviorSubject = new BehaviorSubject([]);
// ...
// 在getTasks中
this._tasks = tasks; // _tasks获得了一个数组引用
this._tasks$.next(tasks); // _tasks$持有了_tasks的这个引用
// ...
public addTask(task: ITask) {
  this._tasks.push(task); // 直接修改了_tasks数组，_tasks$持有的引用所指向的数据也随之改变
  // this._tasks$.next(this._tasks); // 即使没有这一行
}

当您调用_tasks.push(task)时，您是在直接修改_tasks数组的内容。由于_tasks$内部存储的是对_tasks数组的引用，即使您没有显式调用_tasks$.next(this._tasks)，_tasks$所引用的数组内容也已经发生了变化。

3. Angular变更检测的介入

当_tasks数组被修改时（通过push操作），Angular的变更检测机制（通常由Zone.js打补丁的异步操作触发）可能会检测到数据发生了变化。对于使用async管道绑定的模板，Angular可能会重新评估绑定表达式，从而导致视图更新。尽管BehaviorSubject本身没有发出新的值，但它所持有的对象的内部状态发生了改变，这足以触发Angular的视图更新。

VisualizeAI

用AI把你的想法变成现实

下载

总结： 视图之所以更新，不是因为BehaviorSubject发出了新值，而是因为BehaviorSubject内部引用的数组被直接修改了，而Angular的变更检测机制捕获到了这个底层数据的变化。

三、最佳实践与注意事项

为了避免上述问题并确保RxJS和Angular应用的稳定性和可预测性，请遵循以下最佳实践：

1. 始终通过next()方法发出新值： BehaviorSubject的目的是通知订阅者其值的变化。即使您修改了内部引用的对象，也应该显式调用next()方法来发出这个（已修改的）引用，以确保订阅者被正确通知。

   // TasksService.ts
   public addTask(task: ITask) {
     this._tasks.push(task);
     // 显式发出更新后的数组引用
     this._tasks$.next(this._tasks);
   }

2. 拥抱不可变性（Immutability）： 对于数组和对象，在发出新值时，最好创建它们的新副本，而不是直接修改原始引用。这有助于避免意外的副作用，使数据流更清晰，并与Angular的变更检测机制更好地协同工作。

   // TasksService.ts
   public addTask(task: ITask) {
     // 创建一个新数组，包含原有任务和新任务
     this._tasks = [...this._tasks, task];
     // 发出新的数组引用
     this._tasks$.next(this._tasks);
   }

   这样做的好处是，_tasks$每次发出的都是一个全新的数组引用。如果Angular的变更检测器在某些情况下使用引用比较来优化，这种方式能确保变更被正确识别。

3. 严格管理订阅：

   • 在ngOnInit中订阅： 确保只在组件初始化时订阅一次可观察对象，以避免重复订阅。

   • 在ngOnDestroy中取消订阅： 对于手动订阅，务必在组件销毁时取消订阅，以防止内存泄漏。可以使用takeUntil操作符结合一个Subject来自动管理：

     import { Subject } from 'rxjs';
     import { takeUntil } from 'rxjs/operators';
     
     export class AppComponent implements OnInit, OnDestroy {
       private destroy$ = new Subject(); // 用于管理订阅的Subject
     
       ngOnInit(): void {
         this._tasksService.getTasks().pipe(
           takeUntil(this.destroy$), // 当destroy$发出值时，自动取消订阅
           tap(value => console.log('当前任务列表:', value))
         ).subscribe();
       }
     
       ngOnDestroy(): void {
         this.destroy$.next(); // 发出值，通知所有takeUntil的订阅取消
         this.destroy$.complete(); // 完成Subject
       }
     }

   • 利用async管道： 在Angular模板中，async管道会自动处理订阅和取消订阅，这是最推荐的方式。

     
         {{task.text}}
         {{task.id}}
     

通过理解RxJS的订阅机制和JavaScript的引用特性，并遵循上述最佳实践，您可以更有效地在Angular应用中管理状态，避免常见的陷阱，并构建出更健壮、可预测的应用程序。