生命周期钩子函数

生命周期钩子函数，单从这个字面上理解，彷佛不太易懂，咱们来看vue的官网中介绍的：“每一个 Vue 实例在被建立时都要通过一系列的初始化过程——例如，须要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程当中也会运行一些叫作生命周期钩子的函数。”。看这些，也许并不那么好理解，咱们能够类比原生js里相似的行为，onload事件:

`

<script>
    window.onload = function () {
        console.log('DOM加载完毕才执行js')
    }
</script>
复制代码

`

上面是一个很简单的onload应用，w3c官网解释为：onload 事件会在页面或图像加载完成后当即发生,相信你们对它不陌生，也都会用。而vue的生命周期，或者说其它框架，react, angular，都是相似于这样的概念。好比vue的：created:

`

new Vue({
  data: {
    a: 1
  },
  created: function () {    // 这个是实例建立后的生命周期函数
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
复制代码

`

上面这个例子就是说，vue实例建立后，若是用es5面向对象的语法解释就是var instarce = new Vue() ,也就是说咱们new 完后拿到这个实例时触发的一个行为。angular建立实例后的初始化就是ngOnInit,react里的就是componentWillMount。

那么这三大框架各自都有哪些生命周期函数呢，它们的执行顺序是怎样的呢？下面看各自的介绍：

Vue生命周期函数：

vue生命周期函数，共有八个，执行顺序以下：

• beforeCreate 实例建立前；
• created 实例建立后；
• beforeMount 挂载DOM前；
• mounted 挂载DOM后，这个是最接近onload事件的；
• beforeUPdate 数据更新前；
• updated 数据更新后；
• beforeDestroy 实例销毁前；
• destroyed 实例销毁后；

这八个生命周期函数，根据不一样的业务需求，去写你的业务逻辑。在这里最经常使用的主要就是created和mounted这两个了。vue官网生命周期；

React生命周期函数：

react生命周期函数，执行顺序以下：

1. 组件加载时执行的生命周期函数：

• constructor 构造函数执行
• componentWillMount() 组件初始化时调用；
• render() 建立虚拟dom;
• componentDidMount() 组件渲染后调用，也就是咱们操做react dom时；

2. 组件数据更新的时候触发的生命周期函数：

• componentWillReceiveProps() 父组件改变props传值的数据时调用；
• shouldComponentUpdate(nextProps, nextState) 组件接受新的state或者props时调用;
• componentWillUpdate() 组件将要更新时调用;
• render() 组件渲染；
• componentDidUpdate(); 组件更新完成时调用；

3. 组件实例销毁时执行的生命周期函数：

• componentWillUnmount() 组件销毁时调用。

注意：shouldComponentUpdate(nextProps, nextState)生命周期函数是react性能优化很是重要的一环。组件接受新的state或者props时调用，咱们能够设置在此对比先后两个props和state是否相同，若是相同则返回false阻止更新，由于相同的属性状态必定会生成相同的dom树，这样就不须要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤为是在dom结构复杂的时候使用。react生命周期函数官网。

Angular生命周期函数

angular生命周期执行顺序以及应用时机：

• ngOnChanges() 当 Angular（从新）设置数据绑定输入属性时响应;
• ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性以后，初始化指令/组件;
• ngDoCheck() 检测，并在发生 Angular 没法或不肯意本身检测的变化时做出反应;
• ngAfterContentInit() 每当 Angular 把外部内容投影进组件/指令的视图以后调用；
• ngAfterContentChecked() 每当 Angular 完成被投影组件内容的变动检测以后调用;
• ngAfterViewInit() 每当 Angular 初始化完组件视图及其子视图以后调用;
• ngAfterViewChecked() 每当 Angular 作完组件视图和子视图的变动检测以后调用;
• ngOnDestroy() 每当 Angular 每次销毁指令/组件以前调用并清扫。

angular生命周期函数官网。

小结

生命周期钩子函数，其实指的就是咱们的组件实例化构建页面的一个过程和执行顺序，而后根据每一个阶段去作相应业务逻辑的处理，完成咱们的业务需求以及功能上的开发。本章节本人也是主要参考这三大框架的文档来写的，更多的目的是帮助前端小白同窗快速创建对生命周期这个概念的认识，若有不足烦请指正，谢谢。