Angular React Vue 比较 – 组件篇之生命周期_angular 生命周期对标vue

三大框架中实例化组件并渲染组件视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，框架会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当从应用中销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。

我们的应用可以使用生命周期钩子方法来触发组件生命周期中的关键事件，以初始化新实例，需要时启动变更检测，在变更检测过程中响应更新，并在删除实例之前进行清理。

三大框架关于组件生命周期钩子各不相同，但是对于我们来说最常用到的是挂载、更新和卸载这几个钩子，本章将对这三个钩子来做比较。

Angular 组件生命周期钩子

在这里，我们先列出 Angular 组件生命周期中的钩子，下表中的关于钩子的次序就是组件在生命周期中的执行顺序。

在 Angular 的组件生命周期中并没有称之为挂载、更新和卸载的钩子，为了更方便的在三个框架中做对比，我们把它生命周期中类似于这几个功能的钩子称之为挂载、更新和卸载。

挂载钩子

ngAfterViewInit 钩子会在完全初始化了组件的视图后调用，它只会调用一次。这个钩子中没有参数。

更新钩子

ngOnChanges 钩子会在组件的输入属性发生了变化时调用，它会在组件初始化之前先调用一次。ngOnChanges() 方法获取了一个对象，它把每个发生变化的属性名都映射到了一个 SimpleChange 对象，该对象中有属性的当前值和前一个值。这个钩子会在这些发生了变化的属性上进行迭代，并记录它们。

如果组件并没有绑定任何输入属性，那么此钩子不会被调用。

需要注意的是在 Angular 组件的生命周期中并没有组件自身属性变化后可调用的钩子，如果要监测组件自身属性的变化，可以使用 RxJS 库来创建和订阅可观察的对象。

卸载钩子

ngOnDestroy 钩子会在组件实例被销毁后调用，这个钩子中没有参数。

React 组件生命周期钩子

和其他两个框架不一样，在 React 的函数式组件中并没有可调用的生命周期钩子。想要实现类似挂载、更新和卸载功能的钩子可以使用 useEffect 钩子。

需要注意的是，在编写和读取 Effect 时，要独立地考虑每个 Effect（如何开始和停止同步），而不是从组件的角度思考（如何挂载、更新或卸载）。在本章中是为了与其他两个框架做比较，才从组件的角度来使用 Effect 的。

在这里我们提供一段使用 useEffct 来实现上述三个钩了的示例。

import { useState, useEffect } from 'react';
 
export default function Clock({ time }) {
  const [index, setIndex] = useState(0);
 
  useEffect(() => {
    // 【更新钩子】当props与state变更、组件渲染后执行
  });
 
  useEffect(() => {
    // 【挂载钩子】组件渲染后仅执行一次
    
    return () => {
      // 【卸载钩子】组件在卸载后执行
    }
  }, []);
 
  useEffect(() => {
    // 【更新钩子】仅在index变更，组件渲染后执行
  }, [index]);
 
  function handleClick() {
    setIndex(index + 1);
  }
 
  return (
    <>
      <button onClick={handleClick}>
        Next
      </button>
      <p>{index}</p>
      <div>{time}</div>
    <>
  );
}

挂载钩子

使用 useEffect 钩子，第二个参数传递 [] 时，会在组件渲染后仅调用一次这个钩子。

useEffect(() => {
    // 【挂载钩子】组件渲染后仅执行一次
}, []);

更新钩子

使用 useEffect 钩子，不传递第二个参数时，会在 props 或 state 发生变更、组件渲染后调用这个钩子。

useEffect(() => {
    // 【更新钩子】当props与state变更、组件渲染后执行
});

卸载钩子

在 useEffect 钩子中添加返回的函数会在组件被卸载后执行。

useEffect(() => {
    // 【卸载钩子】组件在卸载后执行
});

Vue组件生命周期钩子

在这里，我们先列出 Vue 组件生命周期中的钩子，下表中的关于钩子的次序就是组件在生命周期中的执行顺序。这些钩子都应该在组件的 setup() 阶段被同步调用。

挂载钩子

onMounted 钩子在组件挂载完成后调用，它只会执行一次。

更新钩子

onUpdated 钩子在组件因为响应式状态变更而更新其 DOM 树之后调用。

卸载钩子

onUnmounted 钩子在组件实例被卸载之后调用。

小结

本章介绍了三大框架组件的生命周期中的钩子，对挂载、更新与卸载钩子做了重点说明。

Angular 中是类组件，实例化的组件可以理解成一个类的对象，把组件实例生命周期的钩子当成对象的方法考虑会更好理解。

React 函数组件中并没有可以调用的生命周期钩子，在编写和读取 Effect 时，要独立地考虑每个 Effect（如何开始和停止同步），而不是从组件的角度思考（如何挂载、更新或卸载）。

Vue 组件生命周期中关于挂载、更新和卸载的钩子符合我们的直观描述，更好理解一些。

文章参考链接：

• https://angular.cn/guide/lifecycle-hooks
• https://angular.cn/api/core/OnChanges
• https://angular.cn/api/core/AfterViewInit
• useEffect – React 中文文档
• 使用 Effect 同步 – React 中文文档
• 响应式 Effect 的生命周期 – React 中文文档
• useEffect – React 中文文档
• 生命周期钩子 | Vue.js