三大框架中實例化組件并渲染組件視圖時，組件實例的生命周期就開始了。生命周期一直伴隨著變更檢測，框架會檢查數(shù)據(jù)綁定屬性何時發(fā)生變化，并按需更新視圖和組件實例。當從應用中銷毀組件實例并從 DOM 中移除它渲染的模板時，生命周期就結(jié)束了。

我們的應用可以使用生命周期鉤子方法來觸發(fā)組件生命周期中的關鍵事件，以初始化新實例，需要時啟動變更檢測，在變更檢測過程中響應更新，并在刪除實例之前進行清理。

三大框架關于組件生命周期鉤子各不相同，但是對于我們來說最常用到的是掛載、更新和卸載這幾個鉤子，本章將對這三個鉤子來做比較。

Angular 組件生命周期鉤子

在這里，我們先列出 Angular 組件生命周期中的鉤子，下表中的關于鉤子的次序就是組件在生命周期中的執(zhí)行順序。

在 Angular 的組件生命周期中并沒有稱之為掛載、更新和卸載的鉤子，為了更方便的在三個框架中做對比，我們把它生命周期中類似于這幾個功能的鉤子稱之為掛載、更新和卸載。

掛載鉤子

ngAfterViewInit 鉤子會在完全初始化了組件的視圖后調(diào)用，它只會調(diào)用一次。這個鉤子中沒有參數(shù)。

更新鉤子

ngOnChanges 鉤子會在組件的輸入屬性發(fā)生了變化時調(diào)用，它會在組件初始化之前先調(diào)用一次。ngOnChanges() 方法獲取了一個對象，它把每個發(fā)生變化的屬性名都映射到了一個 SimpleChange 對象，該對象中有屬性的當前值和前一個值。這個鉤子會在這些發(fā)生了變化的屬性上進行迭代，并記錄它們。

如果組件并沒有綁定任何輸入屬性，那么此鉤子不會被調(diào)用。

需要注意的是在 Angular 組件的生命周期中并沒有組件自身屬性變化后可調(diào)用的鉤子，如果要監(jiān)測組件自身屬性的變化，可以使用 RxJS 庫來創(chuàng)建和訂閱可觀察的對象。

卸載鉤子

ngOnDestroy 鉤子會在組件實例被銷毀后調(diào)用，這個鉤子中沒有參數(shù)。

React 組件生命周期鉤子

和其他兩個框架不一樣，在 React 的函數(shù)式組件中并沒有可調(diào)用的生命周期鉤子。想要實現(xiàn)類似掛載、更新和卸載功能的鉤子可以使用 useEffect 鉤子。

需要注意的是，在編寫和讀取 Effect 時，要獨立地考慮每個 Effect（如何開始和停止同步），而不是從組件的角度思考（如何掛載、更新或卸載）。在本章中是為了與其他兩個框架做比較，才從組件的角度來使用 Effect 的。

在這里我們提供一段使用 useEffct 來實現(xiàn)上述三個鉤了的示例。

import { useState, useEffect } from 'react';

export default function Clock({ time }) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    // 【更新鉤子】當props與state變更、組件渲染后執(zhí)行
  });

  useEffect(() => {
    // 【掛載鉤子】組件渲染后僅執(zhí)行一次
    
    return () => {
      // 【卸載鉤子】組件在卸載后執(zhí)行
    }
  }, []);

  useEffect(() => {
    // 【更新鉤子】僅在index變更，組件渲染后執(zhí)行
  }, [index]);

  function handleClick() {
    setIndex(index + 1);
  }

  return (
    <>
      <button onClick={handleClick}>
        Next
      </button>
      <p>{index}</p>
      <div>{time}</div>
    <>
  );
}

掛載鉤子

使用 useEffect 鉤子，第二個參數(shù)傳遞 [] 時，會在組件渲染后僅調(diào)用一次這個鉤子。

useEffect(() => {
    // 【掛載鉤子】組件渲染后僅執(zhí)行一次
}, []);

更新鉤子

使用 useEffect 鉤子，不傳遞第二個參數(shù)時，會在 props 或 state 發(fā)生變更、組件渲染后調(diào)用這個鉤子。

useEffect(() => {
    // 【更新鉤子】當props與state變更、組件渲染后執(zhí)行
});

卸載鉤子

在 useEffect 鉤子中添加返回的函數(shù)會在組件被卸載后執(zhí)行。

useEffect(() => {
    // 【卸載鉤子】組件在卸載后執(zhí)行
});

Vue組件生命周期鉤子

在這里，我們先列出 Vue 組件生命周期中的鉤子，下表中的關于鉤子的次序就是組件在生命周期中的執(zhí)行順序。這些鉤子都應該在組件的 setup() 階段被同步調(diào)用。

掛載鉤子

onMounted 鉤子在組件掛載完成后調(diào)用，它只會執(zhí)行一次。

更新鉤子

onUpdated 鉤子在組件因為響應式狀態(tài)變更而更新其 DOM 樹之后調(diào)用。

卸載鉤子

onUnmounted 鉤子在組件實例被卸載之后調(diào)用。

小結(jié)

本章介紹了三大框架組件的生命周期中的鉤子，對掛載、更新與卸載鉤子做了重點說明。

Angular 中是類組件，實例化的組件可以理解成一個類的對象，把組件實例生命周期的鉤子當成對象的方法考慮會更好理解。

React 函數(shù)組件中并沒有可以調(diào)用的生命周期鉤子，在編寫和讀取 Effect 時，要獨立地考慮每個 Effect（如何開始和停止同步），而不是從組件的角度思考（如何掛載、更新或卸載）。

Vue 組件生命周期中關于掛載、更新和卸載的鉤子符合我們的直觀描述，更好理解一些。

文章參考鏈接：

• https://angular.cn/guide/lifecycle-hooks
• https://angular.cn/api/core/OnChanges
• https://angular.cn/api/core/AfterViewInit
• https://zh-hans.react.dev/reference/react/useEffect
• https://zh-hans.react.dev/learn/synchronizing-with-effects
• https://zh-hans.react.dev/learn/lifecycle-of-reactive-effects
• https://zh-hans.react.dev/reference/react/useEffect
• https://cn.vuejs.org/guide/essentials/lifecycle.html
• https://cn.vuejs.org/api/composition-api-lifecycle.html