Angular中Constructor 和 ngOnInit 的本质区别
在Medium看到一篇Angular的文章,深入对比了 Constructor 和 ngOnInit 的不同,受益匪浅,于是搬过来让更多的前端小伙伴看到,翻译不得当之处还请斧正。
本文出处:The essential difference between Constructor and ngOnInit in Angular
难以译出原意的术语都在圆括号里给出原词了。下面开始正文!
***
在stackoverflow上被问得很多的一个关于Angular的问题就是Difference between Constructor and ngOnInit,阅读量超过10万。我回答了这个问题,但还是决定在这篇文章展开讲一下。这上面的很多答案和网上的一些文章都把关注点放在这两者用法的区别上,在这里我想给出一个深入到组件初始化进程的更全面的答案。
JS和TS语言的区别
让我们从语言本身最明显的区别开始。在一个类中,ngOnInit
只是一个在结构上与其他方法不一样的方法。Angular团队只是这样命名它,但它也可以有其他任何名字:
class MyComponent {
ngOnInit() { }
otherNameForNgOnInit() { }
}
在一个组件类中引不引入这个方法完全取决于你。编译过程中Angular编译器会检查组件是否引入了这个方法,然后用合适的标记去标记这个类:
export const enum NodeFlags {
...
OnInit = 1 << 16,
在变更检测过程中,在组件实例内,这个标记会被用来决定是否调用ngOnInit
方法:
if (def.flags & NodeFlags.OnInit && ...) {
componentClassInstance.ngOnInit();
}
相反,constructor是个不同的东西。在一个TypeScript类实例化过程中,无论写不写constructor,它都会被调用。这就是为什么一个TypeScript类的constructor会被转译成一个 JavaScript constructor function:
class MyComponent {
constructor() {
console.log('Hello');
}
}
转译成
function MyComponent() {
console.log('Hello');
}
在创建类实例时这个函数会被用new
操作符调用:
const componentInstance = new MyComponent(
所以,如果你在类中省略constructor,这个类会被转译成一个空函数:
function MyComponent() {}
这就是为什么我说在类中无论写不写constructor,它都会被调用。
组件初始化进程的区别
从组件初始化阶段的角度看,两者存在巨大差别。Angular bootstrap process(译注:这个比较微妙,不知道怎么翻译,暂且译作引导进程吧)包含两个主要阶段:
- 构造组件树
- 运行变更检测
而且,组件的constructor会在Angular构造组件树的时候被调用。所有生命周期钩子包括ngOnInit
会被作为接下来的变更检测阶段的一部分被调用。通常,组件初始化逻辑需要一些依赖注入提供商(DI providers),或者可用的输入绑定,或者已渲染的DOM,在Angular 引导进程的不同阶段,这些都是可用的。
Angular构造组件树的时候,根模块注入器就已经配置好,所以你可以注入任何全局依赖。而且,当Angular实例化一个子组件类的时候,父组件的注入器也已经配置好,所以你可以注入父组件中定义的提供商(providers),包括父组件自身。组件的constructor是在注入器的上下文中被调用的唯一方法,所以如果你需要任何依赖,constructor是唯一获得这些依赖的地方。@Input
的通信机制(communication mechanism)是作为接下来的变更检测阶段的一部分处理的,所以输入绑定在constructor中不可用。
Angular开始变更检测的时候组件树已经构造完毕,在组件树中的所有组件的constructor都会被调用。而且这时候所有组件的模板节点(template nodes)也已经添加到DOM中,这时,初始化组件的所有数据都已齐全——依赖注入提供商、DOM和输入绑定( DI providers, DOM and input bindings)。
你可以在Everything you need to know about change detection in Angular学习关于变更检测的知识,在The mechanics of property bindings update in Angular学习Angular进程如何输入。
我们用个简单例子证明这些阶段。假设有如下模板:
<my-app>
<child-comp [i]='prop'>
Angular开始引导应用程序。如上所述,它首先创建每个组件的类,因此调用MyAppComponent
的constructor。当执行组件的constructor时,Angular resolves(译注:这个词不知道怎么翻译比较准确,就直接用原文了) 所有注入到MyAppComponent
constructor的依赖,并把他们作为参数提供出来(译注:这里翻译的比较拗口,原文是When executing a component constructor Angular resolves all dependencies that are injected into MyAppComponent constructor and provides them as parameters)。并且它会创建一个作为my-app
宿主元素的DOM节点,然后它继续创建child-comp
的宿主元素,并且调用ChildComponent
的constructor。在这个阶段,Angular不关心i
输入绑定和任何生命周期钩子。所以当这个过程完成的时候,Angular就创建出了如下组件视图树:
MyAppView
- MyApp component instance
- my-app host element data
ChildComponentView
- ChildComponent component instance
- child-comp host element data
直到那时Angular才会运行变更检测、更新my-app
的绑定、调用MyAppComponent
实例的ngOnInit
。然后它继续更新child-comp
的绑定和调用ChildComponent
类的ngOnInit
。
你可以在Here is why you will not find components inside Angular了解更多知识。
用法上的区别
现在从用法的角度看看两者的区别。
Constructor
在Angular中,一个类的constructor主要用来注入依赖。Angular调用constructor injection pattern在这里已经解释得很详细,更深入的见解你可以读Miško Hevery的文章Constructor Injection vs. Setter Injection。
然而,constructor的使用不仅限于依赖注入(DI)。举个例子,@angular/router
模块的router-outlet
指令在路由生态系统内用constructor来注册自己和自己的位置(viewContainerRef)。我在Here is how to get ViewContainerRef before @ViewChild query is evaluated把它描述了一遍。
惯例就是,在constructor中,逻辑应尽可能少。
NgOnInit
前文我们看到,当Angular调用ngOnInit
的时候,它已经通过constructor完成创建组件DOM、注入所有必要的依赖,也已经完成输入绑定。这时所有必需信息已经齐全,这些信息使得ngOnInit
成为执行初始化逻辑的好地方。
习惯上用ngOnInit
来执行初始化逻辑,即使这些逻辑不依赖于依赖注入(DI)、DOM或者输入绑定。
Angular中Constructor 和 ngOnInit 的本质区别的更多相关文章
- 【转】Angular之constructor和ngOnInit差异及适用场景
原文:http://liuwenzhuang.github.io/2016/03/04/angular2-constructor-versus-ngOnInit.html -------------- ...
- Angular之constructor和ngOnInit差异及适用场景(转)
原始地址:https://blog.csdn.net/u010730126/article/details/64486997 Angular中根据适用场景定义了很多生命周期函数,其本质上是事件的响应函 ...
- Angular之constructor和ngOnInit差异及适用场景
constructor会在类生成实例时调用,Angular无法控制constructor,constructor中应该只进行依赖注入而不是进行真正的业务操作 ngOnInit属于Angular生命周期 ...
- 支付宝接入文档中TRADE_SUCCESS和TRADE_FINISHED的本质区别
之前一直不知道这2种状态到底有什么不同.支付宝中担保交易和即时到账交易对其的描述为: TRADE_SUCCESS 交易成功(或支付成功) TRADE_FINISHED 交易完成 一头雾水... ...
- VS中的Debug 和 Release 编译方式的本质区别
VS中的Debug 和 Release 编译方式的本质区别 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序.Release 称为发布版本,它往往是进行了各种优化,使 ...
- angular 2+ 变化检测系列三(Zone.js在Angular中的应用)
在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...
- angular中的服务
angular中的服务 angular中的服务相当于一个状态管理,可以将数据放在服务里面进行获取以及编辑. 服务的安装命令: ng g service count 安装好后,会在服务的ts文件中引入一 ...
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
- Angular中的$q的形象解释及深入用法
作者:寸志链接:https://zhuanlan.zhihu.com/p/19622332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 早上,老爸说:“儿子,天气如何 ...
随机推荐
- html5图片上传时IOS和Android均显示摄像头拍照和图片选择
最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料,改为 ...
- 【机器学习】反向传播算法 BP
知识回顾 1:首先引入一些便于稍后讨论的新标记方法: 假设神经网络的训练样本有m个,每个包含一组输入x和一组输出信号y,L表示神经网络的层数,S表示每层输入的神经元的个数,SL代表最后一层中处理的单元 ...
- 关于MySQL latch争用深入分析与判断
1.latch锁是什么锁? 2.latch锁是如何保护list? 3.latch争用的现象和过程? 4.latch什么时候会产生严重的争用? 5.如何监控latch争用情况? 6.如何确认latch争 ...
- SSD的传输总线、传输协议、传输接口
前言:关于SSD,有众多总线类型.协议类型.接口类型,每个接口还包括不同型号,在这里花点时间全部整理一下,整理日期2017-08-08. 1.传输总线 总线就像一条公路,公路上的车好比总线上的电信号: ...
- Oracle sql 查询结果某一列字段合并成为一条数据
使用oracle中自带函数 wmsys.wm_concat(需合并列的字段名) 用法如下: select code,name,wmsys.wm_concat(baname) from tab gro ...
- POJ-1915 Knight Moves (BFS)
Knight Moves Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 26952 Accepted: 12721 De ...
- MSYS2使用教程
一.安装 官方下载地址 http://www.msys2.org/ 指定好安装路径(一般D根目录即可),一路下一步就好. 二.配置国内镜像 使用[清华大学开源软件镜像站]中的地址,修改\etc\pac ...
- 两个List比较各自对象的属性相同的问题
最近做checkbox默认勾选的时候,涉及到两个list直接比较彼此对象的Id属性是否相同的问题.能力有限,想到这个笨方法. 创建一个Bean: public class Bean { private ...
- 社群系统 ThinkSNS+ 中如何利用 Laravel 表单验证来验证用户名的?(我朝独有需求,两个字母占一个汉字。。。)
ThinkSNS+后端框架使用laravel,每周和 laravel master 保持同步,而后台和 html 5 则采用 vue 开发.语言特性方面,采用 php 7 的严格模式. 言归正传,之所 ...
- 理解javascript中的回调函数(callback)
以下内容来源于:http://www.jb51.net/article/54641.htm 最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs ...