角度实际上是如何触发生命周期钩子的？

Posted 2023-03-13

【中文标题】角度实际上是如何触发生命周期钩子的？

【英文标题】：How does angular actually trigger the life-cycle hooks?

【发布时间】：2017-11-20 15:44:52

【问题描述】：

在组件生命周期中，我们有不同的接口来跟踪组件的不同阶段 生命周期，例如。 OnInit、OnChanges、OnDestroy..etc 在运行时角度如何触发这些方法？

例如。 ngOnChanges() 在 @Input 数据更改时触发 现在 Angular 有这个逻辑 我假设 1- 每当角度检测 @input 数据中的变化 2- 角度检查此组件类是否实现 OnChanges 3- 如果为真则触发 ngOnChanges()

每个生命周期钩子都有一些逻辑这是角度触发生命周期钩子的方式吗？

【问题讨论】：

你看过文档了吗？

【参考方案1】：

好问题！ Angular 的生命周期钩子由 @angular/core 库 [source] 实现。

为了证明这一点，运行一个angular cli 项目并在（可选chrome）开发工具中，在生命周期钩子中放置一个换行符，如下所示：

刷新页面以捕获断点，从而查看调用堆栈：

Angular 团队显然写了冗长的代码，所以我认为不需要解释下面调用ngOnInit() 的语句的逻辑：

if ((view.state & ViewState.FirstCheck) && (def.flags & NodeFlags.OnInit)) 
    directive.ngOnInit();

这个函数的不错的打字稿版本可以在here找到。

【参考方案2】：

Angular.io 记录如下图，

这说明了生命周期钩子的层次结构

【参考方案3】：

图表包含所有 8 个生命周期钩子（方法）的列表以及它们执行的顺序。

应用程序首先通过调用其构造函数来实例化组件或指令，然后调用生命周期钩子。

黑色箭头表示实例化时遵循的路径。 加载组件或指令后，如果输入数据有任何变化，则所遵循的路径由红色箭头表示。