了解 React 中的 useEffect() Hook

React 在 16.8 版本中引入了 Hooks，最常用的 Hooks 之一是 useEffect()。 useEffect() Hook 讓我們在函數元件中執行副作用，例如取得資料、更新 DOM 或設定訂閱。

useEffect() 的工作原理
useEffect() Hook 接受兩個參數：

1. 函數：這是將要運行的效果。此函數在元件渲染（或重新渲染）後執行。您可以將其視為“副作用”邏輯。
2. 可選的依賴數組：這告訴 React 何時重新運行效果。如果您提供空數組 ([])，效果將僅在初始渲染後執行一次。

基本語法：

useEffect(() => {
  // Your side effect code here
}, [dependencies]);

範例1：取得資料

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((err) => setError("Error fetching data"));
  }, []);

  return (
    <div style="{{" maxwidth: margin: auto padding:>
      <h1 style="{{" textalign: marginbottom: color:>
        Users Data
      </h1>
      <h2 style="{{" textalign: marginbottom: color:>
        Understanding the useEffect() Hook in React By Sudhanshu Gaikwad
      </h2>

      {error ? (
        <p style="{{" color: textalign:>{error}</p>
      ) : (
        <table style="{{" width: bordercollapse: marginbottom:>
          <thead style="{{" backgroundcolor: color:>
            <tr>
              <th style="{{" padding: textalign:>ID</th>
              <th style="{{" padding: textalign:>Name</th>
              <th style="{{" padding: textalign:>Username</th>
              <th style="{{" padding: textalign:>Email</th>
            </tr>
          </thead>
          <tbody>
            {data.map((user) => (
              <tr key="{user.id}" style="{{" backgroundcolor: user.id : borderbottom: solid>
                <td style="{{" padding:>{user.id}</td>
                <td style="{{" padding:>{user.name}</td>
                <td style="{{" padding:>{user.username}</td>
                <td style="{{" padding:>{user.email}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default DataFetchingComponent;

輸出

範例 2：設定計時器

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div style="{{" display: justifycontent: alignitems: height: backgroundcolor:>
      <div style="{{" backgroundcolor: borderradius: padding: boxshadow: rgba textalign:>
        <h1 id="count-seconds">{count} seconds</h1>
        <p style="{{" margintop: fontsize: color:>Timer running with useEffect hook</p>
      </div>
    </div>
  );
}

export default TimerComponent;

輸出

總結一下：

1. 使用 useEffect() 來執行諸如獲取資料、操作 DOM 或設定計時器等任務。
2. 您可以透過傳遞依賴項陣列來控制效果何時運作。
3. 在必要時始終透過從 useEffect() 回調傳回一個函數來清理效果。

以上是了解 React 中的 useEffect() Hook的詳細內容。更多資訊請關注PHP中文網其他相關文章！