Was ist der Unterschied zwischen Reaktionsereignissen und nativen Ereignissen?

Der Unterschied zwischen Reaktionsereignissen und nativen Ereignissen besteht darin, dass Ereignisse in Reaktion an das Dokument gebunden sind, während native Ereignisse an den Dom gebunden sind. In Bezug auf die Bindung haben Ereignisse im DOM Vorrang vor Ereignissen im Dokument. Das Ereignisobjekt von React ist ein synthetisches Objekt, kein natives.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist der Unterschied zwischen React-Ereignissen und nativen Ereignissen?

Ereignisse in React sind an das Dokument gebunden.

Und native Ereignisse sind an den Dom gebunden.

Also im Vergleich zum Bindungsort sind die Dom-Ereignisse im Dokument müssen Vorrang vor Ereignissen im Dokument haben

Was sind Ereignisse?

Zuallererst dient JS dazu, einige dynamische Vorgänge zu erreichen, und Benutzer möchten manchmal einige Funktionen implementieren, z. B. das Senden von Formularen, Mausklicks usw., sodass sie dieses Ereignis im Browser auslösen müssen, und dann wird der Browser dies tun Sense (oder wenn das Verhalten des Benutzers erfasst wird) reagiert auf das Ereignis und verarbeitet es. Dies wird als Ereignis bezeichnet.

Was ist ein Ereignisobjekt?

Wenn das System den Handler aufruft, kapselt es alle Informationen über das Ereignis in ein Objekt und übergibt sie dann als Parameter an den Ereignishandler. Dieses Objekt ist das Ereignisobjekt. In nativen Funktionen sehen Sie häufig ein Ereignis, und dieses Ding nennen wir Ereignisobjekt.

react hat die folgenden Vorteile bei der Ereignisverarbeitung:

• Fast alle Ereignisse werden an das Dokument delegiert, um den Zweck der Leistungsoptimierung zu erreichen

• Für jede Art von Ereignis wird die Verteilungsfunktion einheitlich verwendet (dispatchEven ) Versandereignis

• Das Ereignisobjekt (Ereignis) ist ein synthetisches Objekt (syntheticEvent), kein natives

Synthetisches Ereignis reagieren

Warum wird es in ein synthetisches Ereignis abstrahiert?

Wenn alle Ereignisbehandlungsfunktionen an das DOM gebunden sind, wird dies bei der Reaktion der Seite beeinträchtigt, was dazu führt, dass die Seite sehr langsam ist. Um den Missbrauch solcher DOM-Ereignisse zu vermeiden und die Systemunterschiede zwischen verschiedenen Browserereignissen auf der untersten Ebene abzuschirmen, implementiert React eine Zwischenschicht – SyntheticEvent wird das normalerweise tun. Es wird in JSX so geschrieben:

<div onClick={this.onClick}>我是react点击事件</div>

Aber in React ist das Click-Ereignis nicht wirklich an den DOM des Div gebunden, sondern an das DOCUMENT, wenn das Ereignis eintritt und beim Erreichen des Dokumentieren, React übergibt den Inhalt des Ereignisses zur Verarbeitung an die entsprechende Funktion Wenn Sie auf andere leere Bereiche klicken, müssen Sie Modal schließenEinige Bibliotheken von Drittanbietern einführen, die mit nativen Ereignissen implementiert sind, und wenn es eine Interaktion untereinander gibt

usw., müssen Sie native Ereignisse für die Geschäftslogikverarbeitung verwenden .

Da native Ereignisse an das echte DOM gebunden werden müssen, werden sie normalerweise während der Ausführungsphase der Funktion „componentdidmout/ref“ gebunden.

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        
    }
    render () {
        return <div>demo</div>
    }
}

Gemischte Verwendung von nativen Ereignissen und synthetischen Ereignissen

Wenn Sie native Ereignisse und synthetische Ereignisse in einem Geschäftsszenario mischen müssen, müssen Sie bei der Verwendung die folgenden Punkte beachten:

Die Reihenfolge der Antworten

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        console.log('dom event!')
    }
    onReactClick = (e) => {
        console.log('react event!')
    }   
    render () {
        return <div onClick={this.onReactClick}>demo</div>
    }
}

Ergebnisausgabe:

dom event! react event!

Ursachenanalyse: Zunächst wissen wir, dass native Ereignisse an das DOM gebunden sind, während synthetische Ereignisse an das Dokument gebunden sind, sodass die Ereignisse im DOM zuerst in Blasen umgewandelt, dann zuerst ausgeführt und dann ausgeführt werden Beim Sprudeln des Dokuments wird das synthetische Ereignis ausgeführt

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Reaktionsereignissen und nativen Ereignissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!