React: Memahami Sistem Acara React

Gambaran Keseluruhan Sistem Acara React

Apakah Peristiwa Sintetik?

Acara sintetik ialah mekanisme pengendalian acara yang direka oleh React untuk mencapai keserasian merentas penyemak imbas, mengoptimumkan prestasi dan memudahkan pengendalian acara. Ia merangkum peristiwa penyemak imbas asli, menyediakan API bersatu dan pendekatan pengendalian acara, memastikan gelagat acara yang konsisten merentas penyemak imbas yang berbeza.

Prinsip Kerja Peristiwa Sintetik

Delegasi Acara

React mengendalikan acara melalui mekanisme perwakilan acara. Delegasi acara bermakna React tidak mengikat pendengar acara secara langsung kepada setiap elemen DOM. Sebaliknya, ia mengikat semua pendengar acara kepada satu nod akar (biasanya dokumen atau bekas akar aplikasi). Apabila pengguna berinteraksi dengan halaman dan mencetuskan peristiwa, peristiwa itu menggelembungkan pepohon DOM ke nod akar, di mana React menangkap peristiwa itu dan membungkusnya sebagai peristiwa sintetik.

Kelebihan Delegasi Acara:

• Pengoptimuman Prestasi: Ia mengurangkan bilangan pengendali acara yang perlu diikat, sekali gus mengurangkan penggunaan memori.

• Pengurusan Acara Ringkas: Dengan mengurus semua acara pada nod akar, React boleh mengendalikan penyebaran peristiwa dengan lebih cekap, menghalang gelagat lalai dan melakukan operasi berkaitan acara lain.

Pengumpulan Acara

Mekanisme utama di sebalik acara sintetik ialah pengumpulan acara. Pengumpulan acara bermakna React menggunakan semula objek acara dan bukannya mencipta objek acara baharu setiap kali peristiwa dicetuskan. Apabila peristiwa berlaku, React mengambil objek acara daripada kumpulan acara, memulakannya dan menyerahkannya kepada pengendali acara. Selepas pengendalian acara selesai, objek acara dibersihkan dan dikembalikan ke kumpulan acara untuk digunakan semula dalam acara seterusnya.

Kelebihan Penggabungan Acara:

• Mengurangkan Peruntukan Memori: Dengan menggunakan semula objek acara, React mengelakkan peruntukan memori yang kerap dan operasi pengumpulan sampah, yang boleh meningkatkan prestasi dengan ketara, terutamanya untuk acara frekuensi tinggi seperti pergerakan tetikus atau menatal.

Kitaran Hayat Peristiwa Sintetik

Disebabkan pengumpulan peristiwa, kitaran hayat peristiwa sintetik berbeza daripada peristiwa asli. Biasanya, selepas fungsi pengendali acara selesai dilaksanakan, sifat objek peristiwa sintetik ditetapkan semula kepada nol supaya ia boleh dikembalikan ke kumpulan untuk digunakan semula.

Perhatian:

Operasi Asynchronous: Jika anda perlu mengakses objek acara dalam operasi tak segerak, anda mesti memanggil kaedah event.persist(). Ini akan menghalang objek acara daripada dikembalikan ke kolam, memastikan ia tidak ditetapkan semula semasa operasi tak segerak.

API dan Penggunaan Peristiwa Sintetik

API Peristiwa Sintetik React menyediakan satu set antara muka yang serupa dengan acara penyemak imbas asli, yang biasa digunakan dalam React. Di bawah ialah pengenalan terperinci kepada beberapa kaedah dan sifat yang kerap digunakan, bersama-sama dengan contoh yang menggambarkan senario penggunaannya.

a. preventDefault()

Kaedah preventDefault() digunakan untuk menghalang kelakuan lalai sesuatu acara. Tingkah laku lalai merujuk kepada tindakan yang biasanya dilakukan oleh penyemak imbas apabila peristiwa berlaku, seperti menyegarkan halaman apabila borang diserahkan atau menavigasi ke halaman baharu apabila pautan diklik.

Contoh: Menghalang tingkah laku penyerahan borang lalai

function MyForm() {
  const handleSubmit = e => {
    e.preventDefault(); // Prevent the default form submission behavior
    console.log('Form submission prevented');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Dalam contoh ini, jika preventDefault() tidak dipanggil, mengklik butang serah akan mencetuskan penyerahan borang, menyebabkan halaman dimuat semula. Dengan memanggil preventDefault(), tingkah laku lalai dihalang, membenarkan anda menyesuaikan logik pengendalian borang sebaliknya.

b. stopPropagation()
Kaedah stopPropagation() digunakan untuk menghentikan penyebaran selanjutnya sesuatu peristiwa. Peristiwa lazimnya merambat daripada elemen sasaran tempat peristiwa itu dicetuskan sehingga elemen induknya (peristiwa menggelegak). Dengan memanggil stopPropagation(), anda boleh menghalang penyebaran ini.

Contoh: Menghentikan penyebaran acara klik

function Parent() {
  const handleParentClick = () => {
    console.log('Parent clicked');
  };

  return (
    <div onClick={handleParentClick}>
      Parent Div
      <Child />
    </div>
  );
}

function Child() {
  const handleChildClick = e => {
    e.stopPropagation(); // Stop the event from bubbling up to the parent element
    console.log('Child clicked');
  };

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

Dalam contoh ini, mengklik butang mencetuskan pengendali acara klik dalam komponen Kanak-kanak. Secara lalai, acara itu akan menggelembung ke komponen Induk dan mencetuskan pengendali kliknya juga. Walau bagaimanapun, dengan memanggil stopPropagation() dalam komponen Child, peristiwa menggelegak kepada Induk dihalang.

c. target
The target property refers to the actual DOM element that triggered the event. It is commonly used to access the element that initiated the event and to handle logic related to that element.

*Example: Accessing the element that triggered the event *

function MyComponent() {
  const handleClick = e => {
    console.log('Clicked element:', e.target);
  };

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

In this example, when either button is clicked, the e.target in the handleClick function will point to the button element that was clicked. The target property is used to identify which specific element was clicked.

d. currentTarget
The currentTarget property refers to the DOM element to which the event handler is bound. During event handling, regardless of which child element the event bubbles to, currentTarget always points to the element that the event handler is attached to.

Example: Distinguishing between target and currentTarget

function MyComponent() {
  const handleClick = e => {
    console.log('Clicked element:', e.target);
    console.log('Event handler bound to:', e.currentTarget);
  };

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

In this example, when any button is clicked, event.target will point to the button that was clicked, while event.currentTarget will always point to the parent div element where the event handler is bound.

e. persist()
The persist() method is used to retain the event object, preventing React from reusing it. This method is typically needed in asynchronous operations.

Example: Using the event object in an asynchronous operation

function MyComponent() {
  const handleClick = e => {
    e.persist(); // Retain the event object

    setTimeout(() => {
      console.log('Button clicked:', event.target);
    }, 1000);
  };

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

In this example, because the event object might be reused in asynchronous operations, persist() is called to retain the event object, ensuring that the event properties can be safely accessed in the setTimeout callback.

React Synthetic Event Types

React provides various types of synthetic events that cover common user interaction scenarios. Below are some commonly used synthetic event types along with examples:

a. Mouse Events

• onClick: Triggered when an element is clicked.

• onDoubleClick: Triggered when an element is double-clicked.

• onMouseDown: Triggered when a mouse button is pressed down on an element.

• onMouseUp: Triggered when a mouse button is released on an element.

• onMouseMove: Triggered when the mouse is moved over an element.

• onMouseEnter: Triggered when the mouse pointer enters the element's area; does not bubble.

• onMouseLeave: Triggered when the mouse pointer leaves the element's area; does not bubble.

Example: Using onClick and onMouseMove

function MouseTracker() {
  const handleMouseMove = e => {
    console.log(`Mouse position: (${e.clientX}, ${e.clientY})`);
  };

  return (
    <div onMouseMove={handleMouseMove} style={{ height: '200px', border: '1px solid black' }}>
      Move your mouse here
    </div>
  );
}

function MyApp() {
  return (
    <div>
      <button onClick={() => console.log('Button clicked!')}>Click Me</button>
      <MouseTracker />
    </div>
  );
}

In this example, the MouseTracker component logs the mouse position whenever it moves within the div area, while the button in the MyApp component logs a message when clicked.

b. Keyboard Events

• onKeyDown: Triggered when a key is pressed down on the keyboard.

• onKeyUp: Triggered when a key is released on the keyboard.

• onKeyPress: Triggered when a key is pressed and held down (deprecated; it is recommended to use onKeyDown instead).

Example: Handling the onKeyDown Event

function KeyHandler() {
  const handleKeyDown = e => {
    console.log('Key pressed:', e.key);
  };

  return <input type="text" onKeyDown={handleKeyDown} placeholder="Press any key" />;
}

In this example, when the user presses any key while focused on the input field, the handleKeyDown function logs the name of the pressed key.

c. Focus Events

• onFocus: Triggered when an element gains focus.

• onBlur: Triggered when an element loses focus.

Example: Handling onFocus and onBlur Events

function FocusExample() {
  return (
    <input
      onFocus={() => console.log('Input focused')}
      onBlur={() => console.log('Input blurred')}
      placeholder="Focus and blur me"
    />
  );
}

In this example, when the input field gains or loses focus, a corresponding message is logged to the console.

d. Form Events

• onChange: Triggered when the value of a form control changes.

• onSubmit: Triggered when a form is submitted.

• onInput: Triggered when the user inputs data (including actions like deleting or pasting).

Example: Handling onChange and onSubmit Events

function MyForm() {
  const [value, setValue] = React.useState('');

  const handleChange = e => {
    setValue(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    console.log('Form submitted with value:', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, as the user types into the input field, the handleChange function updates the component's state. When the form is submitted, the handleSubmit function logs the current value of the input field.

Differences Between React Events and Regular HTML Events

a. Event Naming

• Native: All lowercase (e.g., onclick).

• React: CamelCase (e.g., onClick).

b. Event Handler Syntax

• Native events use strings to specify event handlers.

• React events use functions as event handlers.

c. Preventing Default Browser Behavior

• Native: can use 'return false' to prevent the browser's default behavior.

• React: Instead, you must explicitly call preventDefault() to achieve this.

d. Perintah Pelaksanaan Acara
Acara asli dilaksanakan dahulu, diikuti oleh acara sintetik. Peristiwa sintetik menggelembung dan terikat pada dokumen. Oleh itu, adalah dinasihatkan untuk mengelakkan mencampurkan acara asli dan sintetik. Jika peristiwa asli menghentikan penyebaran, ia mungkin menghalang peristiwa sintetik daripada dilaksanakan kerana peristiwa sintetik bergantung pada menggelegak sehingga dokumen untuk dilaksanakan.

Mengapa Bertindak Memilih Peristiwa Sintetik

Sebab React memilih acara sintetik termasuk:

• Konsistensi Merentas Penyemak Imbas: Peristiwa sintetik menghilangkan perbezaan dalam pengendalian acara merentas pelbagai penyemak imbas, memastikan gelagat yang konsisten merentas semua penyemak imbas.

• Pengoptimuman Prestasi: Delegasi acara dan pengumpulan acara dengan ketara mengurangkan overhed pengendalian acara, meningkatkan prestasi aplikasi.

• Pengurusan Acara yang Lebih Baik: Dengan peristiwa sintetik, React boleh mengawal penyebaran peristiwa dengan lebih berkesan, menghalang gelagat lalai dan menyepadukan rapat dengan mekanisme kemas kini kelompok React untuk pengendalian acara yang lebih cekap.

Atas ialah kandungan terperinci React: Memahami Sistem Acara React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!