React の useEffect() フックを理解する

React はバージョン 16.8 でフックを導入しました。最も一般的に使用されるフックの 1 つは useEffect() です。 useEffect() フックを使用すると、データの取得、DOM の更新、サブスクリプションの設定などの関数コンポーネントでの副作用を実行できます。

useEffect() の仕組み
useEffect() フックは 2 つの引数を受け入れます:

1. 関数: これは実行されるエフェクトです。この関数は、コンポーネントのレンダリング (または再レンダリング) 後に実行されます。これは「副作用」ロジックと考えることができます。
2. オプションの依存関係配列: これは、エフェクトをいつ再実行するかを React に指示します。空の配列 ([]) を指定した場合、エフェクトは最初のレンダリング後に 1 回だけ実行されます。

基本構文:

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: "1200px", margin: "0 auto", padding: "20px" }}>
      <h1 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}>
        Users Data
      </h1>
      <h2 style={{ textAlign: "center", marginBottom: "20px", color: "#333" }}>
        Understanding the useEffect() Hook in React By Sudhanshu Gaikwad
      </h2>

      {error ? (
        <p style={{ color: "red", textAlign: "center" }}>{error}</p>
      ) : (
        <table
          style={{
            width: "100%",
            borderCollapse: "collapse",
            marginBottom: "20px",
          }}
        >
          <thead style={{ backgroundColor: "black", color: "white" }}>
            <tr>
              <th style={{ padding: "10px", textAlign: "left" }}>ID</th>
              <th style={{ padding: "10px", textAlign: "left" }}>Name</th>
              <th style={{ padding: "10px", textAlign: "left" }}>Username</th>
              <th style={{ padding: "10px", textAlign: "left" }}>Email</th>
            </tr>
          </thead>
          <tbody>
            {data.map((user) => (
              <tr
                key={user.id}
                style={{
                  backgroundColor: user.id % 2 === 0 ? "#f2f2f2" : "white",
                  borderBottom: "1px solid #ddd",
                }}
              >
                <td style={{ padding: "10px" }}>{user.id}</td>
                <td style={{ padding: "10px" }}>{user.name}</td>
                <td style={{ padding: "10px" }}>{user.username}</td>
                <td style={{ padding: "10px" }}>{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: "flex", justifyContent: "center", alignItems: "center", height: "100vh", backgroundColor: "#f0f4f8" }}>
      <div style={{ backgroundColor: "#fff", borderRadius: "10px", padding: "30px 50px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", textAlign: "center" }}>
        <h1 style={{ fontSize: "3rem", fontFamily: "Roboto, sans-serif", color: "#333", margin: "0" }}>{count} seconds</h1>
        <p style={{ marginTop: "15px", fontSize: "1.2rem", color: "#666" }}>Timer running with useEffect hook</p>
      </div>
    </div>
  );
}

export default TimerComponent;

出力

要約すると:

1. データの取得、DOM の操作、タイマーの設定などのタスクには useEffect() を使用します。
2. 依存関係配列を渡すことで、いつエフェクトを実行するかを制御できます。
3. 必要に応じて useEffect() コールバックから関数を返すことで、常にエフェクトをクリーンアップします。

以上がReact の useEffect() フックを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。