Apprenez à utiliser le hook useCallback pour éviter les rendus inutiles dans notre application, et le hook useRef pour garder une trace des références.
Dans cet article, nous allons en apprendre plus sur deux hooks React spécifiques qui ont été publiés dans la version React 16.8: le crochet useCallback et le crochet useRef . Nous en saurons plus sur la façon dont ces deux crochets spécifiques fonctionnent sous le capot, les bons cas d'utilisation pour chacun d'eux et comment nous pouvons en tirer profit dans nos applications réelles.
No More Classes
De retour en octobre 2018, l'équipe React a publié une version de React dont nous pouvons maintenant affirmer que c'était l'une des versions les plus importantes de la courte histoire de React. Ils ont publié une nouvelle fonctionnalité appelée React Hooks – une nouvelle façon que nous pouvons utiliser pour gérer très facilement notre application d'état, en supprimant les classes de nos composants, afin que nous puissions avoir un code plus concis et diviser notre logique d'état.
In our React applications avant React Hooks, pour gérer notre état, nous aurions des composants de classe. Par exemple, si nous voulions créer un état pour avoir un compteur voici comment nous le ferions:
- Premièrement, nous créerions notre composant, et notre état serait un simple
counter.
class App extend Component {
constructor ( props ) {
super [19659013] ( accessoires ) ;
ceci . état = {
compteur : 0
} ;
}
render () {
return (
< div >
< h1 > compteur : { this . state . compteur } < / h1 >
< / div >
) ;
} [19659043]}
- Ensuite, nous créerions deux fonctions: une pour incrémenter le compteur
incrementCounter = ( ) => {
this . setState ( prevState => {
return {
counter : prevState . counter + 1
} ;
} ) ;
} [19659013];
decrementCounter = () => {
this . setState ( prevState ] => {
retour {
counter : prevState . counter - 1
} ;
} ) ;
} [19659013];
- Ensuite, nous créerions deux boutons qui déclencheraient chaque fonction, et incrémenterions ou décrémentions notre
compteuren fonction du bouton.
< button onClick = { this . incrementCounter } > + < / button >
< button onClick = { this . decrementCounter } > - < / button >
Beaucoup de gens étaient contre cette approche consistant à créer des classes pour gérer notre état dans React. Ils étaient en faveur de quelque chose de plus classe et de plus propre. La solution que l'équipe React a trouvée pour cela? React Hooks.
Avec React Hooks, nous pouvons remplacer tous nos composants de classe dans nos applications par des composants fonctionnels, ce qui signifie: plus de composants de classe! Nous pouvons désormais utiliser des composants de fonction dans nos applications sans avoir à créer un composant de classe unique pour gérer notre état.
Le hook que nous utilisons pour gérer notre état est le hook useState . Tout d'abord, nous importons le crochet useState de React.
import React { useState } de "react" ;
Le hook useState prend un état initial comme argument et renvoie un tableau avec deux éléments: l'état et la fonction de mise à jour.
const [ ] counter setCounter ] = useState ( 0 ) ;
Donc, maintenant, tout ce que nous avons à faire est appelez la fonction de mise à jour setCounter pour mettre à jour l'état de notre compteur . Magic!
import React { useState } from "react" ;
const App ] = () => {
const [ counter setCounter ] = useState ( 0 ) ;
return (
< div >
< h1 > compteur : { compteur } < / h1 >
< bouton onClick = [19659013] { () => setCounter ( counter + 1 ) } > + < / bouton >
< bouton onClick = { () => setCounter ( compteur - 1 ) } > - < / bouton >
< / div > [19659024]) ;
} ;
Ceci est un bref récapitulatif de React Hooks. Si vous voulez en savoir plus à leur sujet, je vous recommande vraiment de lire la documentation et de vous entraîner.
Maintenant que nous avons couvert l'arrière-plan de React Hooks, apprenons plus précisément le useCallback et crochets useRef qui ont été libérés dans le jeu d'origine 16.8.
useCallback
Le hook useCallback a une fonction principale et spécifique: éviter les relances inutiles dans votre code, rendant votre application plus rapide et plus efficace.
Le useCallback hook reçoit une fonction en tant que paramètre, ainsi qu'un tableau de dépendances. Le hook useCallback renverra une version mémorisée du rappel, et elle ne sera modifiée que si l'une des dépendances a changé.
useCallback ( () [19659046] => {
myCallbackFunction ()
} [ dependencies ] ) ; [19659104] Vous pouvez également transmettre un tableau vide de dépendances. Cela n'exécutera la fonction qu'une seule fois. Si vous ne passez pas de tableau, une nouvelle valeur sera renvoyée à chaque appel.
useCallback ( () => {
myCallbackFunction ] ()
} [] ) ;
Créons un exemple pour comprendre plus facilement comment ce hook fonctionne. Nous allons créer un composant appelé Notes qui sera notre composant parent. Ce composant aura un état appelé notes qui seront toutes nos notes, et une fonction appelée addNote qui ajoutera une note aléatoire chaque fois que nous cliquons sur un bouton.
const Notes = () => {
const [ notes setNotes ] [19659046] = useState ( [] ) ;
const addNote = () => {
const newNote = "random" ;
setNotes ( n => [[19659036] ... n newNote ] ) ;
} ;
return (
< div >
< h1 > Bouton : < / h1 >
{ notes . [19659053] carte ( ( note index ) => (
< p key = [19659013] { index } > { note } < / p >
) ) }
< / div >
) ;
} ;
Maintenant, créons notre bouton . Nous allons créer un simple bouton et passer un accessoire appelé addNote qui ajoutera une note à chaque fois que nous cliquons dessus. Nous mettons un console.log dans notre composant Button donc chaque fois que notre composant le ré-rendra, il le console.
const Button = ( { addNote } ) => {
console . log ( "Bouton re-rendu :(" ) ;
return (
< div >
< button onClick = { addNote } > Add < / button >
< / div >
) ;
} ;
Importons notre composant Button et passons notre addNote fonctionne comme un accessoire et essaie d'ajouter une note. Nous pouvons voir que nous pouvons ajouter une note avec succès, mais aussi notre composant Button se ré-affiche à chaque fois, et il ne devrait pas. t. La seule chose qui change dans notre application est l'état notes pas le bouton .
Il s'agit d'un rendu totalement inutile dans notre application, et c'est ce que le crochet useCallback peut nous aider à éviter. Donc, dans ce cas, comment nous pourrions utiliser le useCallback hook pour éviter un nouveau rendu inutile dans notre composant?
Nous pouvons encapsuler la fonction addNote avec le hook useCallback et passer comme une dépendance le setNotes fonction de mise à jour, car la seule chose qui dépend de notre composant Button est le setNotes .
const addNote = [19659116] useCallback ( () => {
const newNote = "random" ;
setNotes ( n => [ ... n newNote ] ) ;
} [ setNotes ] ) ;
Mais si nous regardons la console, nous pouvons voir que le composant Button est
Nous savons que React re-rendra chaque composant ent par défaut, sauf si nous utilisons quelque chose qui peut empêcher cela. Dans ce cas, nous pouvons utiliser le React.memo pour empêcher le rendu de notre composant Button à moins qu'un accessoire n'ait changé - dans notre cas, le support addNote . Mais, comme nous utilisons le hook useCallback il ne changera jamais, donc notre composant Button ne sera jamais rendu à nouveau. Voici à quoi ressemblera notre Button :
const Button = React . mémo ( ( { addNote } ) => {
console . log ( "Bouton re-rendu :(" ) ;
return (
< div >
< button onClick = { addNote } > Add < / button >
< / div >
) ;
} ) ;
Nous avons maintenant un composant très performant et efficace, éviter les ré-rendus inutiles dans nos composants. Le crochet useCallback est assez simple au début, mais vous devez faire attention à où et quand utiliser ce crochet, sinon cela ne vous aidera pas du tout.
Maintenant que nous avons appris le ] useCallback hook, jetons un œil à un autre hook qui peut vous aider beaucoup dans vos projets et applications: le hook useRef .
useRef
Si vous avez utilisé des composants de classe avant le React 16.8, vous savez que c'est ainsi que nous créerions une référence à un composant ou à un élément:
class Button extend React . Component {
constructeur ( props ) {
super ( props ) ;
this . ] buttonRef = React . createRef () ;
}
render () {
retour ([19659388] < button ref = { this . buttonRef } >
{ this . accessoires . enfants }
< / bouton >
)
}
}
Importer le createRef de React et transmettez-la à l'élément souhaité. Assez simple.
Mais, maintenant, nous pouvons faire tout ce que nous faisions avec des composants de classe, avec des composants fonctionnels! Nous pouvons maintenant gérer notre logique d'état à l'intérieur d'un composant fonctionnel, nous pouvons avoir des «méthodes de cycle de vie» et nous pouvons créer des références et les transmettre aux éléments en utilisant le hook useRef .
Le useRef hook nous permet de renvoyer un objet ref mutable (un nœud ou un élément DOM créé dans la méthode de rendu).
import React { useRef } [19659009] de "react" ;
const Button = ( { children } ) => [19659011] {
const buttonRef = useRef () ;
return (
< button ref ] = { buttonRef } > { enfants } < / button >
)
}
Mais quelle est la différence entre createRef et d le useRef ? Eh bien, assez simple: le hook createRef crée une nouvelle référence à chaque fois qu'il est rendu, et le hook useRef renvoie la même référence à chaque fois.
Nous avons appris il y a quelques minutes qu'un nouveau rendu inutile est quelque chose que nous voulons éviter dans notre application - c'est pourquoi nous devrions utiliser le hook useRef au lieu de createRef . Migrer de l'un à l'autre ne sera pas si difficile, et le useRef améliorera beaucoup votre vie.
Le crochet useRef contient la valeur réelle dans son .currrent méthode. Avec cette méthode, nous pouvons accéder à l'élément HTML réel, dans notre cas, un bouton. En utilisant la méthode .currrent nous pouvons faire certaines choses et changer impérativement des éléments HTML en utilisant certaines instances de nœuds, comme .focus .contains .cloneNode etc.
Imaginons que nous ayons une entrée et un bouton, et que nous voulons concentrer l'entrée à chaque fois que nous cliquons sur le bouton. Cela peut être très utile dans certaines situations de formulaires que vous avez dans votre application Comment pourrions-nous faire cela?
Eh bien, nous pourrions créer une référence en utilisant le hook useRef et changer le .currrent de cette référence pour focaliser l'entrée chaque fois que nous cliquons sur le bouton, en utilisant l'instance de nœud .focus .
import React { useRef } from "react" ;
const App = () => {[19659051] const inputRef = useRef () ;
const focusInput = () = > {
inputRef . current . focus () ;
} ;
return (
< div >
< type d'entrée = "text" ref = { inputRef } / >
< bouton onClick = { () => focusInput () } > Focus < / button >
< / div >
) ; [19659043]} ;
Le hook useRef est également très utile si nous voulons enregistrer une valeur à l'intérieur - par exemple, notre valeur d'état.
Imaginons que nous ayons un ] compteur et chaque fois que nous incrémentons ou décrémentons ce compteur spécifique nous pouvons stocker la valeur du compteur à l'intérieur de la réf. Nous pouvons le faire en utilisant la méthode .currrent . Voici comment procéder:
import React { useRef useState } from "react" ;
const App = () => {
const [ counter setCounter ] = useState ( 0 ) ;
const counterRef = useRef ( counter ) ;
const incrementCounter = () => {
setCounter ( compteur => compteur + 1 ) ;
counterRef . current = counter ;
}
const decrementCounter = () => {
setCounter ( counter => counter - 1 ) ;
counterRef . current = counter ;
}
return (
< div >
< h1 > État du compteur : { compteur } < / h1 >
< h1 > Réf compteur : { compteur } < / h1 >
< button onClick = { () => incrementCounter () } > + < / bouton >
< bouton onClick = { () => decrementCounter () } > - < / button >
< / div > [19659024]) ;
} ;
Vous Remarquez que chaque fois que nous modifions le compteur en incrémentant ou en décrémentant, nous utilisons la méthode .currrent pour enregistrer la valeur. De cette façon, nous pouvons l'utiliser à l'avenir si nous le voulons.
useRefs dans votre application React est incroyable, mais en même temps, ils peuvent être très compliqués. Ici vous pouvez trouver une liste de toutes les instances de nœuds HTML que nous pouvons utiliser avec les références.
Si vous voulez en savoir plus sur React Hooks, nous avons beaucoup de hooks qui pourraient être intéressants à apprendre et comprendre leurs cas d'utilisation spécifiques. Comme le crochet useContext un moyen qui nous permet de transmettre des données à travers nos composants sans avoir à passer manuellement les accessoires à travers plusieurs niveaux. Ou le hook useEffect très similaire au hook useCallback mais au lieu de renvoyer un rappel mémorisé, il renvoie une valeur mémorisée. Et nous pouvons utiliser le hook useEffect pour exécuter des méthodes de cycle de vie dans nos composants fonctionnels.
Conclusion
Dans cet article, nous en avons appris davantage sur le useRef et le useCallback hooks, deux des hooks libérés dans React 16.8. Nous avons appris à utiliser le hook useCallback pour éviter les ré-rendus inutiles dans notre code, en évitant de nombreux nouveaux rendus et en compromettant l’expérience de l’utilisateur dans notre application. Nous avons appris que le hook useRef nous permet de renvoyer un objet ref mutable, contenant une valeur dans la méthode .current ; et en utilisant cette méthode, nous pouvons faire de belles choses telles que focaliser des éléments, créer et comparer des nœuds d'éléments, etc.
Source link