web-dev-qa-db-fra.com

pourquoi avez-vous besoin de lier une fonction dans un constructeur

J'ai une question relavent à ce code: https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js

plus précisément:

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleRefreshClick = this.handleRefreshClick.bind(this)
  }

Je suppose que c'est une question en 2 parties.

  1. Pourquoi ai-je besoin de définir handle change comme une instance de la classe this.handleChange =, ne puis-je pas simplement utiliser des fonctions statiques pour handleChange et l'appeler directement avec dans la classe onClick={handleRefreshClick}>?
  2. Je n'ai aucune idée de ce qui se passe ici: this.handleRefreshClick.bind(this)

Merci

reactjsredux
26
Saad

Répondu dans l'ordre inverse ...

  1. this.handleRefreshClick.bind(something) renvoie une nouvelle fonction dans laquelle les références à this feront référence à something. C'est un moyen de sauvegarder la valeur actuelle de this, qui est dans la portée lors de l'appel au constructeur, afin qu'elle puisse être utilisée ultérieurement lors de l'appel de la fonction.
  1. Si vos fonctions ne nécessitent pas d'accès à l'état de votre composant, vous n'avez pas besoin de les lier.

L'argument en faveur de l'ajout de ces lignes au constructeur est tel que les nouvelles fonctions liées ne sont créées qu'une fois par instance de la classe. Vous pouvez aussi utiliser 

onClick={this.handleRefreshClick.bind(this)}

ou (ES6):

onClick={() => this.handleRefreshClick()}

mais l'une ou l'autre de ces méthodes créera une nouvelle fonction chaque fois que le composant sera rendu de nouveau.

30
Tom Fenech

La raison pour laquelle cela est fait est de lier le mot clé this à cet objet. Comme Tom l'a dit, appeler une fonction depuis une classe ne signifie pas qu'elle soit appelée avec le contexte de l'objet qui a créé cette fonction.

Je pense que vous risquez de vous embrouiller parce que, dans les exemples/tutoriels de React, l’utilisation de React.createClass () LIE lier this automatiquement. Vous vous demandez peut-être pourquoi React.createClass () le fait, mais pas avec la syntaxe de classe ES6.

En effet, React ne souhaitait pas modifier les spécifications ES6 (la liaison this aux fonctions de sa classe n’était pas conforme à la spécification de la classe ES6), mais souhaitait en même temps offrir à ses utilisateurs le confort de la classe ES6. syntaxe. Vous pouvez en savoir plus à ce sujet ci-dessous.

Problème Github

J'espère que cela permet de comprendre pourquoi cela se produit.

1
julianljk

Ces 2 fonctions handleChange et handleRefreshClick sont transmises comme accessoires aux autres composants,

Ils sont liés à cela car lorsque le composant enfant appellera ces fonctions, ils seront toujours exécutés avec le contexte APP.

Vous pouvez supprimer ces fonctions de la classe, mais vous devez néanmoins le lier car vous mettriez à jour certaines parties de votre APP.

1
Piyush.kapoor

this dépend comment la fonction est appelée, pas comment/où elle est créée.

Quand vous regardez le code, vous voyez deux "ceci", pourquoi? Ça semble bizarre, non? ?__. Le problème, c'est qu'il ne s'agit pas de ce que cela semble être. C'est à propos de comment ça s'appelle.

Vous dites fondamentalement. Hé, quand quelqu'un vous appelle, rappelez-vous this signifie cette classe. pas autre chose.

Quand quelqu'un appelle votre classe comme suit: x.yourClass(), vous dites que this n'est pas x, mais la classe elle-même (avec des propriétés et des états, etc.).

0
serkan

Personnellement, je lie les fonctions dans le constructeur pour que leurs références ne changent pas à chaque rendu.

Ceci est particulièrement important si vous transmettez des fonctions à des enfants en lecture seule dont vous n'avez pas besoin d'être mis à jour lorsque leurs accessoires ne changent pas. J'utilise react-addons-pure-render-mixin pour cela.

Sinon, lors de la restitution de chaque parent, une liaison sera établie, une nouvelle référence de fonction sera créée et transmise aux enfants, ce qui va laisser penser que les accessoires ont changé.

0
Anton Kuzmin