Heim >Web-Frontend >js-Tutorial >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:
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:
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!