Heim >Web-Frontend >js-Tutorial >Den useEffect()-Hook in React verstehen

Den useEffect()-Hook in React verstehen

DDD
DDDOriginal
2024-10-05 12:17:021146Durchsuche

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

Understanding the useEffect() Hook in React

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

Understanding the useEffect() Hook in React

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn