javascript - Angular 2 变化检测机制

Question

我正在研究 Angular 2 变化检测，我遇到了一些麻烦，或者至少，我需要一些解释。

让我们从 AppRef(和 Througtram 博客)中获取以下简化代码:

class ApplicationRef {

  changeDetectorRefs:ChangeDetectorRef[] = [];

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

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

我们可以假设组件有一个 changeDetector。我也假设在一个 angular 2 应用程序中只使用了一个 Zone.js 分支。

从现在开始，让我们得到detectChanges的代码实现，这里有一个比较如(简化):

detectChanges(){
  //...
 if(this.previousValue !== newValue){
   this.previousValue = newValue
 }

}

从那时起，知道只有一个 Zone.js 分支会触发所有事件，然后开始 changeDetection 循环，这是否意味着来自所有组件树的所有检测器都将被此比较所关注？我的意思是，如果我有 1000 个组件，我会调用 1000 次 detectChanges 吗？

谢谢你的帮助

Answer 1

基本上是的，Angular 在每个变更检测周期中从上到下比较每个绑定(bind)。

这就是为什么有 ChangeDetectionStrategy.OnPush 允许在没有为该组件更改输入属性时跳过检查组件(及其子/后代组件和指令)的原因。