Angular2变化检测误解 – 用plunker

更新

Component with OnPush strategy get ‘changed detected’ when their input
changes,EVEN IF their change detector is detached.

自Angular 4.1.1(2017-05-04)OnPush应该尊重detach()

https://github.com/angular/angular/commit/acf83b9

旧版

关于变更检测如何工作,有很多未记载的内容.

我们应该知道三个主要的changeDetection状态(cdMode)：

1)CheckOnce – 0

CheckedOnce means that after calling detectChanges the mode of the
change detector will become Checked.

AppView类

detectChanges(throwOnChange: boolean): void {
  ...
  this.detectChangesInternal(throwOnChange);
  if (this.cdMode === ChangeDetectorStatus.CheckOnce) {
    this.cdMode = ChangeDetectorStatus.Checked; // <== this line
  }
  ...
}

2)检查 – 1

Checked means that the change detector should be skipped until its mode changes to CheckOnce.

3)独立 – 3

Detached means that the change detector sub tree is not a part of
the main tree and should be skipped.

以下是使用Detached的地方

AppView类

跳过内容检查

detectContentChildrenChanges(throwOnChange: boolean) {
  for (var i = 0; i < this.contentChildren.length; ++i) {
    var child = this.contentChildren[i];
    if (child.cdMode === ChangeDetectorStatus.Detached) continue; // <== this line
    child.detectChanges(throwOnChange);
  }
}

跳过视图检查

detectViewChildrenChanges(throwOnChange: boolean) {
  for (var i = 0; i < this.viewChildren.length; ++i) {
    var child = this.viewChildren[i];
    if (child.cdMode === ChangeDetectorStatus.Detached) continue; // <== this line
    child.detectChanges(throwOnChange);
  }
}

跳过将cdMode更改为CheckOnce

markPathToRootAsCheckOnce(): void {
  let c: AppView<any> = this;
  while (isPresent(c) && c.cdMode !== ChangeDetectorStatus.Detached) { // <== this line
    if (c.cdMode === ChangeDetectorStatus.Checked) {
      c.cdMode = ChangeDetectorStatus.CheckOnce;
    }
    let parentEl =
        c.type === ViewType.COMPONENT ? c.declarationAppElement : c.viewContainerElement;
    c = isPresent(parentEl) ? parentEl.parentView : null;
  }
}

注意：markPathToRootAsCheckOnce在视图的所有事件处理程序中运行：

因此,如果将状态设置为Detached,则不会更改您的视图.

然后OnPush策略如何运作

OnPush means that the change detector’s mode will be set to CheckOnce
during hydration.

编译器/ SRC / view_compiler / property_binder.ts

const directiveDetectChangesStmt = isOnPushComp ?
   new o.IfStmt(directiveDetectChangesExpr,[compileElement.appElement.prop('componentView')
           .callMethod('markAsCheckOnce',[])
           .toStmt()]) : directiveDetectChangesExpr.toStmt();

https://github.com/angular/angular/blob/2.1.2/modules/%40angular/compiler/src/view_compiler/property_binder.ts#L193-L197

让我们看看它在你的例子中的样子：

父工厂(AppComponent)

再次回到AppView类：

markAsCheckOnce(): void { this.cdMode = ChangeDetectorStatus.CheckOnce; }

情景1

1) Detach Change detector of OnPush Children and Default Children (click “detach()” on both components)

OnPush.cdMode - Detached

3) Click “Change obj” to pass the modified attribute to the children

AppComponent.detectChanges
       ||
       /
//if (self._OnPush_35_4.detectChangesInInputProps(self,self._el_35,throwOnChange)) {
//  self._appEl_35.componentView.markAsCheckOnce();
//}
OnPush.markAsCheckOnce
       ||
       /
OnPush.cdMode - CheckOnce
       ||
       /
OnPush.detectChanges
       ||
       /
OnPush.cdMode - Checked

因此OnPush.dectectChanges正在解雇.

结论如下：

Component with OnPush strategy get ‘changed detected’ when their
input changes,EVEN IF their change detector is detached. Moreover
It changes view’s status to CheckOnce.

Scenario2

1) Detach CD for the OnPush component

OnPush.cdMode - Detached

6) Click “Change obj” to pass the modified attribute to the
children

See 3) from scenario 1 => OnPush.cdMode - Checked

7) For the last time,edit the internal value input and click change
internal: Change is detected,and internal value is updated …

如上所述,所有事件处理程序都包含markPathToRootAsCheckOnce.所以：

markPathToRootAsCheckOnce
        ||
        /
OnPush.cdMode - CheckOnce
        ||
        /
OnPush.detectChanges
        ||
        /
OnPush.cdMode - Checked

正如您所见,OnPush策略和ChangeDetector管理一个属性 – cdMode

Component with OnPush strategy get their change detector re attached
each time their input changed …

总之,我想说,你似乎是对的.