Tahap arkitek: Mengendalikan Peristiwa dalam React

Sebagai pembangun peringkat arkitek, tumpuan anda harus tertumpu pada mereka bentuk aplikasi berskala, boleh diselenggara dan berprestasi. Mengendalikan acara dengan cekap dalam React adalah bahagian penting dalam hal ini. Artikel ini menyelidiki konsep lanjutan dan amalan terbaik untuk 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 asas untuk mencipta aplikasi interaktif. Pengendali acara dalam JSX adalah serupa dengan yang terdapat dalam HTML tetapi disesuaikan dengan seni bina dan pertimbangan prestasi 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 menentukan pengendali acara.

Peristiwa Sintetik

React menggunakan peristiwa sintetik untuk memastikan tingkah laku yang konsisten merentas penyemak imbas yang berbeza. Acara sintetik ialah pembalut silang penyemak imbas di sekeliling sistem acara asli penyemak imbas, 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 dicapai menggunakan fungsi anak panah atau kaedah bind. Teknik ini penting untuk mengendalikan acara dengan cara yang 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 mungkin diperlukan untuk interaksi kompleks yang melangkaui 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 dinamik, kerana ia mengurangkan bilangan pendengar acara yang diperlukan.

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. Tentukan pengendali acara di luar kaedah render 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 peringkat arkitek, keupayaan anda untuk menggunakan teknik lanjutan ini akan menyumbang dengan ketara kepada kejayaan projek anda dan keberkesanan pasukan anda.

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