改变Angular中的检测周期 - 澄清?

时间:2017-12-21 10:52:53

标签: javascript angular

关于ChangeDetectorRef,我已经知道 -

  

detectChanges实际上触发了变更检测,而 -   markForCheck - 组件的实际更改检测是   预定,但将来会发生(作为一部分   当前或下一个CD周期)

Taken from here

查看markForCheck - 如果没有安排,那么它什么时候开始运行?显然是在Observables回调,异步回调和setTimout和事件之后。

The docs包含OnPush策略

的组件
@Component({
  selector: 'cmp',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `Number of ticks: {{numberOfTicks}}`
})
class Cmp {
  numberOfTicks = 0;

  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks++;
      // the following is required, otherwise the view will not be updated
      this.ref.markForCheck();
    }, 1000);
  }
}

问题:

如果它标记为检查其祖先,用于下一个周期,那么谁运行当前周期? (它是prev setoutout调用吗?)

因为此代码显示每秒被另一个代替 - 换句话说每秒都有一个变化检测(?!)。

通过POV步骤实际发生了什么?

1 个答案:

答案 0 :(得分:4)

markForCheck,正如您所猜测的那样,顾名思义,它会告诉Angular将组件标记为可在下一个周期进行更改检测。

当您编写setInterval时,这就是您实际编写的内容:

constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks++;
      // the following is required, otherwise the view will not be updated
      this.ref.markForCheck();

      detectChangesFromZoneJS(); // this is a psudo code, but you can imagine something like this will happen, which is patched by NGZone
     // Note that this is the last function that will always be called by Zone at the end of all the async events

    }, 1000);
}

这由ZoneJS处理。

区域猴子修补了所有异步事件,当它们完成时,Zone会通知Angular,然后是Angular。知道是时候检测更改(根据最新的模型更改更新视图),但当你的组件OnPush不会检测到更改时,除非有特殊的东西发生在组件内部(如点击事件,或任何@input更改)。

因此,当您故意说markForCheck时,您基本上会说:"我知道您不应该检测到这些更改,因为它是仅限OnPush ,但我告诉你无论如何都要检测它"

所以这是一步一步:

  1. 组件已初始化,Angular将检测所有更改,您的视图已更新

  2. 你在其中运行了一个setInterval,你正在改变你的模型,Angular知道它不应该更新视图,因为它的OnPush

  3. 第一个间隔的回调被调用,我们在第一个函数内部,你要标记要被故意检查的组件,我们在结束时区间函数(仍然是第一个区间)。

  4. 区域通知Anguar刚刚完成Async事件,检测更改的时间

  5. Angular会查看OnPush并希望忽略,但会记住您已强制标记要强制检查的组件

  6. 视图已更新

  7. 我们转到第二个间隔,依此类推。