J'ai quelques questions sur l'expression de la fonction arrow dans JSX.
Voici un exemple de code qui met à jour le contenu Puis j'ai essayé différentes expressions pour voir comment il se comporte Toutefois, lorsque la fonction prend des valeurs, l'expression se comporte différemment de mes attentes. donc mes questions sont donc: < / p> lorsque onclick se produit.
oncclick = {(() => sourisonclick} ne pas tirer mais onclick = {(() => MouseonClick ()} fait?
Onclick = {MouseonClick} Fees Une fois lorsque Onclick = {MouseonClick (ID)} Infinitely?
onclick = {mouseonclick} et oncclick = {((() => sourisonclick ()}
fonctionnellement identique?
8 Réponses :
Ici, vous passez à OnClick Pas une fonction, mais un résultat d'une fonction (vous appelez la fonction à l'intérieur des crochets {}) et voici une référence à une fonction P> onClick={mouseOnClick} and onClick={()=>mouseOnClick()}
Ce que vous devez passer à Onclick PROP est la fonction de rappel qui sera appelée après fondamentalement, ils sont, mais celui-ci: J'espère que c'était assez clair et cela vous a aidé! onclick événement. Le () derrière la fonction signifie qu'il sera appelé. Donc:
onclick = {((() => MouseonClick} Vous créez une nouvelle fonction qui retournera MouseonClick Définition de la fonction. Il n'y a pas de () afin qu'il ne fonctionne pas.
oncclick = {mouseonClick} C'est la bonne façon de transmettre un rappel sans paramètres. Vous venez de passer une fonction qui doit courir après l'événement. {MouseonClick (ID)} Fees Infinitely, car il y a des parenthèses après la fonction - sorcière signifie qu'il sera appelé automatiquement lorsque votre élément rend l'état, votre fonction change l'état qui provoque une nouvelle rérendance infinie.
onclick = {((() => MouseonClick ()} crée une nouvelle fonction tout le temps, tandis que Onclick = {MouseonClick} est juste de pointer vers une seule fonction.
de ma compréhension limitée de JSX, vous mélangeez les rappels et les valeurs de retour
permettent de dire qu'il s'agit de votre fonction de rappel p> si vous deviez transmettre la fonction comme celle-ci, il l'exécuterait immédiatement et transmettez la valeur de retour à l'événement OnClick P> function func() {
let arg = retrieveValueFromSomething();
return arg * 2;
}
<h1 onClick={func}>{content}</h1>
q. Quelle est la logique derrière OnClick = {() => MouseonClick} ne pas tirer, mais ongcick = {() => MouseonClick ()} fait?
ans. q. Pourquoi onclick = {MouseonClick} tire une fois quand onclick = {MouseonClick (ID)} tire infiniment?
ans. q. Sont onclick = {mouseonClick} et onclick = {() => MouseOnclick ()} fonctionnellement identique?
ans. Logiquement oui. Mais lorsque vous dites () => MouseonClick désigne une fonction où vous retournez MouseonClick . Ce type de retour est appelé retour implicite. Cette expression ne fonctionne pas intentionnellement parce que la logique de fonction n'a jamais été appelée. Mais onclick = {() => MouseonClick ()} est en train de tirer la fonction et c'est pourquoi cela fonctionne.
onclick essaie d'appeler une fonction avec un événement de clic. MouseonClick est juste cette fonction. Mais quand vous dites onclick = {mouseonClick ()} , vous venez d'appeler la fonction sur le premier rendu. Si ONCLICK déclenche un changement d'état, un autre rendu se produira, et OnClick sera appelé à nouveau. Par conséquent, la boucle infinie que MouseonClick et le rendu continuent de vous appeler encore et encore.
onclick = {() => MouseOnclick ()} La nouvelle fonction est attribuée à OnClick sur chaque rendu, ce qui conserve essentiellement les appels MouseonClick . Dans un autre cas, ce n'est pas vrai, c'est-à-dire à chaque rendu onclick restera même. Cela pourrait avoir une incidence sur la performance de temps en temps lorsque vous envoyez une fonction intégrée aux accessoires et cela pourrait entraîner un rendu inutile de l'enfant, car il continuera à obtenir une nouvelle fonction sur chaque rendu parent.
On appelle MouseonClick et transmet la valeur de retour à OnClick. Donc, onclick = non défini ou autre que MouseonClick revient. L'autre passe à MouseonClick en fonction de l'oncelick. Donc, il appelle habituelclick normalement.
p>
<button id="btn1">button</button> <button id="btn2">button</button> <button id="btn3">button</button>
Dans le premier cas, vous définissez une nouvelle fonction anonyme et transmettez-la comme le gestionnaire OnClick. La fonction elle-même ne fait rien «parce que vous n'appelez rien.
Dans le second cas, vous mettez à jour l'état pendant le rendu lorsque vous appelez MouseonClick (ID), ce qui déclenche la Dans le troisième cas, vous utilisez simplement une fonction Wrapper qui appelle votre fonction de MouseonClick, qui est un peu équivalente à appeler la fonction elle-même comme gestionnaire.
Regardons tous les trois cas individuellement -:
Quelle est la logique derrière Onclick = {() => MouseonClick} ne pas tirer, mais Onclick = {() => MouseonClick ()} fait?
- c'est la traduction ES5 est. -:
oncclick = {(() => MouseonClick} === oncclick = {Fonction () {Retour MouseOnclick}}oncclick = {((() => mouseonclick} === oncclick = {Fonction () {Retour MouseonClick ()}}- Le premier cas est une fonction simple qui renvoie une référence de fonction.
- Depuis que le premier cas ne renvoie que la référence de fonction et n'appelle aucune fonction, aucun appel de fonction ne se produit qu'à la Deuxièmement, la fonction est réellement appelée.
pourquoi onclick = {MouseonClick} tire une fois quand onclick = {MouseonClick (ID)} tire infiniment?
- Traduction des deux cas (ce que les deux cas vont-ils retourner à l'ONCLICK) -:
onclick = {mouseonClick} === oncclick = {() => { setContent ("cliqué")}oncclick = {mouseonClick (ID)} === Onclick = {MouseonClick (ID)} (appel de la fonction directe) .- Comme nous voyons le premier cas, renvoyez une fonction alors que le second cas retourne l'appel de fonction directe afin qu'il soit appelé infiniment.
- sont ongclick = {MouseonClick} et Onclick = {() => MouseOnclick ()} fonctionnellement identique?
- oui les deux sont identiques voyons ce qu'ils traduisent -:
onclick = {mouseonclick} === oncclick = {() => { setContent ("cliqué")}oncclick = {(() => mouseonClick ()} === oncclick = {// Fondamentalement une autre fonction qui appelle la fonction MouseonClick}espère que cela aide ...
Ce n'est pas vraiment un problème JSX. Il s'agit d'un problème de compréhension de la valeur de la fonction em> est et de l'appel de fonction em> est. Quelle est une valeur de fonction? Strong> dans JavaScript Une fonction est une valeur comme toute autre valeur. Tout comme Dans votre exemple, "foo" code> crée une valeur de chaîne, () => {} code> crée une valeur de fonction (plus spécifiquement, une fonction objet em>; Notez que c'est la même chose pour générer une fonction de fonction: déclaration de fonction, expression de fonction, déclaration de méthode, fonction de flèche ... Tout ce n'est que de différentes manières d'indiquer la création d'un objet de fonction). P> MouseonClick code> est une variable contenant une fonction. Chaque fois que vous écrivez MouseonClick code>, vous parlez / accédez à cet objet de fonction. Notez que faire référence à l'objet de fonction n'appelle pas la fonction! (Voir la section suivante). Considérez cet exemple: P> var foo = () => 42;
console.log(foo); // logs function object
console.log(foo()); // calls function and logs its return value
MouseonClick (ID) est en cours d'exécution immédiatement et le résultat est passé comme la fonction de OnClick à appeler. Les autres passent une fonction pour onclick à appeler.
Réagir a emballage à tous les événements appelés
synthétice et à des fins de la performance qu'ils ont recommandé le gestionnaire de réussite au lieu de l'expression de fonction. Vous devriez donc avoir utiliséonclick = {mouseonClick} au lieu deonclick = {((() => sourisonclick ()} . Mais cas que vous avez décrit dans une question de secondement:Onclick = {MouseonClick (ID)} utilise avec des fonctions Hight-Order.