Apprendre à apprivoiser 39; Utilisation du crochet de rappel React

Ce n’est pas une réaction secrète. JS est très populaire ces dernières années. C’est maintenant la Bibliothèque JavaScript préférée de nombreux joueurs les plus importants sur Internet, y compris Facebook et WhatsApp. L’une des principales raisons de son essor est l’introduction de crochets dans la version 16.8. Le crochet React vous permet de profiter de la fonctionnalité React sans écrire de composants de classe. Aujourd’hui, les composants fonctionnels avec crochets sont devenus une structure de référence pour les développeurs qui utilisent React. Dans ce billet de blog, nous allons approfondir un crochet spécifique usecallback parce qu’il implique une partie fondamentale de la programmation fonctionnelle, à savoir la mémoire. Vous saurez exactement comment et quand utiliser le crochet usecallback et profiterez de ses améliorations de performance.
Bonjour Plongeons! Qu’est – ce que la mémoire? Le stockage est une fonction complexe qui stocke sa sortie afin qu’elle puisse être appelée la prochaine fois avec la même entrée. C’est comme un cache, mais à un niveau plus local. Il peut sauter n’importe quel calcul complexe et retourner la sortie plus rapidement parce qu’il a déjà été calculé. Cela a un impact significatif sur l’allocation de mémoire et les performances, et le crochet d’appel d’utilisation devrait atténuer cet impact. React usecallback et usememo À ce stade, il est important de se rappeler que usecallback est bien apparié avec un autre crochet appelé usememo. Nous en discuterons tous, mais dans cet article, nous utiliserons le Callback comme sujet principal.
La différence fondamentale est que usememo renvoie une valeur stockée et usecallback renvoie une fonction stockée. Cela signifie que usememo est utilisé pour stocker les valeurs calculées, et usecallback renvoie une fonction que vous pouvez appeler plus tard. Ces crochets renvoient une version mise en cache à moins qu’ils n’aient une dépendance (par exemple, état ou prop)
Vous ne changerez pas. Regardons deux fonctions en cours d’exécution: Import {usememo, usecallback} from ‘React’ Const values = [3, 9, 6, 4, 2, 1] \/ \/ Ceci renvoie toujours la même valeur, un tableau trié. Une fois que le tableau de valeurs change, il est recalculé. Constante memoizedvalue = utiliser la valeur Memo (() = >. Sort () [valeur] \/ \/ Ceci renvoie une fonction qui peut être appelée plus tard. Le tableau des valeurs renvoie toujours le même résultat à moins qu’il ne soit modifié. Const memoizedfunction = usecallback (() = > value. Le fragment de code ci – dessus est un exemple manuel, mais montre la différence entre les deux callbacks:
Memoizedvalue devient un tableau [1, 2, 3, 4, 6, 9]. Tant que la variable valeurs reste inchangée, elle sera mémorisée et ne sera jamais recalculée. La fonction memoizedfunction sera une fonction qui renvoie un tableau [1, 2, 3, 4, 6, 9]. L’avantage de ces deux rappels est qu’ils sont mis en cache et restent en attente jusqu’à ce que le tableau des dépendances change. Cela signifie qu’aucun déchet n’est collecté dans le rendu. Réaction JS est maintenant la Bibliothèque JavaScript préférée de nombreux géants Internet, y compris Facebook et WhatsApp. En savoir plus dans ce guide ️ Cliquez pour tweeter la présentation et la réaction Pourquoi est – il important de stocker pendant la réaction?
Cela concerne la façon dont React fait les composants. React utilise le Dom virtuel stocké en mémoire pour comparer les données et décider quoi mettre à jour. Le Dom virtuel vous aide à réagir aux performances et à garder vos applications rapides. Par défaut, si l’une des valeurs du composant change, l’ensemble du composant joue à nouveau. Cela permet à React de « répondre » à l’entrée de l’utilisateur et de rafraîchir l’écran sans recharger la page. Vous ne voulez pas rendre le composant parce que les changements n’affectent pas le composant. C’est là qu’il est stocké via usecallback et usememo
Construit avec le composant React. Supposons que le composant principal d’un composant de vue de données joue, mais que l’objet de scène ou le changement d’état n’affecte pas ce composant. Dans ce cas, vous ne voudrez peut – être pas ou n’aurez pas besoin de rendre et de restaurer toutes les données à nouveau. Évitez ce re – rendu et re – etch pour économiser la bande passante de l’utilisateur et offrir une expérience utilisateur plus lisse.
Lutter contre les temps d’arrêt et les problèmes de WordPress? Kinsta est une solution d’hébergement conçue pour gagner du temps! Inconvénients de React usecallback bien que ce crochet puisse vous aider à améliorer vos performances, il a aussi ses inconvénients. Certaines choses à considérer avant d’utiliser usecallback (et usememo) sont: Waste Collection: la libération de mémoire par React supprimera d’autres fonctions qui n’ont pas été stockées. Allocation de mémoire: Comme pour la collecte des ordures, plus de fonctions sont stockées, plus de mémoire est nécessaire. De plus, chaque fois que vous utilisez ces callbacks, React a un ensemble de code qui nécessite plus de mémoire pour vous fournir la sortie mise en cache. Complexité du Code: lorsque vous commencez à encapsuler des fonctions dans ces crochets, vous augmentez immédiatement la complexité du Code. Il est maintenant nécessaire de mieux comprendre pourquoi ces crochets sont utilisés et de confirmer qu’ils sont utilisés correctement. La prise de conscience des pièges ci – dessus vous permettra d’éviter les maux de tête qui vous font trébucher sur eux. Lorsque vous envisagez d’utiliser usecallback, assurez – vous que les avantages de performance l’emportent sur les inconvénients.
L’exemple de réponse usecallback suivant est un réglage simple avec des composants de bouton et de compteur. Le compteur a deux sections d’état et affiche deux composants de bouton, chacun
Une partie distincte de l’état de l’ensemble d’instruments. Le composant bouton contient deux éléments: handleclick et name. Chaque fois qu’un bouton est rendu, il est enregistré sur la console. Importer {usecallback, usestate} = ({handleclick, name}) = > {console.log (` ${name} render `) à partir du bouton \
Si nous appliquons usecallback à la fonction handleclick et enveloppons le bouton dans React, Counter render \/ \/ button 1 render \/ \/ button 2 render maintenant. Remarque, nous pouvons voir ce que l’appel d’utilisation fournit. Réaction Memo est similaire à usememo et nous permet de stocker des composants. Importer {usecallback, usestate} à partir du bouton Const = React. Memo ({handleclick, name}) = > {console.log (` ${name} rendered `) returned {nom} }) Const Const Const Counter = () = = > {console.log (‘Counter rendered’ ‘) Const [countone, setcountone] = = usestate (0) Const [counttwo, setcounttwo] = usestate (0) Const [counttwo, setcounttwo] =usestate (0) Const memoizedsetcountone = usecallbccountone = usecallback (() = = > = = = = > setcountone (countone + 1), [countone) Const mememoimoizedsetcounttwo = usecallback () = = = > {console.log (‘ Counter rendered ‘) = = > {console.log (‘ Counter rendered ‘) Const [countone, setcountone, setcountone 1), [counttwo]) renvoie {countone} {counttwo} ) } Maintenant, lorsque nous cliquons sur l’un de ces boutons, nous ne verrons que les boutons que nous cliquons pour accéder à la console: \/ \/ counter render \/ \/ button 1 render \/ \/ counter render \/ \/ button 2 render nous stockons les valeurs d’attribut que nous appliquons au composant button et qui lui sont transmises sont traitées comme égales. Mettre en cache les deux fonctions handleclick et les traiter comme la même fonction par React jusqu’à la valeur de l’élément n
Le tableau des dépendances ne change pas (par exemple, countone, counttwo). Êtes – vous prêt à apprendre comment et quand utiliser le crochet usecallback et comment tirer le meilleur parti de ses améliorations de performance? À partir de là! Bien que usecallback et usememo soient intéressants, rappelez – vous qu’ils ont des cas d’utilisation spécifiques: vous ne devriez pas envelopper toutes les fonctions avec ces crochets. Si la fonction est complexe sur le plan informatique, la dépendance d’un autre crochet ou attribut passé au composant de stockage est un bon indicateur que vous voudrez peut – être implémenter pour usecallback. Nous espérons que cet article vous aidera à comprendre cette fonctionnalité React avancée et vous aidera à acquérir plus de confiance dans la programmation fonctionnelle!