Exemple pratique d'utilisation du crochet useRef dans React

Une explication rapide sur le useRefcrochet dans React.

Cet article expliquera un sujet qui confond parfois certains développeurs, en particulier les nouveaux avec React.

Le hook de useRef si vous n'avez pas une idée précise du fonctionnement de ce hook ? Quand devez-vous l'utiliser ? cet article vous sera bénéfique.

useRef Crochet

Le useRefest une fonction qui peut prendre un argument et retourner un objet avec une propriété currentavec sa valeur assignée.

Et si je veux changer cette valeur ? Écrivez simplement comme suit val.current = “bar"et la valeur changera car elle useRefest mutable, ce qui signifie qu'elle peut être affectée avec n'importe quelle valeur, également des nœuds et des éléments DOM en tant que valeurs.

Maintenant, la valeur var.currenta changé, mais le composant sera toujours le même, car useRefil ne rend pas le composant à nouveau mais affichons la valeur de var.current.

La valeur a changé mais n'est pas reflétée dans le composant. C'est une fonctionnalité pratique car nous pouvons modifier les valeurs du composant ou des propriétés dans les éléments DOM sans re-rendre le composant.

Accéder aux éléments dans le DOM

La façon la plus courante d'utiliser useRefest d'accéder aux éléments DOM. La façon de le faire est d'ajouter une propriété refdans l'élément DOM.

En faisant cela, nous pouvons accéder à l'élément with val.currentet modifier leurs propriétés de la même manière que l'on obtient un élément de with getElementById.

Dans le code ci-dessus, j'ajoute un bouton qui, lors d'un événement de clic, déclenche une fonction qui modifie le texte en "Hola Mundo" et l'arrière-plan en rouge.

Cela fonctionne parfaitement et sans re-rendre l'élément.

Conclusion

Le useRefhook, comme vous pouvez le voir, permet d'effectuer des actions complexes dans notre composant pour améliorer les performances et l'interactivité de notre application. J'espère que vous avez trouvé cet article utile. Merci de l'avoir lu.

Apprendre encore plus