Memahami React's useEffect dan Pendengar Acara: A Deep Dive

Pernahkah anda terfikir bagaimana komponen React boleh mengekalkan pendengar acara aktif tanpa mendaftar semula mereka pada setiap paparan? Mari kita bongkar misteri ini dengan memeriksa kes penggunaan biasa: menjejak koordinat tetikus.

Teka-teki

Pertimbangkan komponen React ini yang menjejaki kedudukan tetikus:

import React from 'react';

function MouseCoords() {
  const [mousePosition, setMousePosition] = React.useState({
    x: 0,
    y: 0,
  });

  React.useEffect(() => {
    function handleMouseMove(event) {
      setMousePosition({
        x: event.clientX,
        y: event.clientY,
      });
    }
    window.addEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div className="wrapper">
      <p>
        {mousePosition.x} / {mousePosition.y}
      </p>
    </div>
  );
}

export default MouseCoords;

Inilah bahagian yang menarik: tatasusunan kebergantungan kosong ([]) bermaksud useEffect kami hanya berjalan sekali, namun komponen itu masih dikemas kini apabila kami menggerakkan tetikus kami. Bagaimana ini berfungsi? ?

Sistem Peristiwa Penyemak Imbas vs Rendering React

Untuk memahami tingkah laku ini, kita perlu menyedari bahawa dua sistem berasingan sedang bermain:

1. Sistem Acara Penyemak Imbas: Mengurus pendengar acara dan mencetuskan panggilan balik
2. Sistem Rendering React: Mengendalikan kemas kini komponen dan rendering UI

Fikirkan ia Seperti Kamera Keselamatan

Bayangkan menyediakan kamera keselamatan di rumah anda:

• Pemasangan (useEffect dengan []) berlaku sekali
• Kamera (pendengar acara) kekal aktif secara bebas
• Apabila pergerakan berlaku, ia mencetuskan penggera (kemas kini keadaan)
• Anda tidak perlu memasang semula kamera setiap kali ia mengesan pergerakan!

Memecahkan Aliran

Mari kita periksa apa yang berlaku langkah demi langkah:

1. Persediaan Awal (Fasa Lekapan)

React.useEffect(() => {
  // Effect runs once on mount
  function handleMouseMove(event) {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  }
  window.addEventListener('mousemove', handleMouseMove);
}, []); // Empty array = run once

2. Pengendalian Acara

Apabila tetikus bergerak:

• Sistem acara penyemak imbas mengesan pergerakan
• Panggil fungsi handleMouseMove kami yang berdaftar
• Kemas kini fungsi Keadaan bertindak balas dengan setMousePosition
• Komponen dipaparkan semula dengan koordinat baharu

3. Pembersihan (Penting!)

Kami harus sentiasa membersihkan pendengar acara kami apabila komponen dinyahlekap. Inilah kod lengkapnya:

React.useEffect(() => {
  function handleMouseMove(event) {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  }
  window.addEventListener('mousemove', handleMouseMove);

  // Cleanup function
  return () => {
    window.removeEventListener('mousemove', handleMouseMove);
  };
}, []);

Perangkap Biasa yang Perlu Dielakkan

1. Pembersihan Hilang: Sentiasa alih keluar pendengar acara untuk mengelakkan kebocoran memori
2. Kebergantungan yang Tidak Diperlukan: Jangan tambahkan kebergantungan melainkan pendengar acara memerlukannya
3. Pendaftaran semula: Elakkan daripada meletakkan pendengar acara dalam badan paparan

Contoh Dunia Sebenar: Penjejak Tetikus Dipertingkat

Berikut ialah versi yang lebih praktikal dengan ciri tambahan:

import React from 'react';

function MouseCoords() {
  const [mousePosition, setMousePosition] = React.useState({
    x: 0,
    y: 0,
  });

  React.useEffect(() => {
    function handleMouseMove(event) {
      setMousePosition({
        x: event.clientX,
        y: event.clientY,
      });
    }
    window.addEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div className="wrapper">
      <p>
        {mousePosition.x} / {mousePosition.y}
      </p>
    </div>
  );
}

export default MouseCoords;

Pengambilan Utama

1. Pendaftaran pendengar acara (useEffect) dan pengendalian acara adalah sistem yang berasingan
2. Susun atur pergantungan kosong ([]) bermaksud "jalankan sekali pada lekap"
3. Acara penyemak imbas beroperasi secara bebas daripada kitaran pemaparan React
4. Sentiasa bersihkan pendengar semasa dinyahlekap

Kesimpulan

Memahami hubungan antara useEffect React dan peristiwa penyemak imbas adalah penting untuk membina aplikasi React yang berprestasi. Dengan memanfaatkan sistem acara penyemak imbas dengan betul, kami boleh mencipta antara muka responsif tanpa pemaparan semula yang tidak perlu atau pendaftaran pendengar acara.

Ingat: pendengar acara adalah seperti kamera keselamatan setia kami - pasang sekali, dan biarkan ia melakukan tugasnya!

---

Adakah penjelasan ini membantu anda memahami useEffect dan pendengar acara dengan lebih baik? Tinggalkan komen di bawah dengan fikiran atau soalan anda!

Atas ialah kandungan terperinci Memahami React's useEffect dan Pendengar Acara: A Deep Dive. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!