一、概述

useEffect是React提供的一個Hook，用于在函數組件中執行副作用操作。副作用操作通常包括數據獲取、訂閱事件、手動操作DOM等。useEffect可以讓我們在函數組件中模擬類組件的生命周期方法（如componentDidMount、componentDidUpdate、componentWillUnmount）。

二、useEffect的基本用法和常見場景

1、基本用法：

import React, { useEffect } from 'react';function MyComponent() {useEffect(() => {// 在組件渲染后執行副作用操作console.log('Component did mount');return () => {// 在組件卸載前執行清理操作console.log('Component will unmount');};}, []); // 第二個參數是依賴數組，當依賴發生變化時才會重新執行effectreturn <div>My Component</div>;
}

2、數據獲取：

import React, { useState, useEffect } from 'react';function DataFetchingComponent() {const [data, setData] = useState(null);useEffect(() => {fetch('請求接口地址').then(response => response.json()).then(data => setData(data));}, []); // 只在組件掛載時獲取數據return (<div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>);
}

3、監聽狀態變化：

import React, { useState, useEffect } from 'react';function CounterComponent() {const [count, setCount] = useState(0);useEffect(() => {console.log('Count has changed:', count);}, [count]); // 監聽count的變化，變化則useEffect重新執行return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

4、清理副作用：

import React, { useEffect } from 'react';function TimerComponent() {useEffect(() => {const timer = setInterval(() => {console.log('Tick');}, 1000);return () => {clearInterval(timer); // 清除定時器};}, []); // 只在組件掛載時設置定時器return <div>Timer Component</div>;
}

通過useEffect，我們可以在函數組件中處理各種副作用操作。