Wie man die synthetischen Ereignisse von React beschreibt

React Synthetic Event ist ein Ereignisobjekt, das alle Funktionen nativer DOM-Ereignisse in React simuliert, d. h. ein browserübergreifender Wrapper für browsernative Ereignisse. Es definiert synthetische Ereignisse gemäß W3C-Spezifikationen und ist mit allen Browsern kompatibel verfügt über die gleichen Funktionen wie native Browser-Ereignisse. Gleiche Schnittstelle. In React sind alle Ereignisse synthetische und keine nativen DOM-Ereignisse, aber DOM-Ereignisse können über die Eigenschaft „e.nativeEvent“ abgerufen werden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.

1. Was ist ein synthetisches Ereignis? Der browserbasierte Ereignismechanismus von React selbst implementiert eine Reihe von Ereignismechanismen, einschließlich Ereignisregistrierung, Ereignissynthese, Ereignissprudeln, Ereignisversand usw.

Dieser Satz von Ereignismechanismen in React wird als synthetische Ereignisse bezeichnet.

SyntheticEvent Browser-Wrapper für Ereignisse. Es definiert synthetische Ereignisse gemäß der W3C-Spezifikation, ist mit allen Browsern kompatibel und verfügt über dieselbe Schnittstelle wie browsernative Ereignisse. Zum Beispiel

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

In React sind alle Ereignisse synthetisch und keine nativen DOM-Ereignisse, aber DOM-Ereignisse können über die Eigenschaft e.nativeEvent abgerufen werden. Zum Beispiel:

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

Sie können oben sehen, dass React-Ereignisse und native Ereignisse sehr ähnlich sind, es gibt jedoch bestimmte Unterschiede:

Die Ereignisnamen werden unterschiedlich benannt.

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

• Die Event-Handler-Funktion ist Anders geschrieben

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

Obwohl onclick an das DOM-Element gebunden zu sein scheint, bindet es die Ereignis-Proxy-Funktion tatsächlich nicht direkt an den realen Knoten, sondern bindet alle Ereignisse mithilfe einer einheitlichen Methode an die äußerste Schicht der Struktur Zu überwachende Ereignisse. [Verwandte Empfehlungen:

Redis-Video-Tutorial
• ,

  Programmier-Tutorial

  ]

Dieser Ereignis-Listener verwaltet eine Zuordnung, um die Ereignis-Überwachungs- und Verarbeitungsfunktionen in allen Komponenten zu speichern. Wenn eine Komponente gemountet oder nicht gemountet wird, fügen Sie einfach einige Objekte in diesen einheitlichen Ereignis-Listener ein oder entfernen Sie sie.

Wenn ein Ereignis auftritt, wird es zunächst von diesem einheitlichen Ereignis-Listener verarbeitet. Anschließend wird die eigentliche Ereignisbehandlungsfunktion im Mapping gefunden und aufgerufen. Dies vereinfacht den Ereignisverarbeitungs- und Recyclingmechanismus und verbessert die Effizienz erheblich. 2. Ausführungsreihenfolge

Bezüglich der Ausführungsreihenfolge von synthetischen React-Ereignissen und nativen Ereignissen können Sie sich das folgende Beispiel ansehen:

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;

Die Ausgabereihenfolge lautet:

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

Die folgenden Schlussfolgerungen können gezogen werden:

Reagieren Sie auf alle Ereignisse. Sie sind alle auf dem Dokumentobjekt gemountet.

Wenn das echte DOM-Element das Ereignis auslöst, sprudelt es zum Dokumentobjekt und verarbeitet dann das React-Ereignis.

• Also das native Ereignis wird zuerst ausgeführt und dann wird das React-Ereignis verarbeitet

• Schließlich Der entsprechende Prozess zum tatsächlichen Ausführen des im Dokument montierten Ereignisses

• ist wie in der Abbildung dargestellt:
Wenn Sie möchten Um Blasenverhalten in verschiedenen Zeiträumen zu verhindern, müssen Sie verschiedene Methoden verwenden, die wie folgt lauten:

Block Um Blasenbildung zwischen synthetischen Ereignissen zu verhindern, verwenden Sie e.stopPropagation()

, um die Blasenbildung zwischen synthetischen Ereignissen zu stoppen und Ereignisse im äußersten Dokument und verwenden Sie e.nativeEvent.stopImmediatePropagation()

• , um zu verhindern, dass synthetische Ereignisse im äußersten Dokument sprudeln, indem Sie e.target beurteilen

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

  3. Zusammenfassung

• Der React-Ereignismechanismus lässt sich wie folgt zusammenfassen:

Auf React registrierte Ereignisse werden schließlich an das DOM des Dokuments gebunden und nicht an das DOM, das der React-Komponente entspricht (der Speicheraufwand wird reduziert). weil alle Ereignisse an das Dokument gebunden sind und andere Knoten keine gebundenen Ereignisse haben)

React selbst implementiert eine Reihe von Ereignis-Bubbling-Mechanismen, daher ist unser event.stopPropagation() ungültig.

• React führt eine Rückverfolgung von der ausgelösten Komponente über die Warteschlange zur übergeordneten Komponente durch und ruft dann den in ihrem JSX definierten Rückruf auf.

• React verfügt über einen eigenen Satz synthetischer Ereignisse, SyntheticEvent :
Video zum Programmieren
• )

Das obige ist der detaillierte Inhalt vonWie man die synthetischen Ereignisse von React beschreibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!