Rumah  >  Artikel  >  hujung hadapan web  >  Memahami useEffect() Hook dalam React

Memahami useEffect() Hook dalam React

DDD
DDDasal
2024-10-05 12:17:02973semak imbas

React yang diperkenalkan Hooks dalam versi 16.8, dan salah satu Hooks yang paling biasa digunakan ialah useEffect(). Cangkuk useEffect() membolehkan kami melakukan kesan sampingan dalam komponen fungsi, seperti mengambil data, mengemas kini DOM atau menyediakan langganan.

Cara useEffect() Berfungsi
UseEffect() Hook menerima dua argumen:

  1. Fungsi: Ini adalah kesan yang akan berjalan. Fungsi ini dilaksanakan selepas komponen membuat (atau membuat semula). Anda boleh menganggap ini sebagai logik "kesan sampingan".
  2. Susun atur pergantungan pilihan: Ini memberitahu React bila hendak menjalankan semula kesan. Jika anda menyediakan tatasusunan kosong ([]), kesannya hanya akan dijalankan sekali, selepas pemaparan awal.

Sintaks Asas:


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


Contoh 1: Mengambil Data


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;



Output

Understanding the useEffect() Hook in React

Contoh 2: Menyediakan Pemasa


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;



Output

Understanding the useEffect() Hook in React

Untuk meringkaskan:

  1. Gunakan useEffect() untuk tugas seperti mengambil data, memanipulasi DOM atau menyediakan pemasa.
  2. Anda boleh mengawal masa kesan berjalan dengan melepasi tatasusunan kebergantungan.
  3. Sentiasa bersihkan kesan apabila perlu dengan mengembalikan fungsi daripada useEffect()panggilan balik.

Atas ialah kandungan terperinci Memahami useEffect() Hook dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn