Angular OnPush 变化检测策略性能

编程问答 2022-04-30

问题描述

我从各种文章和 stackoverflow 帖子中对角度变化检测策略的理解：

变更检测流程包括：

  1. 更新组件子项的输入。
  2. 对嵌入的视图运行更改检测。
  3. 如果适用，请对儿童调用 ngOnChanges、ngDoCheck、ngOnInit。
  4. 更新当前组件中的内容子项。
  5. 如果适用，请致电 afterContentinit、afterContentChecked 名儿童。
  6. 更新当前组件的 DOM 插值。
  7. 为子视图运行更改检测。
  8. 如果适用，请致电 afterViewInit、afterViewChecked 名儿童。

默认变更检测策略： 当任何组件发生事件（dom 事件、setTimeout、XHR 等）时，angular 将从顶部开始对整个应用程序运行更改检测。对所有组件重复上述所有步骤。

OnPush 变更检测策略： 除非

，否则不会为组件触发更改检测
  1. 首次创建组件时，会运行更改检测。
  2. 对组件输入的引用发生变化。
  3. 在组件或其子组件之一中触发事件侦听器（例如：(click)="onClick()"）
  4. 当 async 管道从 observable 获取新值时

其他一些有趣的事情：

  1. 上面列出的变更检测过程中的所有步骤也针对OnPush变更检测策略运行DOM 绑定更新除外。是的！ ngDoCheck、afterViewChecked 等生命周期钩子在应用程序的任何部分发生事件时，即使对于具有 OnPush 更改检测策略的组件也会被调用。

  2. 当调用 markForCheck 时，它将标记当前组件和层次结构中的所有父组件，以检查更改。这会强制对这些组件进行更改检测。

  3. 当应用程序中发生事件时，angular 从应用程序的根开始检查，然后向下检查层次结构。当遇到一个组件时，它会检查该组件是否被标记为要检查。

    如果标记为检查，则为组件运行更改检测。 （DOM 绑定更新）

    否则检查组件是否具有 OnPush 更改检测策略。

    如果是 OnPush 策略，则检查输入绑定是否有任何引用更改。如果引用已更改，则会发生更改检测。 （DOM 绑定更新）。

    为组件运行其他更改检测（重新评估 DOM 绑定）。

我的疑惑：

  1. 我的理解是否正确？
  2. 视图中的 embeddedView 和 childView 有什么区别。这是关于组件的直接子元素与投影内容吗？
  3. 如果在 OnPush 更改检测策略中，除 DOM 插值更新之外的所有步骤都已完成（即，完整的应用程序视图层次结构由为每个事件调用的 angular 和生命周期事件遍历），这怎么会变得更多性能？ DOM 插值更新是一项非常昂贵的任务吗？
  4. 如果我想在另一个组件中使用一个组件，并将更改检测策略设为 OnPush，我将确保触发组件内部发生的更改，例如使用 xhr 请求。这不会在组件和使用它的地方之间产生耦合吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangular2-changedetectionjavascript