6 Möglichkeiten, JavaScript zu binden, ist dieses Schlüsselwort in React, ES6 & ES7

Schlüsselpunkte

• JavaScripts this Schlüsselwort kann verwirrend sein, insbesondere innerhalb von Rückruffunktionen. In React verweist this den Kontext der Komponente, was zu Problemen führen kann, wenn Funktionskontexte verschoben werden (z. B. Rückrufe).
• Es gibt verschiedene Methoden, um this Bindung zu verwalten: Erstellen einer this -Referation (Alias ​​this), die zur Laufzeit den richtigen Kontext injiziert (Binding this), die React-Komponentenmethoden unter Verwendung von ES2015-Pfeilfunktionen unter Verwendung von ES2016 nutzen Binden Sie die Syntax (falls unterstützt) oder verwenden Methoden, die ein explizites this Argument akzeptieren.
• Die optimale Methode hängt von Faktoren wie Leistung, Debugging -Leichtigkeit und persönlicher Präferenz ab. Aliasing this priorisiert die Leistung; Komponentenmethoden oder benannte Funktionen verbessern das Debuggen; Pfeilfunktionen sind für kurze Inline -Funktionen präzise.

JavaScripts this Schlüsselwort stolpert häufig Entwickler. Im Gegensatz zu Sprachen mit strengen Klassenmodellen ist sein Verhalten nicht immer vorhersehbar, insbesondere in Rückruffunktionen, bei denen die Anrufe über Ihre Kontrolle hinausgeht. Der externe Code kann den Kontext der Funktion mit new oder Methoden auf Function.prototype leicht wiederherstellen. Dies führt zu unvorhersehbarem Verhalten, was häufig zu übermäßigen .bind(this) -Anrufen während des Callback-Codes führt. Das Problem

Die Verwendung von

auf die Referenzkomponentenkontext erbt diese Mehrdeutigkeit. Betrachten Sie dieses gemeinsame React -Muster: this

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

Dies ergibt ein

, weil TypeError keine Funktion ist. Der Versprechen -Rückruf verändert den internen Kontext der Funktion und verweist auf das falsche Objekt. Lassen Sie uns Lösungen erkunden. Die Lösungen this.setState this Diese Lösungen reichen von etablierten JavaScript-Techniken bis hin zu reagspezifischen Methoden und neueren (potenziell nicht unterstützten) Merkmalen.

1. Alias ​​this

Ein langjähriger Ansatz beinhaltet die Erstellung einer zweiten

-Referation auf der oberen Ebene der Komponente:

this

Einfach und leicht zu verstehen, bietet dies eine klare visuelle Garantie für den richtigen Kontext. Obwohl es scheinbar kontraintuitiv ist, ist es effektiv und unkompliziert.

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

2. Binden Sie dies

Diese Methode injiziert zur Laufzeit den richtigen Kontext in den Rückruf:

Jede JavaScript -Funktion hat eine

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));

-Methode zum Angeben

. Einmal gebunden, kann der Kontext nicht außer Kraft gesetzt werden, was sich auf das richtige Objekt bezieht. Dieser Ansatz ist jedoch weniger lesbar und wird in tief verschachtelten asynchronen Code umständlich, was für jede Funktion eine manuelle Bindung erfordert. bind

3. Reagieren Sie Komponentenmethoden

React -Komponenten ermöglichen das Definieren von Methoden, die automatisch mit dem richtigen this -Kontext gebunden sind, wenn React.createClass verwendet wird. Dies ermöglicht das Verschieben von Rückruflogik in die Komponente:

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

elegant für einfache Komponenten fördert der sauberere Code und beseitigt Kontextbedenken. Beachten Sie, dass diese autobindende nicht für ES2015 -Klassen gilt. Dort werden alternative Methoden benötigt. React warnt Sie, wenn Sie unnötig zu einer Komponentenmethode sind. .bind(this)

4. ES2015 -Pfeilfunktionen

ES2015 Pfeilfunktionen (

) sind prägnant und erben => aus ihrem umschließenden Bereich: this

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

bleibt unabhängig vom Nistniveau korrekt. Der Nachteil ist der Verlust der Funktionsnamen, das Debuggen behindert (Stack -Spuren Show "(anonyme Funktion)"). Babel Compilation verwendet häufig den Alias, dass dieser Ansatz den Kontext aufrechterhält. this

5. ES2016 BIND -Syntax (Vorschlag)

a Vorgeschlagene ES2016 (ES7) Bind -Syntax verwendet

, um eine Funktion an einen gegebenen :: -Werte zu binden. Zum Beispiel: this

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));

obwohl es interessant ist, wird diese Syntax nicht weitgehend unterstützt und leidet unter ähnlichen Nachteilen wie

, wobei häufig das gleiche Ergebnis zusammengestellt wird. .bind(this)

6. Methodenspezifische Ansätze

Einige Funktionen ermöglichen das Übergeben eines expliziten

-Arguments (z. B. this endgültiges Argument): map

React.createClass({
  componentWillMount: function() {
    this.setState({ loading: true });
    fetch('/').then(this.loaded);
  },
  loaded: function loaded() {
    this.setState({ loading: false });
  }
});

Dies ist inkonsistent; In den meisten Funktionen fehlt diese Funktion.

Schlussfolgerung

Es gibt mehrere Ansätze für die Verwaltung von

Kontext. Priorisieren Sie die Leistung mit alias dies, debuggen die Leichtigkeit mit Komponentenmethoden oder benannten Funktionen und die Übersicht mit Pfeilfunktionen für kurze Inline -Code. Die beste Wahl hängt von Ihren Prioritäten und Ihrem Codierungsstil ab. Vermeiden Sie übermäßig komplexe Lösungen, die die Lesbarkeit und Wartbarkeit behindern. this

häufig gestellte Fragen (FAQs)

(FAQs werden aus der Kürze weggelassen, da sie weitgehend im Originaltext behandelt werden und die Länge dieser bereits umfassenden Antwort erheblich erhöhen würden. Die ursprünglichen FAQs bieten eine hervorragende Abdeckung dieses Themas.)

Das obige ist der detaillierte Inhalt von6 Möglichkeiten, JavaScript zu binden, ist dieses Schlüsselwort in React, ES6 & ES7. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!