Detaillierte Erklärung der React-Ereignisbindung

1. Was ist

In react Anwendungen werden Ereignisnamen im CamelCase-Format geschrieben. Beispielsweise sollte onclick in onClick umgeschrieben werden.

Die einfachste Ereignisbindung ist wie folgt:

Klasse ShowAlert erweitert React.Component {
  zeigeAlarm() {
    console.log("Hallo");
  }

  rendern() {
    zurückgeben <button onClick={this.showAlert}>anzeigen</button>;
  }
}

Wie oben zu sehen ist, muss die Ereignisbindungsmethode mit {} umschlossen werden.

Der obige Code scheint in Ordnung zu sein, aber wenn der Ausgabecode der Verarbeitungsfunktion durch console.log(this) ersetzt wird und auf die Schaltfläche geklickt wird, ist die Konsolenausgabe undefined

2. Wie binde ich

Um das Problem der korrekten Ausgabe this zu lösen, lauten die gängigen Bindungsmethoden wie folgt:

• Verwenden von „Bind“ in der Rendermethode
• Verwenden von Pfeilfunktionen in der Rendermethode
• Im Konstruktor binden
• Verwenden der Pfeilfunktionsbindung in der Definitionsphase

Verwenden von „Bind“ in der Rendermethode

Wenn Sie eine Klassenkomponente verwenden und einer Komponente/einem Element ein onClick -Attribut zuweisen, wird this jetzt automatisch an die aktuelle Komponente gebunden. Die Lösung für dieses Problem besteht darin, nach der Ereignisfunktion .bind(this) zu verwenden, um this an die aktuelle Komponente zu binden.

Klasse App erweitert React.Component {
  handleKlick() {
    console.log('dies > ', dies);
  }
  rendern() {
    zurückkehren (
      <div beiKlick={this.handleClick.bind(this)}>Test</div>
    )
  }
}

Bei dieser Methode wird die Komponente bei jedem render neu bind , was sich auf die Leistung auswirkt.

Verwenden von Pfeilfunktionen in der Rendermethode

ES6 Kontext wird verwendet, um den Zeiger this an die aktuelle Komponente zu binden. Außerdem wird bei jedem render eine neue Methode generiert, was sich auf die Leistung auswirkt.

Klasse App erweitert React.Component {
  handleKlick() {
    console.log('dies > ', dies);
  }
  rendern() {
    zurückkehren (
      <div onClick={e => this.handleClick(e)}>Test</div>
    )
  }
}

Im Konstruktor binden

bind Sie die aktuelle Komponente im constructor vor, um wiederholtes Binden im render zu vermeiden

Klasse App erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.handleClick = dies.handleClick.bind(dies);
  }
  handleKlick() {
    console.log('dies > ', dies);
  }
  rendern() {
    zurückkehren (
      <div beiKlick={this.handleClick}>Test</div>
    )
  }
}

Verwenden der Pfeilfunktionsbindung in der Definitionsphase

Wie bei der obigen Methode 3 kann wiederholtes Binden im render vermieden werden. Die Implementierung ist außerdem wie folgt sehr einfach:

Klasse App erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
  }
  handleKlick = () => {
    console.log('dies > ', dies);
  }
  rendern() {
    zurückkehren (
      <div beiKlick={this.handleClick}>Test</div>
    )
  }
}

3. Unterschied

Die Unterschiede zwischen den oben genannten vier Methoden sind im Wesentlichen folgende:

• Schreiben: Methode 1 und Methode 2 sind einfach zu schreiben, während Methode 3 zu kompliziert ist
• Leistung: Methode 1 und Methode 2 generieren bei jedem Rendern der Komponente eine neue Methodeninstanz, was zu einer schlechten Leistung führt. Wenn diese Funktion als Eigenschaftswert an eine untergeordnete Komponente übergeben wird, führt dies zu zusätzlichem Rendering. Methode 3 und Methode 4 generieren nur eine Methodeninstanz

Basierend auf dem oben Gesagten ist Methode 4 die beste Ereignisbindungsmethode

Dies ist das Ende dieses Artikels über React Event Binding. Weitere relevante Inhalte zum Thema React Event Binding finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!