React：componentDidMount 與 useEffect

導言 - Lead paragraph

在 React 開發中，處理組件的生命週期和副作用操作是至關重要的。

componentDidMount 是 Class 組件提供的生命週期方法之一，而 useEffect 則是函數組件中引入的重要特性。

兩者都用於在組件渲染後執行程式碼，但它們在語法和功能上有一些差異。

Class 組件中的 componentDidMount

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("Component mounted");
  }

  render() {
    return <div>My Component</div>;
  }
}

componentDidMount 是 Class 組件中的生命週期方法之一，在組件首次渲染後立即執行。

它是執行副作用操作的理想地點，比如資料獲取、訂閱事件等。這個方法只會在組件掛載（即渲染到 DOM 中）後執行一次。

函數組件中的 useEffect

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log("Component mounted");
  }, []);

  return <div>My Component</div>;
}

useEffect 是 React 函數組件中的 hook 函數，用於處理副作用操作。

通過傳遞一個回調函數作為第一個參數，在這個回調函數中可以執行副作用操作。

第二個參數是一個數組，用來指定在何時觸發這個回調函數。

當傳遞一個空數組 [] 作為第二個參數時，回調函數只在組件首次渲染後執行一次，模擬了 componentDidMount 的行為。

比較和對比

1. 語法和寫法： componentDidMount 是 Class 組件的生命週期方法，而 useEffect 是函數組件中的 React hook。前者是方法，後者是函數，因此它們的寫法和語法有所不同。
2. 執行時機： componentDidMount 只會在組件首次渲染後執行一次，它是執行副作用操作的適合時機。相比之下，useEffect 的執行時機更靈活，可以透過第二個參數的設定來控制何時執行，包括只在首次渲染後執行。
3. 程式碼組織： 在函數組件中，可使用多個 useEffect hook 來區分不同的副作用操作，而在 Class 組件中，需要將所有的副作用操作集中在一個 componentDidMount 方法中。
4. 清理操作： 如果在 useEffect 內部返回一個清理函數，該函數會在組件卸載或下一次副作用執行之前執行。在 Class 組件中，清理操作需要在 componentWillUnmount 生命週期方法中處理。

結論 - Concluding

componentDidMount 和帶有空數組 [] 作為依賴的 useEffect 都可實現在首次渲染後執行程式碼的目的。

然而在現代的 React 開發中，使用 useEffect hook 能更加靈活地處理副作用操作，並且更符合函數組件的開發範式。

開發者可以根據自己的項目需求和代碼組織風格，選擇適合的方法來執行首次渲染後的操作。