Vous connaissez peut-être déjà les hooks React et même les hooks de base proposés par le framework. Les crochets vous permettent de gérer l'état et d'autres fonctionnalités sans avoir à écrire une classe. Les crochets de base sont useState, useEffet, et useContext. Dans cet article, vous découvrirez quelques crochets supplémentaires qui ajoutent un comportement plus compliqué.

Les crochets supplémentaires que vous apprendrez sont useRef et useMémo.

useRef

Les useRef La fonction renvoie un objet ref mutable et initialise son .courant propriété à l'argument passé. Les gens confondent souvent l'utilisation de useRef crochet avec useState accrocher. Vous pouvez demander à ce hook de conserver la référence d'un élément HTML. En utilisant cette référence, vous pouvez facilement manipuler cet élément.

Les useRef hook n'a qu'une seule propriété: .courant. React ne restitue pas la page lorsque son élément change. Il n'est pas non plus restitué si vous modifiez la valeur du fichier .courant biens. Comprenons l'utilisation de ce hook avec un exemple:

importer React, { useState, useRef } de 'react' ;
exporter la fonction par défaut App() {
const count = useRef (null);
const [nombre, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value < 10) {
count.current.style.backgroundColor = "rouge";
} autre {
count.current.style.backgroundColor = "vert";
}
};
revenir (


Entrez un nombre supérieur à 10

réf={compte}
type="texte"
valeur={nombre}
onChange={(e) => setNumber (e.target.value)}
/>
 checkNumber()}>Cliquez



);
}

Dans le code ci-dessus, la couleur de l'élément de saisie change en fonction du nombre que vous saisissez dans la zone de saisie. Premièrement, il attribue le résultat de la useRef() accrocher au compter variable. Il y a deux éléments: l'entrée et le bouton. L'élément input a la valeur de numéro et le réf la propriété de la balise d'entrée est compter pour correspondre à la variable.

Lorsque vous cliquez sur le bouton, le checkNumber() la fonction est appelée. Cette fonction vérifie si la valeur du numéro est supérieur à 10. Alors définit la couleur d'arrière-plan de l'élément d'entrée à l'aide du count.current.style.backgroundColor biens.

En rapport: Fondamentaux CSS: Travailler avec les couleurs

useMémo

Le hook useMemo recalculera une valeur mise en cache lorsque l'une de ses dépendances changera. Cette optimisation permet d'éviter des calculs coûteux à chaque rendu.

La syntaxe du useMémo crochet est le suivant:

const memoizedValue = useMemo(() => computeExpensiveValue (a), [a]);

Pour mieux comprendre, prenons un exemple. Le code ci-dessous bascule les couleurs de deux en-têtes. Il appelle le useState crochet pour garder une trace de leurs valeurs. Une fonction indique si la couleur est chaude ou froide selon sa valeur. Avant de renvoyer l'état de la couleur, il y a une boucle while qui s'arrête pendant environ une seconde. Ceci est à des fins de démonstration, pour expliquer l'avantage de la useMémo accrocher.

importer React, { useState, useMemo } de 'react' ;
exporter la fonction par défaut App() {
const [color1, setColor1] = useState("bleu");
const [color2, setColor2] = useState("vert");
const toggleColor1 = () => {
retourner color1 "bleu"? setColor1("rouge"): setColor1("bleu");
};
const toggleColor2 = () => {
color2 "vert"? setColor2("orange"): setColor2("vert");
};
const displayColor = () => {
var maintenant = new Date().getTime();
while (new Date().getTime() < now + 1000);
retourner color1 "bleu"? "cool": "chaud" ;
};
revenir (


Texte 1 couleur: {color1}

C'est la couleur {displayColor()}

Basculer la couleur
Texte 2 couleur: {color2}

Basculer la couleur



);
}

Lorsque vous cliquez sur toggleButton1, vous devriez remarquer un léger retard pendant que l'état change. Notez qu'il y a aussi un délai lorsque vous cliquez sur toggleButton2. Mais cela ne devrait pas arriver, puisque la pause d'une seconde se produit dans afficherCouleur. Sur cette page, les boutons doivent pouvoir agir indépendamment. Pour y parvenir, vous pouvez utiliser le useMémo accrocher.

Vous devez envelopper le afficherCouleur fonction dans le useMémo crochet et passe couleur1 dans le tableau de dépendances.

const displayColor = useMemo(() => {
var maintenant = new Date().getTime();
while (new Date().getTime() < now + 1000);
retourner color1 "bleu"? "cool": "chaud" ;
}, [couleur1]);

Les useMémo hook prend une fonction et les dépendances comme paramètres. Les useMémo hook ne sera rendu que lorsque l'une de ses dépendances changera. Il est utile dans les situations où vous devez récupérer à partir d'une API.

Que faire ensuite après avoir appris les crochets

Les crochets sont une fonctionnalité très puissante et sont couramment utilisés dans les projets React. Ils offrent un grand potentiel d'optimisation. Vous pouvez pratiquer les crochets en créant de petits projets comme des formulaires ou des compteurs d'horloge.

Il existe d'autres crochets avancés comme utiliserRéducteur, useLayoutEffect, et useDebugValue. Vous pouvez les apprendre en vous référant à la documentation officielle de React.

Unnati Bamania (10 articles publiés)

Unnati est un développeur full stack enthousiaste. Elle aime construire des projets en utilisant divers langages de programmation. Dans son temps libre, elle aime jouer de la guitare et est une passionnée de cuisine.

Plus d'Unnati Bamania