理解Angular中BehaviourSubject的行为与RxJS订阅的陷阱 angular currency

论文探讨了Angular应用中RxJS BehaviourSubject的常见行为误解，特别是当不调用next()方法时视图为何依然更新，以及静态订阅导致的重复文章问题。通过解析RxJS订阅机制和JavaScript引用类型的工作原理，提供了清晰的解释和最佳实践，旨在帮助开发者避免回避的陷阱，构建更健壮的响应式应用。1. RxJS订阅机制与重复日志问题

在使用RxJS时，理解其订阅（订阅）的工作方式至关重要。一个常见的误区是，每次调用next()方法时都需要重新订阅。然而，RxJS的可观察对象（Observable）和主题（Subject）在订阅后会持续监听值的发送，直到被取消订阅。

考虑以下简单的Subject示例：import { subject } from 'rxjs'；import { tap } from 'rxjs/operators'；export class MyComponent Implements OnInit { exampleSubject = new subjectlt；stringgt；()； ngOnInit()： void { // 第一次订阅：在组件初始化时订阅一次 this.exampleSubject.pipe( tap(value =gt； console.log('订阅 1：'， value)) ).subscribe()； } emmitValue(value： string) { this.exampleSubject.next(value)； }}登录后复制

在这个例子中，console.log只能因为emitValue()方法中调用this.exampleSubject.next("text")而触发一次。订阅是在ngOnInit中建立的，它会一直存在，每次next()被调用时都会执行其回调。

重复订阅的后果：

如果在一个事件处理器（例如按钮点击）中创建重复订阅，而不是仅在初始化时订阅一次，就会导致每次事件触发时都增加一个新的监听器。

import {BehaviorSubject， Observable，Subject } from 'rxjs'；import { tap } from 'rxjs/operators'；import { HttpClient } from '@angular/common/http'；import { Injectable， OnInit } from '@angular/core'；// 想象的ITask接口接口 ITask { id： string； isImportant： boolean； text： string；}//原始问题中的AppComponent片段，重复了重复订阅export class AppComponentimplementsOnInit{publictasks!：BehaviorSubjectlt；ITask[]gt；；constructor(private_tasksService：TasksService){}ngOnInit()：void{console.log('OnInit')；this.tasks=this._tasksService.getTasks()；}publicaddTask(){this._tasksService.addTask({ id： crypto.randomUUID()， isImportant： true， text： '已添加任务' })； // 错误示范：每次点击按钮都创建新的订阅 this.tasks.pipe(tap((value) =gt； console.log(value))).subscribe()； }}登录后复制

在上述AppComponent的addTask()方法中，每次点击“Add Task”按钮时，都会执行this.tasks.pipe(tap(...)).subscribe()；。这意味着：第一次点击：创建1个订阅。第二次点击：创建第2个订阅（总共2个）。第三次点击：创建第3个订阅（总共3个）。

因此，当_tasksService中的BehaviourSubject发布值时，所有已存在的订阅都会被触发，导致console.log被多次打印且，每次点击都会增加打印次数。

BehaviourSubject的特性：

Be haviourSubject是一种特殊类型的主题，它总是保存其最新发布的值。当一个新的订阅者订阅BehaviourSubject时，它会立即接收到当前保存的值，然后才接收后续发出的值。这就是为什么你即使没有调用next()，但每次重复订阅时，console.log仍然会至少打印一次（即BehaviourSubject的当前值）。

解决方案：

为了避免重复的控制台日志和不必要的资源消耗，应该只订阅一次。通常，这会在组件的ngOnInit生命周期钩子中完成。

// 修改后面的AppComponent部分export class AppComponent Implements OnInit { publictasks!：BehaviorSubjectlt；ITask[]gt；； //注意：这里通常直接订阅，而不是持有Subject本身 public taskList： ITask[] = []； // 用于在模板中迭代的工件 constructor(private _tasksService： TasksService) {} ngOnInit()： void { console.log('OnInit')； //正确的做法：在ngOnInit中订阅一次，赋予值给本地属性 this._tasksService.getTasks().pipe( tap(tasks =gt； console.log('任务更新：'，tasks)) // 仅在此处进行日志记录 ).subscribe(tasks =gt； { this.taskList =tasks； // 将最新任务列表给分配本地属性 })； } public addTask() { this._tasksService.addTask({ id： crypto.randomUUID()， isImportant： true， 文本： '已添加任务' })； // 不再在此处创建新的订阅 }}登录后复制

在HTML模板中，如果使用异步管道，会自动处理订阅和取消订阅，无需手动管理：lt；ng-container *ngFor=quot；让taskList的任务quot；gt； lt；!-- 绑定到本地属性 --gt； {{task.text}} {{task.id}}lt；/ng-containergt；lt；button type=quot；buttonquot；(click)=quot；addTask()quot；gt；添加Tasklt；/buttongt；登录后复制

或者，如果想直接使用async管道，确保tasks属性是一个Observable，并且服务中的getTasks()返回的是_tasks$本身：// AppComponentexport class AppComponentimplements OnInit { publictasks$： Observablelt；ITask[]gt；； // 声明为Observable constructor(private _tasksService： TasksService) {} ngOnInit()： void { this.tasks$ = this._tasksService.getTasks()； // 直接获取Observable // 如果需要日志，可以在这里订阅，或者在服务中处理 this.tasks$.pipe( tap(tasks =gt； console.log('通过异步管道处理任务：'，tasks))

).subscribe()； // 仅用于日志，异步管道会手机管理订阅 } public addTask() { this._tasksService.addTask({ id： crypto.randomUUID()， isImportant： true， text： '已添加任务' })； }}// HTML 模板lt；ng-container *ngFor=quot；让任务为任务$ | asyncquot；gt； {{task.text}} {{task.id}}lt；/ng-containergt；lt；button type=quot；buttonquot；（点击）=quot；addTask()quot；gt；添加任务lt；/buttongt；登录后复制2. BehaviourSubject与JavaScript引用类型

第二个问题是，即使没有调用_tasks$.next(this._tasks)，视图仍然会更新。这涉及到JavaScript中引用类型（如工作队列和对象）的原理以及Angular的变更检测机制。

在服务中，_tasks$这个BehaviourSubject持有对_tasks数据库的引用：@Injectable({providedIn：'root'})export class TasksService { private _tasks： ITask[] = []； private _tasks$：BehaviourSubjectlt；ITask[]gt； = new BehaviourSubjectlt；ITask[]gt；([])； 构造函数(private _http： HttpClient) { } public getTasks() { this.getTasksObservableFromDb().pipe( tap( (tasks) =gt； { this._tasks = 任务； this._tasks$.next(任务)； // 首次从DB获取后，将引用提交给BehaviourSubject } ) ).subscribe()； return this._tasks$； } public addTask(task： ITask) { this._tasks.push(task)； // 直接修改了_tasks队列 // this._tasks$.next(this._tasks)； // 原始问题中被删除的行 } // ...其他方法}登录后复制

当getTasks()方法首次执行时，this._tasks$.next(tasks)将_tasks队列的引用传递给了_tasks$。这意味着_tasks$现在“指向”与_tasks指向相同的内存地址。

当addTask(任务： ITask) 方法被调用时，this._tasks.push(task) 操作直接修改了_tasks 磁盘中内存中的内容。由于_tasks$持有这个磁盘的引用，它所指向的磁盘内容也需要改变。

为什么视图会更新？

即使_tasks$.next()没有被调用，BehaviourSubject 本身并不会发出新的值。 ，Angular 的默认变更检测策略（ChangeDetectionStrategy.Default）会在每次异步事件（如 HTTP 请求完成、定时器、用户交互事件等）发生时运行。

当 addTask() 方法被调用，_tasks.push(task) 了内存内容，然后 Angular 的变更检测机制被触发。由于*ngFor="let任务中的任务| async”绑定到的任务（它通过async管道获取到_tasks$所持有的数据库引用），Angular会重新评估这个绑定。尽管数据库的引用没有改变，但Angular会检测到该引用所指向的数据库内容因为发生了变化（多了一个元素），从而更新DOM以反映射这些变化。

最佳实践：不断发布新的引用

虽然Angular的默认变更检测可以捕捉到这种内部变化，但在响应式编程中，最佳实践是当数据发生变化时，总是通过next()方法发布一个新的数据实例。有这几个重要的好处：明确的数据流：消费者可以明确知道何时有新数据可用。兼容OnPush策略：如果组件使用ChangeDetectionStrategy.OnPush，它在输入属性引用发生变化或可观察对象发出新值时才进行变更检测。在这种情况下，不发出新引用会导致视图不更新。避免意外响应：每次修改发送的数据都是一个新的、不可变的状态，可以避免在其他地方无意中修改了共享的数据保证。

为了遵循最佳实践，addTask方法应该为：export class TasksService { // ... public addTask(task： ITask) { // 创建一个新的集群，包含旧元素和新元素，然后发布这个新集群的引用 this._tasks = [...this._tasks， task]； this._tasks$.next(this._tasks)； // 发布新的集群引用 } // 或者更简单直接直接操作并发布副本 public addTaskV2(task： ITask) { const UpdatedTasks = [...this._tasks， task]； // 创建新数据库 this._tasks = UpdatedTasks； // 更新内部状态 this._tasks$.next(updatedTasks)； // 发布新数据库 }}登录后复制

通过[...this._tasks，这种方式，我们创建了一个全新的阵列实例，其中包含了所有旧的任务和新添加的任务。然后，将这个新阵列的引用传递给_tasks$.next()，这样BehaviourSubject就会发出一个全新的值，确保所有订阅者都能接收到这个明确的更新信号。

总结

理解RxJS的维护生命周期和JavaScript的引用类型是构建高性能、可的Angular应用的关键。避免在事件中处理器中重复订阅，并确保当数据内容发生变化时，通过next()方法发布新的数据引用，将有助于你更好地利用RxJS的强大功能，并避免潜在的变更检测问题，尤其是在使用OnPush变更检测策略时。

以上就是理解Angular中BehaviourSubject的行为与RxJS订阅的陷阱的详细文章内容，更多请关注乐哥常识网其他相关！