useEffect 鉤子是 React 的基本組成部分，可讓您在功能元件中執行副作用。詳細分析如下：

什麼是useEffect？

• useEffect 掛鉤可讓您在元件中執行副作用，例如資料擷取、訂閱或手動變更 DOM。
• 可以認為是生命週期方法 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。

句法

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

參數

1. 效果函數：第一個參數是包含副作用程式碼的函數。該函數將在渲染提交到螢幕後運行。

2. 清理函數（可選）：效果函數可以傳回一個清理函數，React 將在元件卸載時或效果再次運行之前呼叫函數。這對於清理訂閱或計時器很有用。

3. 依賴關係數組：第二個參數是依賴關係數組。僅當依賴項之一發生變更時，該效果才會運作。如果傳遞空數組 ([])，則效果僅在初始渲染後執行一次（如 componentDidMount）。

使用範例

1. 基本範例：在掛載上取得數據

import React, { useEffect, useState } from 'react';

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return 
{data ? JSON.stringify(data) : 'Loading...'}
;
};

1. 清理範例：訂閱事件

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return 
Resize the window and check the console.
;
};

1. 依賴範例：根據道具更改運作效果

import React, { useEffect, useState } from 'react';

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount   1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return 
Count: {count}
;
};

最佳實踐

• 指定依賴項：始終在依賴項數組中包含效果所依賴的變量，以避免過時的閉包。
• 避免渲染中的副作用：將副作用排除在渲染階段之外；使用 useEffect 代替。
• 使用清理函數：如果您的效果建立訂閱或計時器，請務必傳回清理函數以避免記憶體洩漏。

結論

useEffect hook 是一個強大的工具，用於處理功能元件中的副作用，這使得它對於現代 React 開發至關重要。透過了解其語法和最佳實踐，您可以有效地管理元件行為和副作用。