更改检测过程以及检查 OnPush 属性的确切时间答案

【问题标题】：Change Detection process and which exact time check OnPush properties更改检测过程以及检查 OnPush 属性的确切时间
【发布时间】：2017-07-24 16:48:44
【问题描述】：

在https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

他说 angular 有 14 次操作，但它检查组件是否为 ChecksEnabled == false (OnPush) 的确切时刻，特别是如果它是 OnPush，它在什么时候检查某些 @Input 属性已更改以在其中运行进程？并继续检查 DOM 并调用所需的生命周期？

如果这个值是一个新的引用，它会只对@Input 的那个值的属性进行检查，或者根本就在绑定中？同意我的观点，如果他只检查该元素的值绑定会更好吗？

【问题讨论】：

标签： javascript angular angular2-changedetection

【解决方案1】：

检查组件是否为 ChecksEnabled 的确切时间 == 假（OnPush）

当 Angular 运行检查子视图时会发生这种情况：

为子视图运行更改检测（重复此列表中的步骤）

以下是相关代码：

function callViewAction(view: ViewData, action: ViewAction) {
  const viewState = view.state;
  switch (action) {
    ...
    case ViewAction.CheckAndUpdate:
      if ((viewState & ViewState.Destroyed) === 0) {
        if ((viewState & ViewState.CatDetectChanges) === ViewState.CatDetectChanges) {
          checkAndUpdateView(view);
        } else if (viewState & ViewState.CheckProjectedViews) {
          execProjectedViewsAction(view, ViewAction.CheckAndUpdateProjectedViews);
        }
      }
      break;

它在什么时候检查某些@Input 属性已更改为运行里面的过程

这是为此步骤执行的：

更新子组件/指令实例的输入属性

要了解更多信息，请阅读The mechanics of property bindings update in Angular

然后继续检查 DOM 并调用所需的生命周期循环？

这将在以下时间完成：

如果当前视图组件实例的属性发生更改，则更新当前视图的 DOM 插值和绑定

要了解更多信息，请阅读The mechanics of DOM updates in Angular

【讨论】：

嗨马克西姆斯，谢谢你的回复！但是在您的帖子中，操作是按执行顺序排列的吗？因为操作“更新子组件/指令实例上的输入属性”在 OnPush 上没有任何内容，并且操作“为子视图运行更改检测（重复此列表中的步骤）”将在此过程之后调用，问题是：您回复中的第一个代码仅在 OnPush 时跳过，但验证检查的位置和确切时间仅是新的输入值更新视图？为什么在 checkAndUpdateDirectiveInline 之后调用 callViewAction？
嘿，很抱歉，我无法为您提供 Angular 正在执行的所有操作的精确调用堆栈。为此，您必须自己阅读资源。 Angular always 检查与子视图相关的绑定，无论它们是否是 OnPush。它会在运行检查子视图之前执行此操作。这是因为如果 Input 属性发生更改，则必须将子组件的 ViewState 更新为 ChecksEnabled，以便在检查子组件时，callViewAction 中的检查通过
谢谢！我确实认为我可以正确表达自己，但是如果 Input 属性没有更改，则从 cd 跳过组件 OnPush ok！问题是，它发生的时间是什么，因为第一个代码只发生了跳过，而没有检查输入属性。非常感谢你:-)
正如我所说，它发生在updates input properties...，这是文章中的[相关段落]（f4b9）。请参阅sets state to checksEnabled if a component uses OnPush strategy 步骤。我可能会将updates input properties on... 重命名为checks and updates input properties...。我也刚刚将操作 2 与操作 3 交换。ChecksEnabled 是在检查嵌入视图之前设置的
哇，好家伙，感谢您的精彩解释，Angular 社区会喜欢您的工作。