更新Firebase RTDB时关联组件全重渲染，求原因及解决方法

核心原因 #

1. valueChanges()的特性：AngularFire的valueChanges()每次数据库数据更新时，都会返回全新的数组/对象实例（而非修改原有引用）。Angular的变更检测机制会识别到这个引用变化，触发组件的重新渲染。
2. 模板重复订阅Observable：你的模板中两次使用lineup$ | async，虽然AngularFire会自动共享订阅，但每次数据更新时，两个async管道都会收到新的数组实例，导致对应区块重复渲染。
3. *ngFor无trackBy优化：默认情况下*ngFor会根据对象引用判断元素是否需要重建，当lineup$返回新数组时，所有循环内的元素都会被销毁并重建，看起来像是整个应用在刷新。

解决方案 #

1. 优化Observable订阅，避免重复async调用 #

将lineup$的订阅结果一次性存储为模板变量，复用该变量避免多次订阅：

2. 添加trackBy函数优化*ngFor渲染 #

让Angular只重新渲染实际变化的元素，而非全量重建循环内容。

3. 修复changer函数的内存泄漏问题 #

每次点击按钮都会新增一个订阅，长期会导致内存泄漏，需限制订阅次数。

修改后的TS代码 #

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { BehaviorSubject, Observable, switchMap, take } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  squad = [];
  timeline$: Observable<any[]>;
  lineup$: Observable<any[]>;
  x$ = new BehaviorSubject<string>('first_race');
  
  constructor(private db: AngularFireDatabase) {
    // Get Lineups
    this.lineup$ = this.x$.pipe(
      switchMap((x) => this.db.list(`lineups/${x}`).valueChanges())
    );

    // Get Timeline
    this.timeline$ = this.x$.pipe(
      switchMap((x) => this.db.list(x).valueChanges())
    );
  }
  
  match_no(b: string) {
    this.x$.next(b);
  }

  changer(){
    // 使用take(1)确保只订阅一次，避免内存泄漏
    this.lineup$.pipe(take(1)).subscribe({
      next: (value: any[]) => {
        this.squad.push(value[0]);
        console.log(this.squad[0]);
      }
    });
  }

  // 自定义trackBy函数，用唯一标识判断元素是否需要更新
  trackByLineup(index: number, lineup: any): string {
    // 优先用数据的唯一标识，没有则用index兜底
    return lineup?.lineups?.[0]?.starting_lineup?.[0]?.name || index.toString();
  }
}

修改后的HTML代码 #

<!-- 一次性订阅lineup$，存储为模板变量复用 -->
<ng-container *ngIf="lineup$ | async as lineups">
  <div *ngFor="let lines of lineups; trackBy: trackByLineup">
    <ng-container *ngIf="lines.lineups != undefined">
      <button type="button" (click)="match_no('first_race'); changer()">Game 1</button>

      <!-- 复用已获取的lines数据，无需再次订阅lineup$ -->
      <div>
        <p *ngFor="let starting_lineup of lines.lineups[0].starting_lineup">
          {{ starting_lineup.name }}
        </p>
      </div>
    </ng-container>
  </div>
</ng-container>

额外说明 #

• 保留*ngIf="lines.lineups != undefined"是完全合理的，它不会导致全量刷新，问题根源在于Observable的引用变化和无优化的*ngFor。
• 如果需要进一步减少不必要的更新，可以在lineup$的管道中添加distinctUntilChanged结合深比较（注意深比较的性能开销），例如：

  import { distinctUntilChanged, map } from 'rxjs';
  import isEqual from 'lodash.isequal';
  
  this.lineup$ = this.x$.pipe(
    switchMap((x) => this.db.list(`lineups/${x}`).valueChanges()),
    distinctUntilChanged(isEqual)
  );
  

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