Angular 11中执行数组concat操作时UI闪烁如何解决

闪烁的核心诱因有三点：

• concat方法每次执行都会返回全新的数组引用，Angular默认的*ngFor跟踪逻辑会判定所有列表项发生变更，直接销毁原有DOM全量重绘列表，而非追加新增节点，直接造成视觉闪烁。
• 直接修改Input传入的原数组对象属性，会污染父组件数据源，触发跨组件的意外变更检测。
• 未做重复数据过滤，服务端重复推送相同条目时会重复追加，触发无意义的重绘。

可落地修复措施 #

1. 为*ngFor配置trackBy函数，按业务唯一标识跟踪列表项 #

这是解决列表重绘闪烁最高效的手段，替代Angular默认的对象引用比对逻辑，让框架只对真正新增的条目创建DOM节点，已有条目不会重复渲染。
首先在组件类中添加跟踪方法：

// 请将id替换为你公司数据中的实际唯一标识字段，如companyId、enterpriseCode等
trackByCompanyId(index: number, company: any): number | string {
  return company.id;
}

在模板的*ngFor指令上绑定该方法：

<div *ngFor="let company of companies; trackBy: trackByCompanyId">
  <!-- 原有列表项内容保持不变 -->
</div>

2. 优化数组合并逻辑，避免污染源数据+过滤重复条目 #

不要直接修改Input传入的原对象，合并前先做浅拷贝，同时过滤已存在的重复条目，无新数据时直接返回不触发渲染，修改setter逻辑如下：

@Input('companies') set setCompanyArray(companies: any[]) {
  this.showNotFound = false;
  if (!companies?.length) {
    return;
  }
  // 浅拷贝处理新数据，不修改父组件传入的原对象
  const processedNewCompanies = companies.map(company => ({
    ...company,
    searchFilter: this.lastSearchedText
  }));

  // 首次赋值直接返回
  if (!this.companies?.length) {
    this.companies = processedNewCompanies;
    return;
  }

  // 过滤重复推送的已有条目
  const existingIds = new Set(this.companies.map(item => item.id));
  const uniqueNewCompanies = processedNewCompanies.filter(item => !existingIds.has(item.id));
  // 无新数据时不更新数组，避免无意义渲染
  if (!uniqueNewCompanies.length) {
    return;
  }
  this.companies = [...this.companies, ...uniqueNewCompanies];
}

注意：不要用Array.push直接往原数组追加条目，Angular默认变更检测不会跟踪数组内部的修改，必须返回新的数组引用才能触发视图更新，配合trackBy只会渲染新增部分。

3. 配置OnPush变更检测策略，减少无效检测触发 #

如果列表数据量较大，给组件开启OnPush变更检测，仅当Input引用变更、组件内部事件触发、手动标记检测时才执行变更检测逻辑，避免其他组件的检测周期连带触发当前列表重绘：

import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 开启OnPush策略
})
export class YourComponent {
  companies: any[];
  constructor(private cdr: ChangeDetectorRef) {}

  @Input('companies') set setCompanyArray(companies: any[]) {
    // 上述处理逻辑不变，更新数组后手动标记检测
    this.companies = [...this.companies, ...uniqueNewCompanies];
    this.cdr.markForCheck();
  }

  // 其余原有逻辑
}

4. 高频推送场景增加防抖优化 #

如果服务端推送频率超过1次/300ms，可以加防抖逻辑将短时间内的多批推送合并为一次视图更新，避免频繁触发渲染：

import { debounceTime, Subject } from 'rxjs';

private companyUpdateQueue = new Subject<any[]>();

ngOnInit() {
  this.companyUpdateQueue.pipe(debounceTime(300)).subscribe(rawCompanies => {
    // 将原setter中的数据处理、合并逻辑移到此处执行
    this.processAndMergeCompanies(rawCompanies);
  });
}

@Input('companies') set setCompanyArray(companies: any[]) {
  this.companyUpdateQueue.next(companies);
}

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