Crochets haut de gamme

Que sont les hooks React ?
Les hooks offrent aux composants fonctionnels la possibilité de gérer l’état et les effets secondaires. Ils ont été introduits pour la première fois dans React v16.8 et différents hooks ont été ajoutés depuis. Aujourd'hui, nous allons parler de MES 3 meilleurs crochets que j'utilise le plus.

**

1. Le crochet useState ** Il vous permet d'ajouter une variable d'état à l'intérieur d'un composant.

const [age, setAge] = useState(18)

Ce qui précède est un exemple simple de la façon dont ce hook est défini.
Les hooks useState prennent un paramètre (18) comme état initial pour la variable définie (âge) et nous fournissent un tableau de deux valeurs :

1. (age) qui renvoie l'état actuel
2. (setAge) qui est une fonction de définition qui vous permet de mettre à jour l'état.

Voici comment fonctionne une fonction setter :

fonction incrémentAge(){
setAge(a => a + 1)
>

Chaque fois que cette fonction est appelée, la fonction setter mettra à jour l'état en fonction du dernier état.

2. Le crochet useEffect
Il vous permet de synchroniser votre composant avec un système externe comme le DOM, les réseaux... .

useEffect(() => {
const connection = createConnection(serverUrl, roomId);
connexion.connect();
return () => {
connexion.disconnect();
};
}, [serverUrl, roomId]);

Le hook useEffect prend 2 paramètres, une fonction et un tableau de dépendances. La fonction ne s'exécutera que lorsque les variables du tableau de dépendances, qui vient après la fonction, changeront de valeur ou d'état. Si le tableau de dépendances est vide, la fonction s'exécutera à chaque rendu du composant.

Ce ne sont que deux des nombreux autres hooks de React, ils sont les plus courants et les plus utiles dans différentes situations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!