Memahami useEffect() Hook dalam React

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

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

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!