Panduan Komprehensif untuk React's useEffect Hook: Mengurus Kesan Sampingan dalam Komponen Berfungsi

useEffect Hook dalam React

Cangkuk useEffect ialah salah satu cangkuk yang paling berkuasa dan penting dalam React. Ia membolehkan anda melakukan kesan sampingan dalam komponen berfungsi anda. Kesan sampingan boleh termasuk perkara seperti pengambilan data, manipulasi DOM manual, menyediakan langganan dan membersihkan sumber apabila komponen dinyahlekap atau dikemas kini.

Sebelum pengenalan cangkuk, kesan sampingan telah dikendalikan oleh kaedah kitaran hayat seperti componentDidMount, componentDidUpdate dan componentWillUnmount dalam komponen kelas. useEffect menyatukan semua kaedah kitaran hayat ini menjadi satu, menjadikannya lebih mudah untuk berfungsi dengan kesan sampingan dalam komponen berfungsi.

---

Apakah useEffect?

Cangkuk useEffect digunakan untuk melakukan kesan sampingan dalam komponen React. Ia dijalankan selepas pemaparan dan boleh dikawal dengan kebergantungan untuk dijalankan hanya apabila nilai tertentu berubah.

Sintaks:

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• Fungsi Kesan: Hujah pertama ialah fungsi di mana kesan sampingan dilakukan.
• Fungsi Pembersihan: Jika anda mengembalikan fungsi daripada kesan, ia akan berjalan apabila komponen dinyahlekap atau sebelum kesan dijalankan semula (berguna untuk pembersihan).
• Susun Kebergantungan: Argumen kedua ialah tatasusunan kebergantungan pilihan. Kesan berlaku hanya apabila nilai dalam tatasusunan ini berubah.

---

Konsep Utama:

1. Menjalankan Kesan Selepas Setiap Paparan:

Jika tiada tatasusunan dependensi disediakan, kesannya akan dijalankan selepas setiap pemaparan komponen.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

• Penjelasan: Dalam kes ini, kesannya akan dijalankan setiap kali komponen dipaparkan semula.

2. Menjalankan Kesan Sekali (Pada Pemasangan):

Jika anda melepasi tatasusunan dependensi kosong ([]), kesannya akan dijalankan sekali sahaja selepas pemaparan awal (serupa dengan componentDidMount dalam komponen kelas).

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

• Penjelasan: Di sini, kesannya berjalan sekali sahaja apabila komponen dipasang (pameran pertama).

3. Menjalankan Kesan pada Ketergantungan Khusus:

Jika anda melepasi tatasusunan dependensi (cth., [count]), kesannya akan dijalankan apabila mana-mana nilai dalam tatasusunan itu berubah.

useEffect(() => {
  // Code for the side effect
  return () => {
    // Cleanup code (optional)
  };
}, [dependencies]);

• Penjelasan: Kesan berlaku apabila nilai kiraan berubah. Setiap kali butang diklik, setCount mengemas kini keadaan, mencetuskan pemaparan semula dan menjalankan semula kesannya.

4. Fungsi Pembersihan:

Jika kesan anda mencipta kesan sampingan yang perlu dibersihkan (cth., langganan, pemasa, dll.), anda boleh mengembalikan fungsi pembersihan daripada kesan itu. Fungsi ini akan dijalankan sebelum kesan dilaksanakan semula atau apabila komponen dinyahlekapkan.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect has run after every render');
  });

  return <div>Check the console</div>;
};

• Penjelasan: Cangkuk useEffect menyediakan pemasa apabila komponen dipasang, dan fungsi pembersihan (clearInterval) dipanggil apabila komponen dinyahlekap, mengelakkan kebocoran memori.

5. Kesan Bersyarat:

Anda boleh mengawal bila kesan harus dijalankan dengan menggunakan tatasusunan dependensi. Kesan akan berjalan hanya apabila salah satu nilai dalam tatasusunan berubah.

import React, { useEffect } from 'react';

const Component = () => {
  useEffect(() => {
    console.log('Effect runs only once, after the first render');
  }, []); // Empty dependency array

  return <div>Check the console</div>;
};

• Penjelasan: Komponen ini mempunyai dua cangkuk useEffect. Satu berjalan apabila kiraan berubah, dan satu lagi berjalan apabila nama berubah.

---

Kes Penggunaan Biasa untuk kegunaanKesan:

1. Pengambilan Data: useEffect biasanya digunakan untuk membuat permintaan API atau mengambil data apabila komponen dipasang atau apabila kebergantungan tertentu berubah.

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

const Component = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect runs when count changes:', count);
  }, [count]); // Dependency on count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

1. Melanggan Acara Luaran: Contohnya, melanggan WebSocket atau menambah pendengar acara.

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

const TimerComponent = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => clearInterval(timer);
  }, []); // Empty dependency array to run once on mount

  return <div>Time: {time}</div>;
};

1. Pemasa dan Selang: Menyediakan dan membersihkan pemasa dan selang waktu.

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

const Component = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');

  useEffect(() => {
    console.log(`Effect runs when 'count' changes: ${count}`);
  }, [count]); // Only runs when count changes

  useEffect(() => {
    console.log(`Effect runs when 'name' changes: ${name}`);
  }, [name]); // Only runs when name changes

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName(name === 'Alice' ? 'Bob' : 'Alice')}>Change Name</button>
    </div>
  );
};

---

Ringkasan penggunaanKesan:

• useEffect digunakan untuk melakukan kesan sampingan dalam komponen berfungsi.
• Anda boleh mengawal masa kesan berjalan dengan melepasi tatasusunan kebergantungan.
• Ia boleh dijalankan selepas setiap pemaparan, sekali pada pelekap atau apabila nilai tertentu berubah.
• Fungsi pembersihan membolehkan anda membersihkan sumber (cth., mengosongkan pemasa, membatalkan permintaan API) apabila komponen dinyahlekap atau sebelum kesan berjalan semula.
• Kes penggunaan biasa termasuk pengambilan data, pendengar acara dan pemasa.

---

Kesimpulan

Cangkuk useEffect ialah salah satu cangkuk yang paling penting dalam React, membolehkan anda mengendalikan kesan sampingan secara deklaratif. Ia memudahkan kod dengan menggabungkan berbilang kaedah kitaran hayat menjadi satu dan menawarkan fleksibiliti dan kawalan yang lebih besar terhadap masa dan cara kesan berlaku dalam komponen anda.

---

Atas ialah kandungan terperinci Panduan Komprehensif untuk React's useEffect Hook: Mengurus Kesan Sampingan dalam Komponen Berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!