1. 引言

在 React 16.8 版本之前，開發者主要通過類組件（Class Component）來管理組件的生命周期，使用如 componentDidMount、componentDidUpdate 和 componentWillUnmount 等方法來處理副作用（Side Effects）。 然而，類組件的結構往往較為復雜，難以復用邏輯。 為了解決這些問題，React 引入了 Hooks，允許在函數組件（Function Component）中使用狀態和其他 React 特性。 其中，useEffect 是一個用于處理副作用的 Hook，可以替代類組件中的生命周期方法。([GeeksforGeeks][1])

本文將詳細介紹如何使用 useEffect Hook 來模擬類組件的生命周期方法，并提供相應的示例代碼。

---

2. useEffect 概述

useEffect 是一個用于在函數組件中處理副作用的 Hook。 它的基本語法如下：

useEffect(() => {// 副作用邏輯return () => {// 清理邏輯（可選）};
}, [依賴項]);

• 副作用邏輯：在組件渲染后執行的代碼，例如數據獲取、訂閱等。
• 清理邏輯：在組件卸載或依賴項變化前執行的代碼，用于清理副作用。
• 依賴項數組：指定副作用函數的依賴項，只有當依賴項發生變化時，副作用函數才會重新執行。

通過配置依賴項數組，可以控制副作用函數的執行時機，從而模擬類組件的生命周期方法。

---

3. 模擬類組件的生命周期方法

3.1 模擬 componentDidMount

要在組件掛載后執行副作用，可以傳遞一個空數組 [] 作為 useEffect 的第二個參數：

import React, { useEffect } from 'react';function Example() {useEffect(() => {console.log('組件已掛載');// 執行初始化操作，例如數據獲取}, []); // 空數組確保只在掛載時執行一次return <div>示例組件</div>;
}

此效果函數僅在組件首次渲染后執行一次，類似于 componentDidMount。

3.2 模擬 componentDidUpdate

要在特定狀態或屬性更新后執行副作用，可以將這些依賴項包含在依賴數組中：

import React, { useState, useEffect } from 'react';function Example({ someProp }) {const [count, setCount] = useState(0);useEffect(() => {console.log('count 或 someProp 發生了變化');// 執行更新后的操作}, [count, someProp]); // 僅在 count 或 someProp 變化時執行return (<div><p>計數：{count}</p><button onClick={() => setCount(count + 1)}>增加</button></div>);
}

此效果函數在 count 或 someProp 發生變化后執行，類似于 componentDidUpdate。

3.3 模擬 componentWillUnmount

要在組件卸載前執行清理操作，可以在 useEffect 中返回一個清理函數：

import React, { useEffect } from 'react';function Example() {useEffect(() => {// 設置訂閱或事件監聽器const handleResize = () => {console.log('窗口大小發生變化');};window.addEventListener('resize', handleResize);// 返回清理函數return () => {console.log('組件將卸載，清理副作用');window.removeEventListener('resize', handleResize);};}, []); // 空數組確保僅在掛載和卸載時執行return <div>示例組件</div>;
}

此清理函數在組件卸載前執行，類似于 componentWillUnmount。

---

4. 多個 useEffect 的使用

在一個組件中，可以使用多個 useEffect 來分別處理不同的副作用邏輯：

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);const [name, setName] = useState('React');useEffect(() => {console.log('count 發生了變化');}, [count]);useEffect(() => {console.log('name 發生了變化');}, [name]);return (<div><p>計數：{count}</p><button onClick={() => setCount(count + 1)}>增加計數</button><p>名稱：{name}</p><button onClick={() => setName('Hooks')}>更改名稱</button></div>);
}

通過使用多個 useEffect，可以將副作用邏輯進行分離，增強代碼的可讀性和可維護性。

---

5. 注意事項

• 避免在循環或條件語句中調用 useEffect：useEffect 應該在組件的頂層調用，不能在循環、條件語句或嵌套函數中調用。
• 依賴數組的正確使用：確保將所有在效果函數中使用的外部變量添加到依賴數組中，以避免潛在的錯誤。
• 清理副作用：在 useEffect 中返回清理函數，以防止內存泄漏或不必要的副作用。

---

6. 總結

通過使用 useEffect，函數組件可以實現與類組件相同的生命周期行為，從而更簡潔地管理副作用。 useEffect 的靈活性使得開發者可以根據需要精確控制副作用的執行時機，提升了代碼的可維護性和可讀性。