🅰️ Angular 变更检测深度解析

📋 目录概览

🎯 Angular 变更检测简介

Angular 的变更检测系统是框架最核心的特性之一，负责：

• 检测数据变化 - 比较当前值与旧值
• 更新视图 - 将变化反映到 DOM
• 触发钩子 - 执行生命周期回调
• 优化性能 - 跳过不必要的检查

🏗️ 核心架构

change_detection/
├── change_detection.ts       # 主入口，导出公共 API
├── change_detector_ref.ts    # ChangeDetectorRef 抽象类
├── constants.ts              # ChangeDetectionStrategy 枚举
├── simple_change.ts          # SimpleChange 类
├── pipe_transform.ts         # Pipe 转换接口
└── differs/                  # 差异检测器
    ├── iterable_differs.ts   # Iterable 差异检测
    ├── keyvalue_differs.ts   # KeyValue 差异检测
    ├── default_iterable_differ.ts  # 默认实现
    └── default_keyvalue_differ.ts  # 默认实现

🌲 变更检测树

Angular 维护一棵 变更检测器树，每个组件对应一个检测器：

ApplicationRef
    └── AppComponent (CD)
        ├── HeaderComponent (CD)
        ├── MainComponent (CD)
        │   ├── ListComponent (CD)
        │   └── DetailComponent (CD)
        └── FooterComponent (CD)

⚙️ ChangeDetectionStrategy

export enum ChangeDetectionStrategy {
  OnPush = 0,    // CheckOnce - 只检查一次
  Eager = 1,     // 检查所有变化
  Default = 1,   // (已弃用) 同 Eager
}

🔌 ChangeDetectorRef 抽象类

export abstract class ChangeDetectorRef {
  abstract markForCheck(): void;
  abstract detach(): void;
  abstract detectChanges(): void;
  abstract checkNoChanges(): void;
  abstract reattach(): void;
}

作用： 提供手动控制变更检测的 API，用于优化性能或处理特殊场景。

✅ markForCheck()

标记组件需要检查（配合 OnPush 使用）：

// 场景：OnPush 组件，异步数据更新
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
class DataComponent {
  constructor(private cdr: ChangeDetectorRef) {}
  
  updateData(data: any) {
    this.data = data;
    this.cdr.markForCheck(); // 通知 Angular 检查
  }
}

🔍 detectChanges()

立即执行变更检测：

// 场景：detached 组件手动检测
@Component({...})
class ChartComponent implements OnInit {
  constructor(private cdr: ChangeDetectorRef) {}
  
  ngOnInit() {
    this.cdr.detach(); // 脱离检测树
    setInterval(() => {
      this.updateChart();
      this.cdr.detectChanges(); // 手动检测
    }, 1000);
  }
}

🔌 detach()

将组件从变更检测树分离：

// 分离后的组件不会被自动检测
detach(): void {
  // 从父检测器中移除
  // 即使数据变化也不会更新视图
}

🔗 reattach()

重新将组件附加到检测树：

// 场景：条件性分离/附加
@Component({...})
class LiveComponent {
  @Input() live: boolean = true;
  
  ngOnChanges() {
    if (this.live) {
      this.cdr.reattach(); // 恢复自动检测
    } else {
      this.cdr.detach();   // 停止自动检测
    }
  }
}

👁️ ViewRef 实现

ChangeDetectorRef 的实际实现是 ViewRef：

function createViewRef(tNode: TNode, lView: LView, isPipe: boolean): ChangeDetectorRef {
  if (isComponentHost(tNode) && !isPipe) {
    // 组件宿主节点 - 获取组件视图
    const componentView = getComponentLViewByIndex(tNode.index, lView);
    return new ViewRef(componentView, componentView);
  } else if (tNode.type & (TNodeType.AnyRNode | TNodeType.AnyContainer)) {
    // 普通节点 - 获取声明组件视图
    const hostComponentView = lView[DECLARATION_COMPONENT_VIEW];
    return new ViewRef(hostComponentView, lView);
  }
  return null!;
}

📊 LView 结构

LView（Lightweight View）是 Angular 内部的视图数据结构：

// LView 数组存储视图相关信息
// 索引对应特定数据
const LView = [
  0: LViewFlags,      // 视图标志位
  1: TView,           // 模板视图定义
  2: LView | null,    // 父视图
  3: LView | null,    // 下一个兄弟视图
  // ... 节点数据
  // ... 绑定值
  // ... 指令实例
];

🌳 TNode 概念

TNode（Template Node）是模板节点的编译时表示：

interface TNode {
  type: TNodeType;        // 节点类型
  index: number;          // 在 LView 中的索引
  injectorIndex: number;  // 依赖注入索引
  flags: TNodeFlags;      // 节点标志
  // ...
}

enum TNodeType {
  AnyRNode = 0b001,       // DOM 节点
  AnyContainer = 0b100,   // 容器节点
  Icu = 0b1000,           // ICU 节点
}

📦 SimpleChange 类

表示单个属性的变化：

export class SimpleChange<T = any> {
  constructor(
    public previousValue: T,  // 旧值
    public currentValue: T,   // 新值
    public firstChange: boolean  // 是否首次变化
  ) {}
  
  isFirstChange(): boolean {
    return this.firstChange;
  }
}

📝 SimpleChanges 类型

SimpleChanges 是属性名到 SimpleChange 的映射：

export type SimpleChanges<T = unknown> = T extends object
  ? {
      [Key in keyof T]?: SimpleChange<
        T[Key] extends {[ɵINPUT_SIGNAL_BRAND_READ_TYPE]: infer V} 
          ? V 
          : T[Key]
      >;
    }
  : { [propName: string]: SimpleChange; };

🔄 ngOnChanges 钩子

@Component({...})
class UserComponent implements OnChanges {
  @Input() userId: string;
  @Input() userData: User;
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes.userId) {
      // userId 变化了
      console.log('Old:', changes.userId.previousValue);
      console.log('New:', changes.userId.currentValue);
      console.log('First:', changes.userId.firstChange);
    }
  }
}

📚 IterableDiffers

管理 Iterable 差异检测策略的仓库：

export class IterableDiffers {
  constructor(private factories: IterableDifferFactory[]) {}
  
  // 查找支持该类型的 factory
  find(iterable: any): IterableDifferFactory {
    const factory = this.factories.find(f => f.supports(iterable));
    if (!factory) {
      throw new RuntimeError(
        RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY,
        `Cannot find a differ supporting object '${iterable}'`
      );
    }
    return factory;
  }
}

🗺️ KeyValueDiffers

管理键值对差异检测策略：

export class KeyValueDiffers {
  constructor(factories: KeyValueDifferFactory[]) {}
  
  find(kv: any): KeyValueDifferFactory {
    const factory = this.factories.find(f => f.supports(kv));
    if (!factory) {
      throw new RuntimeError(
        RuntimeErrorCode.NO_SUPPORTING_DIFFER_FACTORY,
        `Cannot find a differ supporting object '${kv}'`
      );
    }
    return factory;
  }
  
  // 扩展自定义 factory
  static extend(factories: KeyValueDifferFactory[]): StaticProvider;
}

⚙️ DefaultIterableDiffer

默认的 Iterable 差异检测实现：

export class DefaultIterableDiffer<V> 
  implements IterableDiffer<V>, IterableChanges<V> {
  
  private _linkedRecords: _DuplicateMap<V> | null = null;
  private _unlinkedRecords: _DuplicateMap<V> | null = null;
  private _itHead: IterableChangeRecord_<V> | null = null;
  private _itTail: IterableChangeRecord_<V> | null = null;
  private _additionsHead: IterableChangeRecord_<V> | null = null;
  private _movesHead: IterableChangeRecord_<V> | null = null;
  private _removalsHead: IterableChangeRecord_<V> | null = null;
  // ...
}

📋 IterableChangeRecord

export interface IterableChangeRecord<V> {
  readonly currentIndex: number | null;  // 当前索引（null 表示已删除）
  readonly previousIndex: number | null; // 之前索引（null 表示新增）
  readonly item: V;                      // 数据项
  readonly trackById: any;               // trackBy 标识
}

🏷️ TrackByFunction

自定义项目标识函数，优化 ngFor 性能：

export interface TrackByFunction<T> {
  <U extends T>(index: number, item: T & U): any;
}

// 使用示例
@Component({...})
class ListComponent {
  trackByUserId = (index: number, user: User) => user.id;
  
  // 模板: *ngFor="let user of users; trackBy: trackByUserId"
}

🗺️ DefaultKeyValueDiffer

export class DefaultKeyValueDiffer<K, V> 
  implements KeyValueDiffer<K, V>, KeyValueChanges<K, V> {
  
  private _records = new Map<K, KeyValueChangeRecord_<K, V>>();
  private _mapHead: KeyValueChangeRecord_<K, V> | null = null;
  private _previousMapHead: KeyValueChangeRecord_<K, V> | null = null;
  private _changesHead: KeyValueChangeRecord_<K, V> | null = null;
  private _additionsHead: KeyValueChangeRecord_<K, V> | null = null;
  private _removalsHead: KeyValueChangeRecord_<K, V> | null = null;
  
  get isDirty(): boolean {
    return this._additionsHead !== null || 
           this._changesHead !== null || 
           this._removalsHead !== null;
  }
}

📝 KeyValueChangeRecord

export interface KeyValueChangeRecord<K, V> {
  readonly key: K;               // 键
  readonly currentValue: V | null;  // 当前值（null 表示已删除）
  readonly previousValue: V | null; // 之前值（null 表示新增）
}

🔍 diff() 方法

// DefaultIterableDiffer.diff()
diff(collection: NgIterable<V> | null | undefined): DefaultIterableDiffer<V> | null {
  if (collection == null) collection = [];
  if (!isListLikeIterable(collection)) {
    throw new RuntimeError(
      RuntimeErrorCode.INVALID_DIFFER_INPUT,
      `Error trying to diff '${stringify(collection)}'. Only arrays and iterables are allowed`
    );
  }
  
  if (this.check(collection)) {
    return this;  // 有变化，返回 this
  } else {
    return null;  // 无变化
  }
}

🔬 check() 核心逻辑

check(collection: NgIterable<V>): boolean {
  this._reset();
  
  let record: IterableChangeRecord_<V> | null = this._itHead;
  let mayBeDirty: boolean = false;
  
  for (let index = 0; index < collection.length; index++) {
    item = collection[index];
    itemTrackBy = this._trackByFn(index, item);
    
    if (record === null || !Object.is(record.trackById, itemTrackBy)) {
      record = this._mismatch(record, item, itemTrackBy, index);
      mayBeDirty = true;
    } else {
      if (mayBeDirty) {
        record = this._verifyReinsertion(record, item, itemTrackBy, index);
      }
      if (!Object.is(record.item, item)) {
        this._addIdentityChange(record, item);
      }
    }
    record = record._next;
  }
  
  this._truncate(record);
  return this.isDirty;
}

🔀 _mismatch() 处理

_mismatch(
  record: IterableChangeRecord_<V> | null,
  item: V,
  itemTrackBy: any,
  index: number
): IterableChangeRecord_<V> {
  let previousRecord = record === null ? this._itTail : record._prev;
  
  // 1. 尝试从 unlinked 记录中恢复
  record = this._unlinkedRecords?.get(itemTrackBy, null);
  if (record !== null) {
    this._reinsertAfter(record, previousRecord, index);
    return record;
  }
  
  // 2. 尝试从 linked 记录中移动
  record = this._linkedRecords?.get(itemTrackBy, index);
  if (record !== null) {
    this._moveAfter(record, previousRecord, index);
    return record;
  }
  
  // 3. 创建新记录
  return this._addAfter(new IterableChangeRecord_<V>(item, itemTrackBy), previousRecord, index);
}

✅ _verifyReinsertion()

处理数组中重复元素的情况：

// 使用场景：[a, a] => [b, a, a]
// 正确处理：插入 b，第一个 a 后移
_verifyReinsertion(
  record: IterableChangeRecord_<V>,
  item: V,
  itemTrackBy: any,
  index: number
): IterableChangeRecord_<V> {
  let reinsertRecord = this._unlinkedRecords?.get(itemTrackBy, null);
  
  if (reinsertRecord !== null) {
    record = this._reinsertAfter(reinsertRecord, record._prev!, index);
  } else if (record.currentIndex != index) {
    record.currentIndex = index;
    this._addToMoves(record, index);
  }
  return record;
}

🗑️ _truncate() 清理

_truncate(record: IterableChangeRecord_<V> | null) {
  // 移除所有多余记录
  while (record !== null) {
    const nextRecord = record._next;
    this._addToRemovals(this._unlink(record));
    record = nextRecord;
  }
  
  // 清理临时数据结构
  if (this._unlinkedRecords !== null) {
    this._unlinkedRecords.clear();
  }
  
  // 清理链表尾部
  if (this._additionsTail !== null) {
    this._additionsTail._nextAdded = null;
  }
  // ...
}

🗺️ _DuplicateMap 优化

用于高效查找重复项：

class _DuplicateMap<V> {
  map = new Map<any, _DuplicateItemRecordList<V>>();
  
  put(record: IterableChangeRecord_<V>) {
    const key = record.trackById;
    let duplicates = this.map.get(key);
    if (!duplicates) {
      duplicates = new _DuplicateItemRecordList<V>();
      this.map.set(key, duplicates);
    }
    duplicates.add(record);
  }
  
  get(trackById: any, atOrAfterIndex: number | null): IterableChangeRecord_<V> | null {
    const recordList = this.map.get(trackById);
    return recordList ? recordList.get(trackById, atOrAfterIndex) : null;
  }
}

🔄 变更检测流程

🌐 Zone.js 集成

Angular 使用 Zone.js 自动捕获异步操作：

// Zone.js 补丁所有异步 API
// 当异步完成时，通知 Angular 执行变更检测

// 启用 Zone.js
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

// 禁用 Zone.js（手动控制）
platformBrowserDynamic()
  .bootstrapModule(AppModule, { ngZone: 'noop' });

🔧 Zone.js 补丁机制

// Zone.js 补丁示例（简化）
const originalSetTimeout = window.setTimeout;
window.setTimeout = function(callback, delay, ...args) {
  return originalSetTimeout.call(
    this,
    Zone.current.wrap(callback, 'setTimeout'),
    delay,
    ...args
  );
};

// 回调执行后，Zone 通知 Angular
Zone.current.wrap = (callback, source) => {
  return function(...args) {
    const result = callback.apply(this, args);
    // 通知 Angular 执行变更检测
    zone.run(() => {});
    return result;
  };
};

⏰ ApplicationRef.tick()

// ApplicationRef 核心方法
export class ApplicationRef {
  tick(): void {
    // 1. 遍历所有组件视图
    for (const view of this._views) {
      // 2. 执行变更检测
      view.detectChanges();
    }
    
    // 3. 开发模式下额外检查
    if (isDevMode()) {
      for (const view of this._views) {
        view.checkNoChanges();
      }
    }
  }
}

🔍 脏检查算法

Angular 使用 单向数据流 + 脏检查：

⚡ 性能优化策略

✅ OnPush 最佳实践

@Component({
  selector: 'app-user-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...`
})
export class UserCardComponent {
  @Input() user: User;  // 不可变对象
  
  // 方式1：通过输入变化触发
  @Input() set userData(data: User) {
    this.user = {...data}; // 创建新引用
  }
  
  // 方式2：通过事件触发
  onClick() {
    this.update.emit();
    // 事件会自动触发 OnPush 组件检测
  }
}

🔒 不可变数据

// ❌ 错误：直接修改（OnPush 不会检测到）
this.user.name = 'New Name';

// ✅ 正确：创建新对象
this.user = {...this.user, name: 'New Name'};

// 使用 Immutable.js
import { Map } from 'immutable';

this.user = Map({ name: 'Old' });
this.user = this.user.set('name', 'New'); // 返回新 Map

// 使用 Immer（推荐）
import { produce } from 'immer';

this.user = produce(this.user, draft => {
  draft.name = 'New Name'; // 看起来像修改，实际创建新对象
});

📶 Signal 集成

Angular 16+ 引入 Signal，提供细粒度响应式：

import { signal, computed, effect } from '@angular/core';

@Component({...})
class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);
  
  constructor() {
    effect(() => {
      console.log('Count changed:', this.count());
    });
  }
  
  increment() {
    this.count.update(v => v + 1);
  }
}

📊 Signal vs 传统变更检测

🎨 设计模式

Angular 变更检测使用了多种设计模式：

• 观察者模式 - 变更通知机制
• 策略模式 - ChangeDetectionStrategy
• 工厂模式 - DifferFactory
• 组合模式 - 检测器树结构
• 模板方法 - check() 算法

👁️ 观察者模式

// 变更检测器作为观察者
interface ChangeDetectorObserver {
  notifyChange(): void;
}

// ApplicationRef 作为主题
class ApplicationRef {
  private observers: ChangeDetectorObserver[] = [];
  
  attach(observer: ChangeDetectorObserver) {
    this.observers.push(observer);
  }
  
  notifyAll() {
    this.observers.forEach(o => o.notifyChange());
  }
}

🎯 策略模式

// ChangeDetectionStrategy 作为策略
interface ChangeDetectionStrategy {
  shouldCheck(component: Component): boolean;
}

class DefaultStrategy implements ChangeDetectionStrategy {
  shouldCheck() { return true; } // 总是检查
}

class OnPushStrategy implements ChangeDetectionStrategy {
  shouldCheck(component) {
    return component.dirty || component.inputsChanged;
  }
}

🏭 工厂模式

// DifferFactory 接口
interface IterableDifferFactory {
  supports(objects: any): boolean;
  create<V>(trackByFn?: TrackByFunction<V>): IterableDiffer<V>;
}

// 具体工厂
class DefaultIterableDifferFactory implements IterableDifferFactory {
  supports(obj: Object | null | undefined): boolean {
    return isListLikeIterable(obj);
  }
  
  create<V>(trackByFn?: TrackByFunction<V>): DefaultIterableDiffer<V> {
    return new DefaultIterableDiffer<V>(trackByFn);
  }
}

📐 UML 类图

┌─────────────────┐     ┌──────────────────┐
│ ChangeDetectorRef│<────│     ViewRef      │
└────────┬────────┘     └────────┬─────────┘
         │                       │
    ┌────┴────┐                  │
    │ Methods │                  │
    └────┬────┘                  │
         │ implements             │ has
         ▼                       ▼
┌─────────────────┐     ┌──────────────────┐
│markForCheck()   │     │      LView       │
│detectChanges()  │     └──────────────────┘
│detach()         │              │
│reattach()       │              │ contains
└─────────────────┘              ▼
                        ┌──────────────────┐
                        │    TView/TNode   │
                        └──────────────────┘

📊 数据流图

用户操作 → Zone.js 捕获
              │
              ▼
       ApplicationRef.tick()
              │
              ▼
      ┌───────────────┐
      │ 遍历检测器树   │
      └───────┬───────┘
              │
    ┌─────────┴─────────┐
    │                   │
    ▼                   ▼
OnPush 组件        Default 组件
    │                   │
    │ 输入变化？         │ 总是检查
    │                   │
    └─────────┬─────────┘
              │
              ▼
        更新 DOM

⏱️ 时序图

User          Zone.js      AppRef      Component      DOM
 │               │            │            │           │
 │─click────────>│            │            │           │
 │               │─notify────>│            │           │
 │               │            │─tick()────>│           │
 │               │            │            │─check────>│
 │               │            │            │           │
 │               │            │            │<─changes──│
 │               │            │            │           │
 │               │            │            │─update───>│
 │               │            │<─done──────│           │
 │<────────────────────────────────────────────────────│
 │               │            │            │           │

📈 性能基准测试

⚠️ 常见反模式

🐛 调试技巧

// 1. 开启变更检测调试
import { enableDebugTools } from '@angular/platform-browser';

ngAfterViewInit() {
  enableDebugTools(this.elementRef.nativeElement);
}

// 2. 控制台手动触发
ng.profiler.timeChangeDetection();

// 3. 检测器树可视化
ng.getComponent(this.elementRef.nativeElement);

// 4. 检查变更检测次数
import { ApplicationRef } from '@angular/core';
console.log(this.appRef.tickListeners);

🎯 总结与展望