Tahap pertengahan: Mengendalikan Peristiwa dalam React

Sebagai pembangun peringkat pertengahan, anda harus mempunyai pemahaman yang kukuh tentang pengendalian acara dalam React, yang penting untuk mencipta aplikasi interaktif dan dinamik. Panduan ini akan merangkumi konsep lanjutan dan amalan terbaik, termasuk menambah pengendali acara, memahami peristiwa sintetik, menyampaikan hujah kepada pengendali acara, mencipta acara tersuai dan memanfaatkan perwakilan acara.

Pengendalian Acara

Menambah Pengendali Acara dalam JSX

Dalam React, pengendali acara boleh ditambah terus dalam JSX. Pengendali acara ialah fungsi yang dipanggil apabila peristiwa tertentu berlaku, seperti klik butang atau penyerahan borang. Menambah pengendali acara dalam JSX adalah serupa dengan cara ia dilakukan dalam HTML biasa tetapi dengan sintaks JSX React.

Contoh menambah pengendali acara:

import React from 'react';

const handleClick = () => {
  alert('Button clicked!');
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};

export default App;

Dalam contoh ini, fungsi handleClick dipanggil apabila butang diklik. Atribut onClick dalam JSX digunakan untuk menentukan pengendali acara.

Peristiwa Sintetik

React menggunakan sistem yang dipanggil peristiwa sintetik untuk mengendalikan peristiwa. Peristiwa sintetik ialah pembalut silang pelayar di sekeliling sistem acara asli penyemak imbas. Ini memastikan acara berkelakuan secara konsisten merentas penyemak imbas yang berbeza.

Contoh acara sintetik:

import React from 'react';

const handleInputChange = (event) => {
  console.log('Input value:', event.target.value);
};

const App = () => {
  return (
    <div>
      <input type="text" onChange={handleInputChange} />
    </div>
  );
};

export default App;

Dalam contoh ini, fungsi handleInputChange merekodkan nilai medan input apabila ia berubah. Parameter peristiwa ialah peristiwa sintetik yang menyediakan sifat peristiwa yang konsisten merentas semua penyemak imbas.

Menghantar Hujah kepada Pengendali Acara

Kadangkala, anda perlu menyampaikan hujah tambahan kepada pengendali acara. Ini boleh dilakukan menggunakan fungsi anak panah atau kaedah bind.

Contoh menggunakan fungsi anak panah:

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={() => handleClick('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

Contoh menggunakan kaedah bind:

import React from 'react';

const handleClick = (message) => {
  alert(message);
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick.bind(null, 'Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

Kedua-dua kaedah membenarkan anda menghantar argumen tambahan kepada fungsi handleClick.

Pengendalian Acara Tersuai

Mencipta Acara Tersuai

Walaupun peristiwa sintetik React merangkumi kebanyakan kes penggunaan biasa, anda mungkin perlu membuat acara tersuai untuk interaksi yang lebih kompleks. Acara tersuai boleh dibuat dan dihantar menggunakan pembina CustomEvent dan kaedah dispatchEvent.

Contoh membuat dan menghantar acara tersuai:

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

const CustomEventComponent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleCustomEvent = (event) => {
      alert(event.detail.message);
    };

    const button = buttonRef.current;
    button.addEventListener('customEvent', handleCustomEvent);

    return () => {
      button.removeEventListener('customEvent', handleCustomEvent);
    };
  }, []);

  const handleClick = () => {
    const customEvent = new CustomEvent('customEvent', {
      detail: { message: 'Custom event triggered!' },
    });
    buttonRef.current.dispatchEvent(customEvent);
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      Trigger Custom Event
    </button>
  );
};

export default CustomEventComponent;

Dalam contoh ini, acara tersuai bernama customEvent dibuat dan dihantar apabila butang diklik. Pengendali acara mendengar acara tersuai dan memaparkan makluman dengan mesej butiran acara.

Delegasi Acara dalam React

Delegasi acara ialah teknik di mana pendengar acara tunggal digunakan untuk mengurus acara untuk berbilang elemen. Ini berguna untuk mengurus acara dengan cekap, terutamanya dalam senarai atau jadual.

Contoh delegasi acara:

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    alert(`Button ${event.target.textContent} clicked!`);
  }
};

const App = () => {
  return (
    <div onClick={handleClick}>
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  );
};

export default App;

Dalam contoh ini, pengendali acara tunggal pada elemen div menguruskan acara klik untuk semua butang. Pengendali acara menyemak acara.sasaran untuk menentukan butang yang telah diklik dan memaparkan makluman sewajarnya.

Amalan Terbaik untuk Pengendalian Acara dalam React

1. Gunakan Pengendali Acara dengan Bijak: Elakkan daripada mencipta fungsi pengendali acara baharu di dalam kaedah pemaparan, kerana ia boleh membawa kepada isu prestasi. Sebaliknya, tentukan pengendali acara anda di luar kaedah pemaparan.

2. Cegah Gelagat Lalai: Gunakan event.preventDefault() untuk menghalang gelagat lalai acara apabila perlu, seperti penyerahan borang atau klik tag anchor.
   

   const handleSubmit = (event) => {
     event.preventDefault();
     // Handle form submission
   };

   return <form onSubmit={handleSubmit}>...</form>;

1. Hentikan Penyebaran: Gunakan event.stopPropagation() untuk menghentikan penyebaran peristiwa kepada elemen induk apabila diperlukan.

   const handleButtonClick = (event) => {
     event.stopPropagation();
     // Handle button click
   };

   return <button onClick={handleButtonClick}>Click Me</button>;

1. Menyahlantun dan Mendikit: Gunakan teknik nyahlantun atau pendikit untuk mengehadkan bilangan kali pengendali acara dipanggil untuk acara frekuensi tinggi seperti menatal atau mengubah saiz.

2. Bersihkan Pendengar Acara: Apabila menambahkan pendengar acara terus pada elemen DOM (terutamanya dalam komponen kelas atau cangkuk), pastikan untuk membersihkannya untuk mengelakkan kebocoran memori.
   

   useEffect(() => {
     const handleResize = () => {
       // Handle resize
     };

     window.addEventListener('resize', handleResize);

     return () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);

Kesimpulan

Mengendalikan acara dalam React adalah penting untuk mencipta aplikasi interaktif. Dengan memahami cara menambah pengendali acara, menggunakan peristiwa sintetik, menyampaikan hujah kepada pengendali acara, mencipta acara tersuai dan memanfaatkan perwakilan acara, anda boleh membina aplikasi React yang lebih dinamik dan cekap. Melaksanakan amalan terbaik memastikan aplikasi anda kekal berprestasi dan boleh diselenggara apabila ia berkembang dalam kerumitan. Sebagai pembangun peringkat pertengahan, menguasai teknik ini akan meningkatkan keupayaan anda untuk mengendalikan interaksi yang kompleks dan menyumbang kepada kejayaan projek anda.

Atas ialah kandungan terperinci Tahap pertengahan: Mengendalikan Peristiwa dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!