Reagieren Native Component Callback-Funktionen

Question

In Komponenten habe ich verschiedene Möglichkeiten der Callbacks gesehen. Was ist der Unterschied zwischen:

<MyButton onPress={() => {doSomething(data)} }> 

und

<MyButton onPress={ this.doSomething.bind(this) }> 

Answer 1

<MyButton onPress={() => {doSomething(data)} }>

Dieser Codeblock die ES6 Pfeil Funktion verwendet; Das ist eine andere Möglichkeit, eine Funktion in Javascript zu deklarieren. Der Bereich this in der Pfeilfunktion hängt auch davon ab, wo die Funktion erstellt wurde, im Gegensatz zur normalen Bereichsregel this, die standardmäßig von abhängt, wie die Funktion genannt wurde.

<MyButton onPress={ this.doSomething.bind(this) }>

Diese Aussage macht doSomething Methode einen Anruf. Aber da die Ereignisregistrierung auf einem anderen Element erfolgt, ist der Gültigkeitsbereich von doSomething anders und wird zwingend mit der Methode bind in Javascript verknüpft.

Auch in der zweiten Methode übergeben Sie nicht den Datenparameter, den Sie mit dem zweiten Argument der Methode übergeben können, wie unten gezeigt.

<MyButton onPress={ this.doSomething.bind(this, data)} }>

Answer 2

<MyButton onPress={() => {doSomething(data)} }> 

ist eine neue anonyme Funktion onPress, ruft die doSomething laufen wird.

<MyButton onPress={ this.doSomething.bind(this) }> 

Ruft einen Verweis auf eine benannte Funktion auf, die Sie bereits in Ihrer Klasse definiert haben. Die Bindung dazu ist nur erforderlich, wenn Sie mit der Klassenfunktion arbeiten (ich meine, keine ES6-Pfeilfunktion).

const doSomething =() => { ... } 

Wäre kein .bind(this) erfordern, da Pfeil Funktionen auf lexical scope binden.

Sie sollten auf jeden Fall über What is the best and most efficient way to bind callbacks in ReactJS? In the constructor or in the render method or as a property initializer?

lesen