Peringkat kanan: Mengendalikan Peristiwa dalam React

Sebagai pembangun kanan, anda dijangka mempunyai pemahaman yang mendalam tentang pengendalian acara dalam React. Ini melibatkan bukan sahaja mengetahui asas tetapi juga menguasai teknik lanjutan untuk mencipta aplikasi yang cekap, boleh diselenggara dan berskala. Artikel ini merangkumi selok-belok pengendalian acara dalam React, termasuk menambah pengendali acara, memahami peristiwa sintetik, menyampaikan hujah kepada pengendali acara, mencipta acara tersuai dan memanfaatkan delegasi acara.

Pengendalian Acara

Menambah Pengendali Acara dalam JSX

Menambah pengendali acara dalam JSX adalah mudah dan serupa dengan pengendalian acara dalam HTML biasa, tetapi dengan beberapa perbezaan utama disebabkan oleh seni bina unik React.

Contoh menambah pengendali acara:

import React from 'react';

const handleClick = () => {
  console.log('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, menyediakan API bersatu.

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

Menyalurkan hujah kepada pengendali acara boleh dilakukan menggunakan fungsi anak panah atau kaedah bind, yang penting untuk mengendalikan acara dengan cara yang lebih fleksibel.

Contoh menggunakan fungsi anak panah:

import React from 'react';

const handleClick = (message) => {
  console.log(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) => {
  console.log(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 hujah tambahan kepada fungsi handleClick, memberikan fleksibiliti dalam pengendalian acara.

Pengendalian Acara Tersuai

Mencipta Acara Tersuai

Mencipta acara tersuai dalam React adalah perlu untuk interaksi yang lebih kompleks yang tidak diliputi oleh acara standard. 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) => {
      console.log(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 merekodkan mesej butiran acara.

Delegasi Acara dalam React

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

Contoh delegasi acara:

import React from 'react';

const handleClick = (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log(`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 mengurus acara klik untuk semua butang. Pengendali acara menyemak acara.sasaran untuk menentukan butang yang telah diklik dan log mesej dengan sewajarnya.

Amalan Terbaik untuk Pengendalian Acara dalam React

1. Elakkan Mencipta Fungsi Sebaris dalam JSX: Mencipta fungsi baharu dalam kaedah pemaparan boleh membawa kepada pemaparan semula dan isu prestasi yang tidak perlu. Sebaliknya, tentukan pengendali acara sebagai kaedah kelas atau gunakan cangkuk.

   const App = () => {
     const handleClick = () => {
       console.log('Button clicked!');
     };

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

1. Cegah Gelagat Lalai dan Hentikan Penyebaran: Gunakan event.preventDefault() untuk menghalang gelagat lalai dan event.stopPropagation() untuk menghentikan penyebaran peristiwa apabila perlu.

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

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

1. Bersihkan Pendengar Acara: Apabila menambahkan pendengar acara terus pada elemen DOM, pastikan untuk membersihkannya untuk mengelakkan kebocoran memori.

   useEffect(() => {
     const handleResize = () => {
       console.log('Window resized');
     };

     window.addEventListener('resize', handleResize);

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

1. Acara Frekuensi Tinggi Nyahlantun atau Pendikit: Gunakan teknik nyahlantun atau pendikit untuk acara frekuensi tinggi seperti menatal atau mengubah saiz untuk meningkatkan prestasi.

   const debounce = (func, delay) => {
     let timeoutId;
     return (...args) => {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => {
         func.apply(null, args);
       }, delay);
     };
   };

   useEffect(() => {
     const handleScroll = debounce(() => {
       console.log('Scroll event');
     }, 300);

     window.addEventListener('scroll', handleScroll);

     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);

1. Gunakan Perwakilan Acara dengan Bijak: Manfaatkan delegasi acara untuk elemen yang ditambah atau dialih keluar secara dinamik pada DOM, seperti senarai item.

   const List = () => {
     const handleClick = (event) => {
       if (event.target.tagName === 'LI') {
         console.log(`Item ${event.target.textContent} clicked!`);
       }
     };

     return (
       <ul onClick={handleClick}>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
       </ul>
     );
   };

Kesimpulan

Mengendalikan acara dalam React dengan cekap adalah penting untuk mencipta aplikasi interaktif dan berprestasi tinggi. Dengan menguasai teknik menambah pengendali acara, menggunakan peristiwa sintetik, menghantar hujah kepada pengendali acara, mencipta acara tersuai dan memanfaatkan perwakilan acara, anda boleh membina aplikasi yang mantap dan berskala. Melaksanakan amalan terbaik memastikan bahawa kod anda kekal boleh diselenggara dan berprestasi apabila ia berkembang dalam kerumitan. Sebagai pembangun kanan, keupayaan anda untuk menggunakan teknik lanjutan ini akan menyumbang dengan ketara kepada kejayaan projek anda dan keberkesanan pasukan anda.

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