之前两篇博文,我试图将单向数据绑定的‘<’和’&’两种类型的数据绑定讲解清楚,但我发现,如果不理解Lifecycle Hooks, 还是很难搞清楚的,而且使得读者很容易绕进去的。所以本篇主要来探讨一下Lifecycle Hooks.
Lifecycle Hooks
如何理解Lifecycle Hooks,
- 玩过PHP的都知道PHP的魔术方法,在应用中有着相同的功效。
- 玩过Github的,应该有知道github中的 Web Hook。
在Angular 2 alpha release中首次提出了这个概念,有人说是受到了webcomponent中的一篇文章的启发(Introduction to Custom Elements). 那么问题来了,使用Angular1.x的如何升级进化到Angular2呢,为了解决这个问题,所以在Angular1.5.3也引入了Lifecycle-hooks。
Lifecycle Hooks在Angular组件的控制器中主要对外暴露了四个函数,分别为$onInit、$onChanges $onDestroy $postLink.
$onInit
主要作用是为component提供了一个初始化的地方,
我们通常是通过bindings: {}对象把我们需要的数据传递到组件中,
当bindings对象所有数据传递到组件内部后,$onInit自然就被调用了。
需要注意的是:
- $onInit 与 Angular2中的ngOnInit是对应的。
- 一个组件可以从另外一个组件中继承方法,该方法可以在$onInit Lifecycle hooks中直接使用($onInit + require)
这两点在以后的篇幅中有机会探讨。
$onChanges
在单向数据绑定中(one way data-binding),即’<’, 父组件向子组件传递的数据发生变化时, $onChanges会自动触发。
This new hook is similar to ng2’s ngOnChanges. It is called whenever one way bindings are updated, with a hash containing the changes objects.
在此之前,我们一般用$watch, $watchCollection去监控数据的变化
- $onChanges的参数中获取到一个变化对象, { previousValue, currentValue }
- $onChanges至少触发一次,
- 双向数据绑定(=),不再被提倡了,单向已经被认为是数据流的最佳方式,React,Angular 2 以及其他的类库都是用单向数据流(ps: 我们的code review中,发现这种形式的数据绑定是不被approve, 也就进不了master)
接下来,我们可以深入的理解一下这两篇文章了:
- One way data-binding in angular1.5.x — Part 1
- One way data-binding in angular1.5.x — Part 2
$onDestroy
$onDestroy() is a hook that is called when its containing scope is destroyed. We can use this hook to release external resources, watches and event handlers.
这个hook比较简单,就是用来释放和清理资源的。
1 | function MyCmpController($element) { |
$postLink
关于$postLink, 这里先占个位,后面抽时间来讲解。
– To be continued.