React 的 useEffect Hook 簡化：像專業人士一樣管理副作用

了解 React 中的 useEffect：從零到英雄

React 已成為建立動態使用者介面最受歡迎的 JavaScript 函式庫之一。 React 中最重要的鉤子之一是 useEffect，它允許開發人員管理功能元件中的副作用。副作用包括獲取數據、設定訂閱或手動操作 DOM 等操作。在本部落格中，我們將深入探討 useEffect 是什麼、它是如何運作的，並提供逐步範例以更好地理解。

什麼是useEffect？

在 React 中，useEffect 是一個內建的鉤子，允許你在函數元件中執行副作用。顧名思義，副作用是影響函數外部某些內容的操作，例如 API 呼叫、計時器、日誌記錄或更新 DOM。

在 React 16.8 中引入 hooks 之前，您必須使用類別元件和生命週期方法（例如 componentDidMount、componentDidUpdate 和 componentWillUnmount）來處理副作用。現在，透過 useEffect，這些生命週期事件被組合成功能組件的單一函數。

為什麼選擇useEffect？

useEffect 是一個強大的 hook，用於管理 React 中的副作用，原因如下：

1. 簡化程式碼：它消除了對基於類別的元件和生命週期方法的需要，讓您可以編寫更乾淨、基於函數的程式碼。
2. 集中副作用：您可以在一個地方管理所有副作用，例如取得資料或更新 DOM。
3. 提高了可讀性：它簡化了生命週期事件的管理方式，使程式碼更具可讀性且更簡單。
4. 靈活性：使用useEffect，您可以更好地控制副作用的執行時間和頻率，因為您可以定義確定效果何時運行的依賴項。

它是如何運作的？

useEffect 鉤子接受兩個參數：

1. 效果函數： 此函數包含副作用邏輯，例如取得資料或設定訂閱。
2. 依賴數組（可選）： 決定何時重新運行效果的值數組。如果依賴陣列中的任何值發生變化，則效果將再次執行。如果省略此數組，效果將在每次渲染後運行。

這是基本結構：

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

例子：

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

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return <div>{data ? data.title : 'Loading...'}</div>;
}

在此範例中，首次渲染元件時從 API 取得數據，並將結果顯示在 UI 中。由於我們傳遞了一個空的依賴數組，因此該效果僅在第一次渲染後運行一次。

控制 useEffect 中的副作用

透過控制 useEffect 運行的時間，我們可以優化效能並確保副作用在正確的時間發生。

無需清理的效果

並非所有效果都需要清理。只有當您需要在執行效果後刪除或重設某些內容時才需要清理，例如清除計時器或取消訂閱資料流。

例如，這是一個不需要清理的場景：

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

function NoCleanupEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在這種情況下，每次計數狀態變化時都會運行效果。由於我們不設定訂閱或管理外部資源，因此無需進行清理。

清理效果

如果您的效果涉及設定訂閱或計時器，您可能需要在效果後進行清理。例如，想像一個我們想要設定計時器的場景：

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

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return <div>{time} seconds have passed</div>;
}

這是發生的事情：

1. setInterval 函數設定一個每秒遞增時間的計時器。
2. cleanup函數（由useEffect傳回）清除組件卸載時的間隔。這可確保計時器在組件移除後不會繼續運作。

使用效果場景範例

讓我們探討一些 useEffect 特別有用的常見場景。

取得組件掛載數據

在元件安裝時取得資料是 useEffect 最常見的用例之一。

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

更新 DOM

渲染後，您可以使用 useEffect 手動操作 DOM，不過應該謹慎執行此操作，因為 React 可以有效管理 DOM。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

組件卸載時的清理

如果您有需要清理的訂閱或事件監聽器等資源，可以使用 useEffect 中的返回函數來處理。

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

FAQs

1. What happens if I omit the dependency array in useEffect?

If you omit the dependency array, useEffect will run after every render, which can cause performance issues for expensive side effects like API calls.

2. Can I run useEffect only once?

Yes, passing an empty dependency array [] ensures that the effect runs only once after the component mounts.

3. What is the cleanup function in useEffect?

The cleanup function is a way to undo the effect when the component unmounts or before the effect runs again. It’s useful for cleaning up timers, event listeners, or subscriptions.

---

In conclusion, useEffect is a powerful and flexible hook that simplifies managing side effects in React. By controlling when side effects run and cleaning up when necessary, you can optimize your components and avoid unnecessary re-renders or memory leaks. Experiment with the examples above to master the art of side effect management!

以上是React 的 useEffect Hook 簡化：像專業人士一樣管理副作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！