[Angular] Some performance tips

本文详细解析了Angular组件的生命周期,特别是constructor与ngOnInit的区别及其应用场景。此外还介绍了如何使用NgZone来控制变更检测,并给出了关于jQuery插件使用的建议。

The talk from here.

 

1. The lifecycle in Angular component:

constructor vs ngOnInit:

Constructor: only used for injection.

ngOnInit: for data initlization.

 

About ngOnInit: 

I am not sure the example is good or not. Because it is not a good choice to use 'document.querySelector'.

this.elDuceDateContainer = document.querySelector('.dueDatePopover-container')

I would rather use 'ref' or '@ViewChild'. But might be it is a good adivse that avoid init too many variable in ngOnInit if not going to use right away.


 

You have to know that why change detection works. It handle async code and setTimeout, setTimeInterval, DOM event, mouse event... they are all async opreations.

So it will trigger change detection. 

If you have to use setTimeout in your component, and you don't want change detection to detect the changes, you can use NgZone to make it run outside the change detection.

constructor(private ngZone: NgZone) {}

ngAfterViewInit() {
  this.ngZone.runOutsideAngular(() => this.paint());
} 

 

Noramlly I won't use any jQuery plugin. But take this as an advise.

 

转载于:https://www.cnblogs.com/Answer1215/p/6471365.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值