Analyse der Gründe für die Bindung in React-Komponenten

Dieser Artikel teilt Ihnen mit, warum dies in die React-Komponentenmethode eingebunden werden sollte. Der Inhalt ist sehr gut. Ich hoffe, er kann allen helfen.

Wenn Sie versucht haben, React für die Front-End-Entwicklung zu verwenden, müssen Sie den folgenden Code gesehen haben:

//假想定义一个ToggleButton开关组件
class ToggleButton extends React.Component{
    constructor(props){
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this); 
        this.handleChange = this.handleChange.bind(this);
    }
    handleClick(){
        this.setState(prevState => ({
            isToggleOn: !preveState.isToggleOn
        }));
    }
    handleChange(){
        console.log(this.state.isToggleOn);
    }
    render(){
        return(
           <button onClick={this.handleClick} onChange={this.handleChange}>
                {this.state.isToggleOn ? &#39;ON&#39;:&#39;OFF&#39;}
            </button>
        )
    }
}

Warum müssen Sie dies an alle Instanzmethoden binden? im Konstruktor?

1. Details zur Codeausführung

Das obige Beispiel ist nur die Definition einer Komponentenklasse, wenn sie in anderen Komponenten aufgerufen oder mit der Methode ReactDOM.render( ) gerendert wird Die Schnittstelle wird generiert, da die Komponente wiederverwendet werden kann und die objektorientierte Programmierung für ihre Positionierung sehr gut geeignet ist. Gemäß den Grundregeln , auf die this hinweist, können wir wissen, dass this hier letztendlich auf die Instanz der Komponente verweist.

Wenn die Komponenteninstanz generiert wird, wird der Konstruktor constructor ausgeführt. Hier konzentrieren wir uns auf die Analyse der folgenden Codezeile:

this.handleClick = this.handleClick.bind(this);

Zu diesem Zeitpunkt zeigt this auf Anschließend sucht der Ausdruck auf der rechten Seite der Zuweisungsanweisung zunächst nach der Methode this.handleClick( ) (Suche von nah nach fern entlang der Prototypenkette). 🎜> Prototyp-Methode this.handleClick( ) finden Sie dann hier , wobei bind(this) auf die neu generierte Instanz verweist, also nach der Berechnung des Ausdrucks auf der rechten Seite der Zuweisungsanweisung eine neue Methode Die Angabe von this wird generiert und dann wird die Zuweisungsoperation ausgeführt, um die neu generierte Instanz zu generieren. Die Funktion wird dem this-Attribut der Instanz zugewiesen, dem handleClick Hier wird es direkt als Instanzattribut generiert. Zusammenfassend bewirkt die obige Anweisung Folgendes: handleClick

ändert die Prototypmethode in eine Instanzmethode handleClick( ) und zwingt das handleClick( ) in dieser Methode, auf das aktuelle Beispiel zu verweisen. this

2. Warum wird bind(this) beim ES5-Schreiben nicht verwendet?

Die ES5-Schreibmethode bezieht sich auf die Verwendung der

-Methode zum Definieren von Komponenten React.createClass( ) V16 und höher wurde in dieser Version entfernt, und Sie können die Details dieser Methode sehen, indem Sie den Quellcode früherer Versionen lesen. React

  //旧版本`react`中`createClass`方法片段
  if (this.__reactAutoBindMap) {
        this._bindAutoBindMethods();
  }

In der alten Version von

können Sie den obigen Code in der Definition von React sehen. Abgesehen von anderer komplexer Logik können Sie am Methodennamen erkennen, dass es sich um eine automatische Bindung handelt. Methode: Was in dieser Methode tatsächlich durchgeführt wird, ist die erzwungene Bindung von createClass() an die benutzerdefinierte Methode in der Komponente. Interessierte Leser können den Quellcode für Details überprüfen. this

3. Die Notwendigkeit, dies zu binden

Das Binden eines Ereignis-Listeners an eine Komponente besteht darin, auf die Interaktion des Benutzers zu reagieren. Wenn eine bestimmte Interaktion ein Ereignis auslöst, ist dies häufig erforderlich um den Wert eines bestimmten Zustands der Komponente zu manipulieren, um eine Rückmeldung zum Klickverhalten des Benutzers zu geben. Wenn diese Funktion ausgelöst wird, müssen Entwickler in der Lage sein, die Zustandssammlung exklusiv für diese Komponente abzurufen (z. B. in Schalterkomponente oben 🎜>Im Beispiel markiert der Wert seines internen Statusattributs

, dass die Schaltfläche ToggleButtonEINstate.isToggleOn ​​oder AUS anzeigen soll, sodass die Listener-Funktion dazu gezwungen wird Hier gebunden Es ist auch leicht zu verstehen, auf die aktuelle Instanz zu verweisen. this

Die Bindung im React-Konstruktor bindet die Antwortfunktion an die Komponente Component, um sicherzustellen, dass sie bei Verwendung in dieser Handlerfunktion immer auf die Instanz dieser Komponente verweisen kann.

4. Wenn dies

nicht in der Klassendefinition gebunden ist, wenn der Zeiger von

nicht in der Klassendefinition gebunden ist, löst die Klickaktion des Benutzers das -Methode, eigentlich Was ausgeführt wird, ist die

-Prototypmethode this, aber dies scheint keine Auswirkungen zu haben. Wenn das this.handleClick( )-Attribut im Konstruktor der aktuellen Komponente initialisiert wird, dann wenn die Prototypmethode Wird ausgeführt, erhält direkt das Instanz-Attribut . Wenn das Attribut state nicht in der Konstruktion initialisiert ist (z. B. die UI-Komponente in React), bedeutet dies, dass die Komponente keinen eigenen Status hat Zu diesem Zeitpunkt scheint selbst der Aufruf der Prototyp-Methode keine Wirkung zu haben. this.statestatestateTatsächlich ist dies tatsächlich der Fall. Was

hier im Voraus vermeiden möchte, ist das berühmte Problem des Fehlens dieses Zeigers

. bind(this)Wenn Sie beispielsweise destrukturierende Zuweisung

verwenden, um eine bestimmte Attributmethode zu erhalten, führt dies zu dem Problem, dass diese bei der Referenzkonvertierung verloren geht:

const toggleButton = new ToggleButton();

import {handleClick} = toggleButton;

Im obigen Beispiel Die erhaltene Destrukturierungszuweisung Diese Methode meldet einen Fehler, wenn sie ausgeführt wird. Das Innere der Klasse wird zur Ausführung im

strengen Modus

gezwungen. Der handleClick hier verliert seinen ursprünglichen Zeiger in der Zuweisung und zeigt darauf zur Laufzeit. und hat keine Attribute. thisundefined Eine weitere Einschränkung besteht darin, dass die Antwortfunktion ohne Bindung undefined bei asynchroner Ausführung Probleme verursachen kann. Wenn sie als Rückruffunktion an eine asynchrone Ausführungsmethode übergeben wird, geht sie aufgrund von

ebenfalls verloren Zeiger verursacht einen Fehler.

Wenn es kein this gibt, das die Angabe der Komponenteninstanzmethode erzwingt, können Sie die Referenzkonvertierung oder nicht sicher als Rückruffunktion zum Übergeben von Bei der zukünftigen Verwendung ist dies für die spätere Verwendung und die gemeinsame Entwicklung unpraktisch.

5. Zusammenfassung

ist sehr flexibel zu verwenden, aber diese Flexibilität bringt auch viel Verwirrung mit sich. Das thisbind(this) dient dazu, die Sprachfehler von JavaScript zu verbessern. Dieses Problem tritt bei der Verwendung von für Plug-Ins auf Die Auswirkungen dieses Problems werden bei der Entwicklung von Frameworks deutlicher sichtbar. Der Grund dafür, dass es sich um einen Fehler auf Sprachebene handelt, liegt darin, dass die Richtung von javascript in Java besser mit der normalen Denklogik im selben Szenario übereinstimmt und die Sprache, wenn die Bindung nicht in this angezeigt wird Es werden Operationsergebnisse angezeigt. Die Benennung der Methode stimmt nicht mit der Bedeutung überein. javascript

Verwandte Empfehlungen:

Analyse der Gründe, warum Animationen in React nicht wirksam werden

Verwendung von Reagieren: Komponenten reagieren Interne Statusverwaltung

Das obige ist der detaillierte Inhalt vonAnalyse der Gründe für die Bindung in React-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!