Dans les composants, j'ai vu différentes manières de faire des rappels. Quelle est la différence entre:

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

Et

<MyButton onPress={ this.doSomething.bind(this) }>
3
Gundam Meister 16 janv. 2017 à 19:20

2 réponses

Meilleure réponse

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

Ce bloc de code utilise la fonction Flèche ES6; qui est une autre façon de déclarer une fonction en javascript. De plus, la portée de this dans la fonction flèche dépend de l'endroit où la fonction a été créée par opposition à la règle de portée normale de this qui par défaut dépend de comment la fonction a été appelée .

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

Cette instruction appelle la méthode doSomething. Mais puisque l'enregistrement d'événement est effectué sur un élément différent, la portée de doSomething est différente et est liée de force en utilisant la méthode bind en javascript.

De plus, dans la deuxième méthode, vous ne transmettez pas le paramètre de données, que vous pouvez transmettre à l'aide du deuxième argument à la méthode comme indiqué ci-dessous.

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

6
Abhinav Galodha 16 janv. 2017 à 16:23
<MyButton onPress={ () => {doSomething(data)} }>

Appelle une nouvelle fonction anonyme onPress, qui exécutera doSomething.

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

Appelle une référence à une fonction nommée, que vous avez déjà définie dans votre classe. La liaison à cela n'est requise que lorsque vous travaillez avec une fonction de classe (je veux dire, une fonction de flèche non ES6).

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

N'aurait pas besoin d'un .bind(this), car les fonctions fléchées se lient sur portée lexicale.

Vous devriez certainement lire Quel est le moyen le meilleur et le plus efficace pour lier des rappels dans ReactJS? Dans le constructeur ou dans la méthode de rendu ou comme initialiseur de propriété?

5
Community 23 mai 2017 à 10:29