React
[React] Hooks
useEffect

useEffect

useEffect は、関数コンポーネントで副作用を制御できるフックです。副作用とは、DOM の変更やファイルへの書き込みなど、関数の外に影響を与える処理を指します。useEffect を使用すると、関数を実行するタイミングを React のレンダリング後まで遅らせることが可能です。 使用 useEffect 的話就能把 function 的執行延到 render 之後。

useEffect 能有模擬初始化、更新和清理操作，一連串的生命週期行為。

將 function 的執行延遲到渲染之後有幾個好處

  • 避免阻塞渲染： 如果某些操作會阻塞渲染過程，將它們放在 useEffect 中可以確保渲染不受影響。

  • 確保 DOM 準備就緒： 如果操作需要訪問 DOM 元素，使用 useEffect 可以確保在 DOM 準備就緒後再執行。

  • 避免不必要的執行： useEffect 允許您指定依賴項，只有在這些依賴項更改時才執行函數，這可以節省不必要的計算或渲染。

  • 處理非同步操作： 您可以在 useEffect 中進行非同步操作，例如數據加載或 API 調用，以確保它們不會阻塞渲染。

    總之，使用 useEffect 可以更好地控制 React 組件的生命週期，並確保在渲染完成後執行必要的操作。

useEffect 的使用例

useEffect 是 React 中的一個 Hook，用於在 functional component 中執行 side effects（副作用）。副作用指的是在 component 渲染過程中，執行與渲染無關的操作，例如 API 資料加載、訂閱事件、手動修改 DOM 等。

useEffect 接受一個函數作為參數，以及一個依賴數組（可選）。函數中可以包含任何副作用程式碼，而依賴數組則指定了影響該副作用的變數，當這些變數發生改變時，副作用會重新執行。

以下是一些 useEffect 的使用例子：

  1. 資料加載：在 component 加載時，使用 useEffect 來發送資料請求並更新 state。
import React, { useState, useEffect } from "react";
 
function MyComponent() {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    fetchData(); // 呼叫資料請求函數
  }, []); // 空的依賴數組表示只在 component 加載時執行一次
 
  const fetchData = async () => {
    const response = await fetch("https://api.example.com/data");
    const result = await response.json();
    setData(result);
  };
 
  return <div>{/* 使用 data 來渲染UI */}</div>;
}
  1. 訂閱事件：在 component 加載時訂閱事件，在 component 卸載時取消訂閱。
import React, { useState, useEffect } from "react";
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
 
    return () => {
      clearInterval(interval); // 在 component 卸載時清除定時器
    };
  }, []); // 空的依賴數組表示只在 component 加載時執行一次
 
  return (
    <div>
      <p>{count}</p>
    </div>
  );
}
  1. 手動修改 DOM：使用 useEffect 來操作 DOM 元素。
import React, { useRef, useEffect } from "react";
 
function MyComponent() {
  const inputRef = useRef(null);
 
  useEffect(() => {
    inputRef.current.focus(); // 在 component 加載時將焦點設置到輸入框
  }, []); // 空的依賴數組表示只在 component 加載時執行一次
 
  return (
    <div>
      <input ref={inputRef} type="text" />
    </div>
  );
}

這些例子展示了 useEffect 的幾種常見使用情境，你可以根據你的需求自由地使用它來處理副作用。

References

useContextuseRef