Differenz von .bind() Pfeil function() = Nutzung> in Reaktion

Question

Angenommen, ich eine Funktion generateList() haben, die den Zustand aktualisiert und Abbilden es zu einem onClick zu einem <li>.

<li className="some-classname"} 
    onClick={this.generateList('product')}> Product </li> 

Es gibt Zeiten, dass ich begegne Fehler wie:

Warning: setState(...): Cannot update during an existing state transition (such as within). Render methods should be a pure function of props...

Und so machen. Ich verminten im Internet nach Antworten auf diese und kam auf solche answer wie:

<li className="some-classname"} 
    onClick={this.generateList.bind(this, 'product')}> Product </li> 

Aber ich sah eine Antwort zu (in Github, aber kann nicht scheinen, um es zu finden), dass

<li className="some-classname"} 
    onClick={() => this.generateList('product')}> Product </li> 

Was ist der Hauptunterschied? Was ist passender und effizienter? Und warum sollten wir solche .bind und () => beim Mapping einer Funktion zu einem onClick oder als eine Eigenschaft einer React-Komponente (die ich meistens verwende) verwenden?

Answer 1

Wenn Sie versuchen:

<li className="some-classname"} 
    onClick={this.generateList('product')}> Product </li> 

Diese Funktion ausgeführt wird auf jeder machen - was eine zusätzliche machen produzieren kann, das ist, was den Fehler wirft. Was wir wollen, ist definieren eine Funktion, die später aufgerufen wird, wenn onClick ausgelöst wird.

Der zweite definiert eine Methode und .bind bindet den Kontext der React-Klasse this an die Methode. Beachten Sie, dass die Funktion bind eine Kopie einer Funktion zurückgibt - also wird die Funktion nicht aufgerufen, sondern nur für den onClick -Handler definiert.

die letzten:

<li className="some-classname"} 
    onClick={() => this.generateList('product')}> Product </li> 

Dies definiert eine anonyme Funktion aber, ähnlich wie bei der zweiten Implementierung, nennen Sie es nicht. Nur wenn onClick ausgelöst wird, wird es aufgerufen. In einigen Fällen kann die Verwendung einer anonymen Funktion jedoch zu Leistungsproblemen führen. Diese anonyme Funktion wird bei jedem Rendervorgang definiert. Wenn Sie eine Komponente haben, die sehr oft neu gerendert wird, kann dies die Leistung Ihrer Anwendung beeinträchtigen. Wenn Sie sicher sind, dass die Komponente nicht häufig gerendert wird, sollte eine anonyme Funktion aus praktischen Gründen in Ordnung sein.

Zusätzlich bei der Verwendung von binden können Sie es in der Komponentenklasse Konstruktor wie folgt erklären:

constructor(props) { 
    super(props); 
    this.state = { 
     // your state 
    }; 
    this.generateList = this.generateList.bind(this); 
    }