Gemeinsame Nutzung mehrerer Methoden der React-Ereignisbindung

Dieser Artikel stellt Ihnen hauptsächlich den Vergleich verschiedener Methoden der Ereignisbindung beim React-Lernen vor. Der Artikel stellt ihn ausführlich anhand von Beispielcode vor. Ich hoffe, er kann Ihnen helfen haben ein tieferes Verständnis für die React-Ereignisbindungsmethode.

Ereignisbindung reagieren

Da Klassenmethoden dies nicht standardmäßig binden, ist der Wert davon undefiniert, wenn Sie vergessen, es beim Aufruf zu binden.

Wenn es nicht direkt aufgerufen wird, sollte dies normalerweise an die Methode gebunden werden. Es gibt mehrere Bindungsmethoden:

1. Verwenden Sie bind, um dies im Konstruktor zu binden

class Button extends React.Component {
constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

2. Verwenden Sie bind, um dies zu binden

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick.bind(this)}>
  Click me
  </button>
 );
 }
}

3. Verwenden Sie die Pfeilfunktion, um dies beim Aufruf zu binden

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={()=>this.handleClick()}>
  Click me
  </button>
 );
 }
}

4. Verwenden Sie die Eigenschaftsinitialisierer-Syntax, um dies zu binden (experimentell)

class Button extends React.Component {
 handleClick=()=>{
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

Vergleich

Beide Methoden 2 und 3 binden dies beim Aufruf.

• Vorteile: Die Schreibmethode ist relativ einfach. Wenn die Komponente keinen Status enthält, muss kein Klassenkonstruktor hinzugefügt werden, um dies zu binden

• Nachteile: Bei jedem Aufruf wird eine neue Methodeninstanz generiert, was Auswirkungen auf die Leistung hat. Wenn diese Funktion als Eigenschaftswert an Komponenten auf niedriger Ebene übergeben wird, können diese Komponenten einer zusätzlichen Aktualisierung unterzogen werden. Rendering, da es jedes Mal neu ist Die Methodeninstanz wird als neue Eigenschaft übergeben.

Methode 1: Binden Sie dies im Klassenkonstruktor, und es ist nicht erforderlich, es beim Aufruf erneut zu binden

• Vorteil: Nur eine Methode wird generiert Instanz, und nach einmaliger Bindung ist keine erneute Bindung erforderlich, wenn diese Methode mehrmals verwendet wird.

• Nachteile: Auch wenn der Status nicht verwendet wird, muss ein Klassenkonstruktor hinzugefügt werden, um dies zu binden, was etwas mehr Code erfordert. . .

Methode 4: Verwenden Sie die Attributinitialisierungssyntax, um die Methode als Pfeilfunktion zu initialisieren, sodass diese gebunden wird, wenn die Funktion erstellt wird.

• Vorteile: Binden Sie dies beim Erstellen einer Methode, es ist keine Bindung im Klassenkonstruktor erforderlich und beim Aufruf ist keine erneute Bindung erforderlich. Kombination der Vorteile von Methode 1, Methode 2 und Methode 3

• Nachteile: Es handelt sich immer noch um eine experimentelle Syntax und muss mit Babel übersetzt werden

Verwandt empfohlen:

Grundlegende Erklärung der jQuery-Ereignisbindungsfunktion

Detaillierte Erklärung, wie jQuery die grundlegende Ereignisbindungsfunktion implementiert

Detaillierte Erläuterung der Funktionsbindungs- und Klassenereignisbindungsfunktionen von JavaScript in ES6

Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung mehrerer Methoden der React-Ereignisbindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!