Angular change detection

Angular change detection

angular源码基于zone.js进行变更检测，拥有NgZone，在ApplicationRef的构造函数中监听zone.js的onTurnDone事件，回调函数中遍历整个angular应用中每个组件的changeDetector的detectChanges。

class ApplicationRef {

  changeDetectorRefs:ChangeDetectorRef[] = [];

  constructor(private zone: NgZone) {
    this.zone.onTurnDone
      .subscribe(() => this.zone.run(() => this.tick());
  }

  tick() {
    this.changeDetectorRefs
      .forEach((ref) => ref.detectChanges());
  }
}

onTurnDone事件的激活可以来自：用户的操作事件（按钮点击、表单提交等）、XHR、定时器（setTimeout、setInterval）

angular工程逻辑上映射为组件树，组件树对应有changeDetector树、数据模型树。

ChangeDetectionStrategy包含Default（默认值）、OnPush两种变更检测策略；
只有当引用发生变化才会继续进行视图更新（不可变对象、Observable）；
OnPush时，@Input属性引用变化会触发本组件的变更检测，但需要调用本组件changeDetector的markForCheck来进行根节点到当前组件节点的完整检测。
changeDetector还提供了detectChanges（常用）、detach、reattach、checkNoChanges方法。

参考文献1 Angular Change Detection Explained