探讨 Angular1.5 的 Lifecycle Hooks

之前两篇博文，我试图将单向数据绑定的‘<’和'&'两种类型的数据绑定讲解清楚，但我发现，如果不理解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比较简单，就是用来释放和清理资源的。

function MyCmpController($element) {

  var clickHandler = function () {
    // do something
  };

  this.$onInit = function () {
    $element.on('click', clickHandler);
  };

  this.$onDestroy = function () {
    $element.off('click', clickHandler);
  };
}

$postLink

关于$postLink, 这里先占个位，后面抽时间来讲解。

-- To be continued.

felix-cao / Blog