useEffect Hook Explained

Kait useEffect ialah bahagian asas React, membolehkan anda melakukan kesan sampingan dalam komponen berfungsi. Berikut ialah pecahan terperinci:

Apakah useEffect?

• Kait useEffect membolehkan anda melakukan kesan sampingan dalam komponen anda, seperti pengambilan data, langganan atau menukar DOM secara manual.
• Ia boleh dianggap sebagai gabungan kaedah kitaran hayat componentDidMount, componentDidUpdate dan componentWillUnmount.

Sintaks

useEffect(() => {
  // Your side effect code here

  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

Parameter

1. Fungsi Kesan: Argumen pertama ialah fungsi yang mengandungi kod kesan sampingan. Fungsi ini akan dijalankan selepas pemaparan ditumpukan pada skrin.

2. Fungsi Pembersihan (pilihan): Fungsi kesan boleh mengembalikan fungsi pembersihan yang akan dipanggil oleh React apabila komponen dinyahlekap atau sebelum kesan berjalan semula. Ini berguna untuk membersihkan langganan atau pemasa.

3. Susun Kebergantungan: Argumen kedua ialah tatasusunan kebergantungan. Kesan hanya berlaku apabila salah satu kebergantungan berubah. Jika anda melepasi tatasusunan kosong ([]), kesannya berjalan sekali sahaja selepas pemaparan awal (seperti componentDidMount).

Contoh Penggunaan

1. Contoh Asas: Mengambil data pada pelekap

import React, { useEffect, useState } from 'react';

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []); // Runs only once after the initial render

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

1. Contoh Pembersihan: Melanggan acara

import React, { useEffect } from 'react';

const EventListenerComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // Cleanup function to remove the event listener
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Runs only once after the initial render

  return <div>Resize the window and check the console.</div>;
};

1. Contoh Kebergantungan: Menjalankan kesan berdasarkan perubahan prop

import React, { useEffect, useState } from 'react';

const TimerComponent = ({ delay }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, delay);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, [delay]); // Runs every time `delay` changes

  return <div>Count: {count}</div>;
};

Amalan Terbaik

• Tentukan Ketergantungan: Sentiasa sertakan pembolehubah yang bergantung pada kesan anda dalam tatasusunan kebergantungan untuk mengelakkan penutupan basi.
• Elakkan Kesan Sampingan dalam Rendering: Jauhkan kesan sampingan daripada fasa render; gunakan useEffect sebaliknya.
• Gunakan Fungsi Pembersihan: Jika kesan anda mencipta langganan atau pemasa, sentiasa kembalikan fungsi pembersihan untuk mengelakkan kebocoran memori.

Kesimpulan

Kait useEffect ialah alat yang berkuasa untuk mengendalikan kesan sampingan dalam komponen berfungsi, menjadikannya penting untuk pembangunan React moden. Dengan memahami sintaks dan amalan terbaiknya, anda boleh mengurus gelagat komponen dan kesan sampingan dengan berkesan.

Atas ialah kandungan terperinci useEffect Hook Explained. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!