Erster veröffentlicht unter: https://mingjiezhang.github.io/.
In JavaScript ist dieses Objekt an die funktionsbasierte Ausführungsumgebung der Laufzeit (dh Kontext) gebunden.
Beginnen Sie mit der Demo in React
Als Facebook kürzlich React aktualisiert hat, wurde die Klasse in ES6 der Komponentenerstellungsmethode hinzugefügt. Facebook empfiehlt außerdem, dass die Komponentenerstellung eine Komponentenklasse definieren, indem eine von react.comPonent geerbte Klasse definiert wird. Offizielle Demo:
class LikeButton extends React.Component {constructor() {super();this.state = {liked: false};this.handleClick = this.handleClick.bind(this);}handleClick() {this.setState({liked: !this.state.liked});}render() {const text = this.state.liked ? 'gemocht': 'haven/' t gemocht '; return (<div onclick = {this.handleclick}> du {text} this. Klicken, um umzuschalten.In der obigen Demo gibt es einen Großteil dieser Verwendung. In der Klasse wie Button erweitert React.comPonent die Klasse, da dies ausdrücklich durch ihren Kontext bestimmt wird, sodass wir die Verwendung dieser Definition in der Klassendefinition nicht kennen können. Es entspricht neu der oben definierten Klasse und ruft zunächst die Funktion Constructor () auf, die dieser Kontext dieses State ist das Instanzobjekt; In ähnlicher Weise ist der dieser Kontext dieses. Das Problem ist, dass Onclick = {this.handleclick} kein Problem damit gibt, den Verweis auf diese Funktion zu erhalten, und der Kontext hier ist das Objekt.
Zu diesem Zeitpunkt ist das Problem, dass HandleClick () in React.CreateClass automatisch an die Like -Button -Instanz bin, wenn das Onclick -Ereignis ausgelöst wird. Zu diesem Zeitpunkt ist der Kontext dieser Funktion die Instanz. Im Schreiben der ES6 -Klasse hat Facebook jedoch die automatische Bindung abgesagt. Nach dem Instanziieren wie Button ist der Kontext von HandleClick () die Unterstützungsinstanz der DIV (Backing -Instanz), und der Kontext von Handleclick () ist ursprünglich eine Instanz von ähnlichem Button. Wir haben mehrere Lösungen für dieses Problem.
Verwenden Sie Bind () Funktion, um den Kontext zu ändern
Sie können die Funktion Constructor () in der Klassenerklärung verwenden
this.handleclick = this.handleclick.bind (this);
Diese Methode ist eine Bind () -Bindung und mehrmals verwendet. In dieser Methode können wir nach der Erklärung der Instanz die Funktion HandleClick () überall in der Instanz verwenden, und der Kontext dieser HandleClick () -Funktion ist ein ähnliches Instanzobjekt.
Darüber hinaus können wir diesen Kontext auch an das Like -Button -Instanzobjekt binden, in dem die Funktion verwendet wird. Der Code ist wie folgt
<div onclick = {this.handleclick.bind (this)}> Sie {text} dies. Klicken Sie, um umzuschalten. </Div>Diese Methode erfordert, dass wir jedes Mal mit der Funktion Bind () an das Komponentenobjekt binden.
Die Pfeilfunktion von ES6
Eine Pfeilfunktion => wurde ES6 hinzugefügt. Zusätzlich zur Bequemlichkeit hat eine Pfeilfunktion eine andere Funktion, die diese Funktion an den Kontext binden soll, in dem sie definiert ist. Diese Funktion kann uns auch helfen, dieses Problem zu lösen. Verwenden Sie den folgenden Code:
<div onclick = {() => this.handleclick ()}> Sie {text} dies. Klicken Sie, um umzuschalten. </Div>Auf diese Weise wird der Kontext davon.HandleClick () an das Like -Button -Instanzobjekt gebunden. Persönlich glaube ich, dass die Verwendung von Pfeilfunktionen JavaScript näher am objektorientierten Programmierstil nimmt.
Diese Zusammenfassung
Das Wesen davon ist: Dies hat nichts mit Umfang zu tun, sondern nur mit dem Ausführungskontext.
Die oben genannte Methode, um diese Komponente in ES6 zu erstellen, um Ihnen den Editor vorgestellt zu haben. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!