Warum muss ich die Funktionen meiner onClick-Attribute in anonyme Funktionen in Reagieren?

Question

Entschuldigung für den verwirrenden Titel; wenn ich ein onClick-Attribut auf einem meiner Komponenten wie die folgenden

<Component onClick={this.doSomething()} /> 

habe ich oft seltsame Fehler, je nachdem, was die doSomething() Funktion tatsächlich anruft. Wenn doSomething() den Status wechselt, erhalte ich alle möglichen Renderfehler. Auf der anderen Seite, wenn ich das tue

Alle Fehler gehen weg und alles funktioniert, wie ich es vorhatte. Was genau mache ich, indem ich mein onClick-Attribut in einer anonymen Funktion verpacke, die das funktioniert? Gibt es eine bessere Art zu tun, was ich versuche zu tun?

Answer 1

Wenn Sie dies tun:

<Component onClick={this.doSomething()} /> 

Dann bist du die Funktion und die Zuweisung der Rückgabewert auf den onClick Attribut aufrufen. Wenn this.doSomething() den Komponentenstatus während eines Rendervorgangs ändert, führt dies zu Problemen.

sollten Sie in der Lage sein zu verwenden:

<Component onClick={this.doSomething} /> 

das heißt die () entfernen, so dass die Funktion mit dem Attribut zugewiesen wird, anstatt das Ergebnis der Ausführung der Funktion.

im Konstruktor Ihrer Komponentenklasse, sollten Sie die folgende Zeile enthalten:

this.doSomething = this.doSomething.bind(this); 

Sie onClick={this.doSomething.bind(this)} verwenden, aber dies bedeutet, dass eine neue Funktion jedes Mal erstellt wird, wird die Komponente neu gerendert.

das Bindungsverhalten von this innerhalb einer Komponentenklasse variiert, je nachdem, wie die Komponente erstellt wird:

• Verwenden des class Schlüsselwort (ES6), wird this nicht automatisch
• Mit React.createClass gebunden, this ist gebunden

Mit ES7, haben Sie auch ein paar mehr Optionen:

• Mit doSomething =() => { //... anstelle des function Stichwort
• onClick={::this.doSomething} verwenden, eine Kurzform zu binden this

Dank Zequez für ihre nützlichen Kommentar.