angular 实际上是如何触发生命周期挂钩的？

Question

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

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

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

Answer 1

Angular.io 如下图所示，

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

Answer 2

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

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

刷新页面捕捉断点，查看调用栈：

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

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

可以找到此函数的漂亮 typescript 版本 here。

Answer 3

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

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

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