Dans un tutoriel lié à réagir, que je regarde sur YouTube: https://www.youtube.com/watch?v=h3kejrkypj8
Il y avait un morceau de code qui avait ce qui suit (minute 13:40 dans la vidéo) p> Cette fonction est appelée à partir d'un composant de boutons dans le code suivant: p > const setCounterWithValue = () => (value) => {
setCounter(value)
}
5 Réponses :
Qu'est-ce qu'ils font, il est appelé Currying . En d'autres termes, c'est une fonction qui renvoie une autre fonction. Au lieu de le tirer, ils prennent la valeur de la première argument de la fonction et l'utilisent dans la deuxième fonction qui est tirée de l'événement de clic. Dans ce cas particulier, je ne vois pas qu'il s'agisse d'un plus simple car vous obtenez le même résultat exact, mais dans ce cas, votre fonction d'origine est simplement tirée dans le deuxième corps de fonction. Néanmoins, plus d'informations sur Currying peuvent être trouvées ici .
appeler la fonction "plus simple" avec Voici les deux exemples: P> Exemple 1: P> setCounterWithValue (compteur-1) code> retournera une fonction qui, lorsqu'elle sera exécutée, passera via la contre-valeur fournie. Le concept pour cela s'appelle Currying à travers l'utilisation d'une fermeture. La fonction que vous avez «attendue» n'aurait pas fortement de sens, car vous l'appelleriez avec une valeur, mais cette valeur ne sera jamais capturée, la fonction qu'elle revient peut-elle s'attendre à un paramètre de valeur, qui n'est pas passé, il est perdu. (value) => { setCounter(value) }
Je suis en désaccord que c'est plus simple ... ce qu'ils font s'appelle Currying. C'est une façon abrégée de créer une fonction qui renvoie une fonction. Donc, une forme de Longhand ressemblerait à ceci:
const setCounterWithValue = (value) => {
return function () {
setCounter(value)
}
}
Ceci est un exemple de currying, que vous pouvez utiliser comme une introduction à des fonctions d'ordre supérieur qui sont très courantes dans l'écosystème de réaction.
Pour décomposer ce qui se passe dans ce cas et pourquoi votre hypothèse sur la manière dont la fonction devrait regarder est faux, vous devez d'abord comprendre ce que sont les fermetures JavaScript.
disons que nous avons cette pièce de code: ici, nous tirons parti de une fermeture créée sur la ligne 3. La fonction La première invocation ne fait rien depuis le retour la fonction n'est pas appelée.
La deuxième invocation appelle la fonction retournée, imprimant donc le numéro 5 de la console. Pour comprendre votre exemple d'extrémité, vous pouvez être plus explicite dans la définition de la fonction: Ceci: < / p> peut être réécrit comme ceci: L'instructeur dans la vidéo profite simplement de la Fonction de retour implicite des fonctions de flèche L'extrait de code juste ci-dessus aura le même résultat lorsqu'il sera utilisé avec votre code. Espérons que, écrit comme ceci, il a plus de sens pour vous pourquoi il n'y a pas besoin de la fonction anonyme d'avoir une valeur d'argument . Cela peut y accéder via une fermeture. sur la raison pour laquelle les développeurs JavaScript et les fonctions d'ordre élevé sont préférés par certains développeurs JavaScript, la réponse est trop longue et d'opinion, alors je vous suggère que vous étudiez un peu plus le sujet. Un article très intéressant peut être trouvé ici: https: / /developer.mozilla.org/en-us/docs/web/javascript/reference/functions/arrow_functions Un peu plus difficile à lire mais avec un tas de théorie utile: https://eloquentjavascript.net/05_higher_order.html Baz que nous revenons de foo capture le contexte de son site de définition (site de définition = où la fonction est définie = dans cette cas la fonction foo ). Donc baz peut être appelé de n'importe où et a toujours accès à la place en mémoire que bar pointe vers.
Il est plus facile de comprendre à l'aide de la déclaration de fonction au lieu des fonctions de la flèche. Le didacticiel suggère de refacturer la fonction dans une fonction d'usine: Cela signifie que l'appelant la fonction ci-dessus renvoie une fonction qui ne nécessite aucun argument: p> Votre fonction suggérée renvoie plutôt une fonction nécessitant un argument: p> Ceci signifie définir la valeur que vous devrez transmettre un argument: P> XXX PRE> Le problème Le refacteur tente de résoudre est que les fonctions OnClick sont {/* wrap in an anonymous function to ignore the event */}
<button onClick={() => setCounterWithValue(counter -1)} />
Comment passeriez-vous
compteur - 1 à une fonction qui ne prend aucun paramètre comme votre attente est? Vous dites que vous attendez que la fonction ne prend aucun paramètre et renvoie une fonction qui prend un paramètre.