首先要先來介紹 useEffect。

基本上他們三個（componentDidMount()/componentDidUpdate()/componentWillUnmount()）的功能都能利用useEffect來取代

useEffect長相如下，不過仍可以透過第二個參數的有無來達到 生命週期的型態，比較特別的是當我一個 event 導致了兩個dependency的 state 同時改變，卻只會觸發一次 useEffect ，很有趣吧。（還是其實只有我不知道

useEffect(() => {
  // ...
}, [dependency]);
// 有值表示，當dependency改變時這個 useEffect 會被觸發

接下來開始利用 hook 來呈現生命週期囉

Mount：元件被渲染到畫面上
我們可以利用 const [state, setState] = useState(initialState);
來達到 constructor() 相同效果，建立state 且賦予初始值，而 useState 的 setState 就等於 class component 裡的this.setState({ key: value })
useEffect部分： dependency設定為空，僅載入時觸發⇒componentDidMount()

useEffect(() => {
  // ...
}, []);

⇩
Update：元件的內容因為資料的更動而重新渲染
無設定dependency，有任何useState 改變即觸發，若在這裡放進了setState ，也會踩進無限迴圈的雷。⇒componentDidUpdate()

useEffect(() => {
  // ...
});

⇩
Unmount
useEffect裡增加了 return ， component 從畫面上消失時被觸發（嚴格說起來是不再引用該 component 時被觸發）⇒componentWillUnmount()

useEffect(() => {
  return (() => {
      // ...
    });
}, []);

// 所以利用 useEffect 也能將 componentDidMount()＆componentWillUnmount()寫一起
useEffect(() => {
  // componentDidMount()
  return (() => {
      // componentWillUnmount
    });
}, []);

這邊有codePen可以配合服用。
感謝閱讀～