Den useEffect()-Hook in React verstehen

React hat in Version 16.8 Hooks eingeführt, und einer der am häufigsten verwendeten Hooks ist useEffect(). Mit dem useEffect()-Hook können wir Nebeneffekte in Funktionskomponenten ausführen, wie etwa das Abrufen von Daten, das Aktualisieren des DOM oder das Einrichten von Abonnements.

Wie useEffect() funktioniert
Der useEffect() Hook akzeptiert zwei Argumente:

1. Eine Funktion: Dies ist der Effekt, der ausgeführt wird. Diese Funktion wird ausgeführt, nachdem die Komponente gerendert (oder erneut gerendert) wurde. Man kann sich das als „Nebeneffekt“-Logik vorstellen.
2. Ein optionales Abhängigkeitsarray: Dies teilt React mit, wann der Effekt erneut ausgeführt werden soll. Wenn Sie ein leeres Array ([]) angeben, wird der Effekt nach dem ersten Rendern nur einmal ausgeführt.

Grundlegende Syntax:

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

Beispiel 1: Daten abrufen

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;

Ausgabe

Beispiel 2: Einrichten eines Timers

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;

Ausgabe

Zusammenfassend:

1. Verwenden Sie useEffect() für Aufgaben wie das Abrufen von Daten, das Bearbeiten des DOM oder das Einrichten von Timern.
2. Sie können steuern, wann der Effekt ausgeführt wird, indem Sie ein Abhängigkeitsarray übergeben.
3. Bereinigen Sie Effekte bei Bedarf immer, indem Sie eine Funktion aus dem useEffect()-Callback zurückgeben.

Das obige ist der detaillierte Inhalt vonDen useEffect()-Hook in React verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!