Considérez le code suivant dans react + ES6:
import React, { Component } from 'react';
const myFunction=(x,y)=>{
return x*y
};
class MyTest extends Component {
// state comes here
myProperty=(x,y)=>{
return x*y
};
myMethod(x,y){
return x*y
}
render () {
return (<div>
<h2>Result of myMethod: {this.myMethod(2,3)}</h2>
<h2>Result of myProperty: {this.myProperty(2,3)}</h2>
<h2>Result of myFunction: {myFunction(2,3)}</h2>
</div>
);
}
}
export default MyTest;
Voici à quoi ressemble la sortie:
Résultat de maMéthode: 6
Résultat de ma propriété: 6
Résultat de maFonction: 6
Y a-t-il vraiment une différence? L'un est-il préférable à l'autre?
3 Réponses :
Compte tenu de l'exemple que vous avez montré, il n'y a pas de grande différence et ils peuvent probablement être utilisés de manière interchangeable.
Il y a juste quelques petites choses comme le fait d'avoir une expression de fonction déclarée à l'extérieur, probablement, en interne, cela a gagné ne sont pas recréés à chaque fois qu'une classe est instanciée. Je dois honnêtement vérifier la spécification EcmaScript pour la vérifier.
Les choses changent lorsque vous devez passer l'une de ces fonctions comme référence à d'autres fonctions et si ces destinations doivent accéder au contexte d'origine ou à un nouveau .
Les lambdas ne peuvent pas avoir d'autre contexte que celui dans lequel ils sont déclarés, ils peuvent donc être passés en tant que références sans problèmes.
Les méthodes d'instance, à la place, doivent être liées à un contexte avant qu'ils ne soient passés comme références.
Avez-vous déjà vu ce modèle?
myMethod = (x, y) => x * y
Cela écrase simplement maMéthode dans la portée de la classe avec une copie de la même méthode liée à ce contexte. Fondamentalement, exactement la même chose que:
constructor() {
// ...
this.myMethod = this.myMethod.bind(this)
}
myMethod(x,y){
return x*y
}
Puis-je penser de cette façon: * Si vous n'avez pas besoin de ceci pour accéder à l'intérieur de l'objet, utilisez la fonction externe (myFunction dans l'exemple) * Si vous avez besoin de ceci , utilisez la fonction flèche, myProperty dans l'exemple * Si vous rencontrez des méthodes existantes - telles que render dans react, gardez à l'esprit que vous devez les lier si vous souhaitez y accéder depuis l'extérieur de l'objet
Je n'aurais pas pu mieux l'expliquer :)
Dans votre cas, je vous recommanderais d'utiliser le composant fonctionnel, c'est-à-dire que la fonction que vous avez déclarée en dehors de la classe est la bonne dans votre cas. Parce que vous passez une entrée et attendez une sortie et qu'il n'y a pas de gestion d'état à l'intérieur de cette fonction. Il est donc bon d’utiliser un composant fonctionnel.
En ce qui concerne l'utilisation de la fonction fléchée ou de la fonction normale, consultez le fil de discussion ci-dessous pour une réponse détaillée
Réagir: Quelle est la flèche recommandée ou la fonction normale?
myFunction peut être affiché comme une méthode privée de la classe MyTest puisque myFunction n'est pas pas < / strong> en cours d'exportation.
La différence entre myMethod et myProperty est que myProperty utilise la syntaxe de la fonction de flèche ES6.
En JavaScript, l'utilisation de la syntaxe ES6 pour une méthode ne fait pas encore partie du standard EcmaScript. Vous devrez utiliser babel pour le convertir en syntaxe ES5. L'avantage d'utiliser la syntaxe ES6 est que vous n'avez pas besoin de lier myProperty à this , mais vous devez lier myMethod ( sinon this.myMethod est indéfini ).
Je ne pense pas qu'il soit juste de l'appeler myProperty , car c'est toujours une méthode. Une propriété serait quelque chose comme myProperty = {something: 5} . En gros, c'est une propriété / attribut de l'objet, mais pas une action.
{color: "red"} ou myColor = "red" drive()