Bei Verwendung der ES5-Entwicklung mit ReactJS kann eine Komponente wie folgt angegeben werden:
%Vor% In diesem Beispiel verweist this auf das Objekt selbst, was das erwartete natürliche Verhalten ist.
Frage
Meine Frage ist:
Wie verwenden Sie ES6 zum Erstellen von Komponenten?
%Vor% Wenn Sie wissen, dass in% this das instanziierte Objekt selbst referenziert, wenn Sie den neuen Operator verwenden, kann mir jemand sagen, was der wahre Zweck der Verwendung von bind ist? Es ist etwas mit den internen Mechanismen von React verbunden?
bind ist nur Kern-Javascript. So funktionieren Bindungsereignisse. Es ist kein React-Konzept.
Der folgende Artikel erklärt es ziemlich gut.
Begrenzte Funktion in JavaScript ist eine Funktion, die an einen bestimmten Kontext gebunden ist. Das bedeutet, egal wie Sie es nennen, der Kontext des Anrufs bleibt gleich.
Um eine beschränkte Funktion aus der regulären Funktion zu erstellen, wird die Bind-Methode verwendet. Binde Methode nehmen Kontext, an den Sie Ihre Funktion als erstes Argument binden möchten. Der Rest der Argumente sind Argumente, die immer an eine solche Funktion übergeben werden. Es gibt als Ergebnis eine beschränkte Funktion zurück.
Außerdem sollten Sie die gesamte Ereignisbindung in Ihrem Konstruktor und nicht in Ihrer Rendermethode ausführen. Dies verhindert mehrere Bind-Aufrufe.
Hier sind noch ein paar gute Informationen zu diesem Thema. Sie sagen:
Wir empfehlen, dass Sie Ihre Ereignishandler im Konstruktor binden, so dass sie nur einmal für jede Instanz gebunden werden.
Einer der Sinn von bind in React ES6-Klassen ist, dass Sie manuell binden müssen.
%Vor%Keine automatische Bindung
Methoden folgen der gleichen Semantik wie reguläre ES6-Klassen, was bedeutet, dass sie diese nicht automatisch an die Instanz binden. Sie müssen explizit .bind (this) oder arrow functions = & gt;:
verwendenWir empfehlen, dass Sie Ihre Event-Handler im Konstruktor binden, so dass sie nur einmal für jede Instanz gebunden werden:
Sie können mehr aus der Dokumentation lesen: Ссылка
Erläuterung:
Der Wert von "this" hängt davon ab, wie die Funktion aufgerufen wird. Wenn Sie this.alertSomething als onClick-Handler Ihrer Schaltfläche angeben, ändert sich deren Aufruf, da Sie eine direkte Referenz auf diese Funktion bereitstellen, und sie wird nicht für Ihre Objektinstanz aufgerufen (nicht sicher, ob ich das formuliere) richtig).
Die Funktion .bind gibt eine neue Funktion zurück, bei der "this" dauerhaft auf den Wert gesetzt ist, der an sie übergeben wurde.
ECMAScript 5 führte Function.prototype.bind ein. Wenn f.bind (someObject) aufgerufen wird, wird eine neue Funktion mit dem gleichen body und scope wie f erstellt. Wenn dies jedoch in der ursprünglichen Funktion geschieht, wird sie in der neuen Funktion unabhängig vom Verhalten der Funktion permanent an das erste Argument von bind gebunden verwendet werden.
Es ist am besten, dies im Konstruktor Ihrer Komponente zu tun, so dass .bind nur einmal für jeden Ihrer Handler und nicht für jeden Rendervorgang passiert.
Tags und Links javascript reactjs bind