Bagaimana untuk menerangkan peristiwa sintetik tindak balas

Peristiwa sintetik React ialah objek acara yang mensimulasikan semua keupayaan peristiwa DOM asli dalam React, iaitu, pembalut silang penyemak imbas untuk peristiwa asli penyemak imbas, ia mentakrifkan peristiwa sintetik mengikut spesifikasi W3C, serasi dengannya semua pelayar, dan mempunyai antara muka yang sama seperti peristiwa asli pelayar. Dalam React, semua acara adalah sintetik dan bukan acara DOM asli, tetapi acara DOM boleh diperolehi melalui sifat "e.nativeEvent".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.

1. Apakah itu peristiwa sintetik? berasaskan Mekanisme acara itu sendiri melaksanakan satu set mekanisme acara, termasuk pendaftaran acara, sintesis peristiwa, menggelegak acara, penghantaran acara, dll.

Dalam React, set mekanisme peristiwa ini dipanggil peristiwa sintetik

SyntheticEvent

Acara sintetik React (SyntheticEvent) ialah objek peristiwa yang React mensimulasikan semua keupayaan peristiwa DOM asli, iaitu, menyemak imbas silang bagi pelayar asli pembalut peranti acara. Ia mentakrifkan peristiwa sintetik mengikut spesifikasi W3C, serasi dengan semua penyemak imbas, dan mempunyai antara muka yang sama seperti peristiwa asli penyemak imbas. Contohnya,

Dalam React, semua peristiwa adalah sintetik dan bukan peristiwa DOM asli, tetapi peristiwa DOM boleh diperolehi melalui sifat e.nativeEvent. Contohnya:

const button = <button onClick={handleClick}>按钮</button>

Seperti yang anda lihat daripada di atas, peristiwa React dan peristiwa asli adalah sangat serupa, tetapi terdapat juga perbezaan tertentu:

const handleClick = (e) => console.log(e.nativeEvent);;
const button = <button>按钮</button>

Nama acara dinamakan berbeza

// 原生事件绑定方式
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件绑定方式
const button = <button onClick={handleClick}>按钮命名</button>

Fungsi pengendali acara ditulis secara berbeza

Walaupun onclick nampaknya terikat pada elemen DOM , tetapi sebenarnya, fungsi proksi acara tidak terikat secara langsung pada nod sebenar, tetapi semua peristiwa terikat pada lapisan paling luar struktur, dan peristiwa bersatu digunakan untuk memantau. [Cadangan berkaitan:

Tutorial Video Redis

// 原生事件 事件处理函数写法
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>按钮命名</button>

,

Tutorial Pengaturcaraan]Pendengar acara ini mengekalkan pemetaan untuk menyimpan fungsi mendengar dan memproses acara di dalam semua komponen. Apabila komponen dipasang atau dinyahlekap, cuma masukkan atau alih keluar beberapa objek pada pendengar acara bersatu ini.

Apabila sesuatu peristiwa berlaku, ia mula-mula diproses oleh pendengar acara bersatu ini, dan kemudian fungsi pengendalian peristiwa sebenar ditemui dalam pemetaan dan dipanggil. Ini memudahkan pemprosesan acara dan mekanisme kitar semula, serta meningkatkan kecekapan.

2. Urutan pelaksanaan

Mengenai urutan pelaksanaan peristiwa sintetik React dan peristiwa asli, anda boleh melihat contoh berikut:

Jujukan output Untuk:

import  React  from 'react';
class App extends React.Component{

  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    console.log("React componentDidMount！");
    this.parentRef.current?.addEventListener("click", () => {
      console.log("原生事件：父元素 DOM 事件监听！");
    });
    this.childRef.current?.addEventListener("click", () => {
      console.log("原生事件：子元素 DOM 事件监听！");
    });
    document.addEventListener("click", (e) => {
      console.log("原生事件：document DOM 事件监听！");
    });
  }
  parentClickFun = () => {
    console.log("React 事件：父元素事件监听！");
  };
  childClickFun = () => {
    console.log("React 事件：子元素事件监听！");
  };
  render() {
    return (
      <div ref={this.parentRef} onClick={this.parentClickFun}>
        <div ref={this.childRef} onClick={this.childClickFun}>
          分析事件执行顺序
        </div>
      </div>
    );
  }
}
export default App;

Kesimpulan berikut boleh dibuat:

原生事件：子元素 DOM 事件监听！ 
原生事件：父元素 DOM 事件监听！ 
React 事件：子元素事件监听！ 
React 事件：父元素事件监听！ 
原生事件：document DOM 事件监听！

React Semua peristiwa dipasang pada objek dokumen

• Apabila elemen DOM sebenar mencetuskan acara, ia akan menggelembung ke objek dokumen dan kemudian memproses acara React

• Jadi acara asli akan dilaksanakan dahulu, dan kemudian acara React akan diproses

• Akhir sekali, acara yang dipasang pada dokumen sebenarnya dilaksanakan

• Proses yang sepadan adalah seperti yang ditunjukkan dalam rajah :

Jadi saya fikir Untuk mengelakkan tingkah laku menggelegak dalam tempoh masa yang berbeza, gunakan kaedah yang berbeza, seperti berikut:

Untuk mengelakkan menggelegak antara peristiwa sintetik, gunakan e.stopPropagation()

• Halang menggelegak peristiwa dan peristiwa sintetik pada dokumen paling luar, gunakan e.nativeEvent.stopImmediatePropagation()
• Peristiwa bertindak balas Mekanisme diringkaskan seperti berikut:
Acara yang didaftarkan pada React akhirnya akan terikat pada DOM dokumen, bukannya DOM yang sepadan dengan komponen React (overhed memori dikurangkan kerana semua peristiwa terikat Pada dokumen, nod lain tidak mempunyai peristiwa terikat)

document.body.addEventListener('click', e => {   
    if (e.target && e.target.matches('div.code')) {  
        return;    
    }    
    this.setState({   active: false,    });   }); 
}

React sendiri melaksanakan satu set mekanisme menggelegak acara, jadi inilah sebabnya acara kami.stopPropagation() tidak sah.

Bertindak balas kesan kembali daripada komponen yang dicetuskan kepada komponen induk melalui baris gilir, dan kemudian memanggil panggilan balik yang ditakrifkan dalam JSX mereka

• React telah satu set Peristiwa sintetik anda sendiri SyntheticEvent

• (Perkongsian video pembelajaran:
Video Pengaturcaraan Asas
• )

Atas ialah kandungan terperinci Bagaimana untuk menerangkan peristiwa sintetik tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!