Comprendre le hook useEffect() dans React-js tutoriel-php.cn

Comprendre le hook useEffect() dans React

DDD

Libérer： 2024-10-05 12:17:02

original

1137 Les gens l'ont consulté

React a introduit les Hooks dans la version 16.8, et l'un des Hooks les plus couramment utilisés est useEffect(). Le hook useEffect() nous permet d'effectuer des effets secondaires dans les composants de fonction, tels que la récupération de données, la mise à jour du DOM ou la configuration d'abonnements.

Comment fonctionne useEffect()
Le Hook useEffect() accepte deux arguments :

Une fonction : C'est l'effet qui va s'exécuter. Cette fonction est exécutée après le rendu (ou le nouveau rendu) du composant. Vous pouvez considérer cela comme la logique des « effets secondaires ».
Un tableau de dépendances facultatif : cela indique à React quand réexécuter l'effet. Si vous fournissez un tableau vide ([]), l'effet ne s'exécutera qu'une seule fois, après le rendu initial.

Syntaxe de base :


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

Copier après la connexion

Exemple 1 : Récupération de données


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;

Copier après la connexion

Sortie

Understanding the useEffect() Hook in React

Exemple 2 : Configuration d'une minuterie


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;

Copier après la connexion

Sortie

Understanding the useEffect() Hook in React

Pour résumer :

Utilisez useEffect() pour des tâches telles que la récupération de données, la manipulation du DOM ou la configuration de minuteries.
Vous pouvez contrôler le moment où l'effet s'exécute en passant un tableau de dépendances.
Toujours nettoyer les effets lorsque cela est nécessaire en renvoyant une fonction à partir du rappel useEffect().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!