React est un framework JavaScript frontal. Bien que la création de pages HTML et leur gestion puissent devenir fastidieuses, React facilite les choses en décomposant les éléments à l'écran et leur logique en composants.

React apporte beaucoup, mais l'une des fonctionnalités les plus utiles est la gestion des états. Dans cet article, vous apprendrez à gérer l'état à l'aide de React Hooks. Avant d'aller plus loin, cet article suppose que vous connaissez les bases de React.

Que sont les crochets dans ReactJS ?

Le hook est un nouveau concept introduit dans React pour gérer l'état et d'autres fonctionnalités de React. En utilisant des hooks dans React, vous pouvez éviter d'écrire un code long qui utiliserait autrement des classes. L'exemple suivant illustre un exemple de useState accrocher.

const [variable, setVariable] = useState (valeur initiale);

Ici le variable est l'état et le setVariable est la fonction qui définit l'état. useState est le crochet qui contient la valeur initiale de la variable d'état. Ne vous inquiétez pas si cela n'a aucun sens pour vous. À la fin de ce didacticiel, vous maîtriserez parfaitement les crochets.

Il existe deux types de crochets:

• Crochets de base
  1. useState
  2. useEffet
  3. useContext
• Crochets supplémentaires
  1. useRef
  2. useMémo
  3. utiliserRéducteur

useState()

Les useState hook aide à gérer l'état. Plus tôt dans le développement de React, la gestion des états était effectuée à l'aide de classes. La syntaxe d'état a été écrite à l'intérieur du constructeur et a utilisé le cette mot-clé. Avec l'introduction des crochets React, les développeurs ont la liberté de gérer l'état à l'aide de composants fonctionnels.

Vous pouvez vous référer à l'exemple précédent pour la syntaxe des hooks React. L'exemple le plus simple à expliquer useState() est l'exemple de variable de comptage:

importer {useState} de "react" ;
fonction App() {
const [compte, setCount] = useState (0);
revenir (


Exemple de crochets

{compter}

setCount (count+1)}>Ajouter
setCount (count-1)}>Soustraire



);
}

Les useState hook a une variable et une méthode qui sont utilisées pour définir la valeur de la variable. Les useState hook accepte la valeur initiale de l'état comme paramètre. Vous pouvez définir n'importe quelle valeur pour la variable de comptage à l'aide de la setCount méthode.

Il y a deux boutons dans le code ci-dessus pour incrémenter et décrémenter la valeur du compter variable. Lors de l'incrémentation, vous pouvez ajouter +1 à l'état de comptage actuel et -1 pour décrémenter le comptage de 1.

useEffet

Les useEffet hook met à jour l'état sur la page Web après chaque changement d'état. Les useEffet hook a été introduit pour supprimer les effets secondaires des composants basés sur les classes. Avant l'introduction des composants basés sur les fonctions, les changements d'état étaient suivis à l'aide des composants du cycle de vie: composantDidMount et composantDidUpdate. Les useEffet hook accepte un tableau de dépendances. Tous les changements dans les variables d'état mentionnés dans le tableau de dépendances sont suivis et affichés à l'aide du useEffet accrocher.

Un exemple classique d'utilisation du useEffet le crochet est récupérer des données à partir d'une API ou calculer les likes ou les abonnements sur une publication.

useEffect(()=>{
// code
},[tableau de dépendances]);

Considérant l'exemple ci-dessus

import { useState, useEffect } de "react" ;
fonction App() {
const [compte, setCount] = useState (0);
useEffect(() => {
document.title = `Vous avez cliqué ${count} fois`;
}, [compter]);
revenir (


Exemple de crochets

{compter}

 setCount (count + 1)}>Ajouter



);
}

En passant le compter variable d'état dans le useEffet tableau de dépendances, il vérifie si l'état a changé ou non. Il définit ensuite le titre du document sur la variable count.

useContext

Les useContext hook permet de transmettre des données à travers le composant sans le faire manuellement via des accessoires. Cela rend l'utilisation de l'API de contexte rapide et facile. Vous aurez une meilleure compréhension après avoir parcouru un exemple.

Tout d'abord, comprenez à quoi ressemble le code sans utiliser Context. Comme vous pouvez le voir, vous devez transmettre le texte via des accessoires au composant enfant. Pour éviter les complexités, vous pouvez utiliser le useContext accrocher.

exporter la fonction par défaut App() {
let text = "Bonjour, bienvenue chez MUO" ;
revenir (






);
}
const ChildComponent = ({ texte }) => {
revenir 
{texte}
;
};

Tout d'abord, créez un fournisseur dans votre fichier principal (App.js).

const Context = React.createContext (null);

Les Application composant est le composant de niveau supérieur ou le composant "parent". Vous devez envelopper l'ensemble du composant dans le et transmettez l'objet ou les données que vous souhaitez afficher sur le composant enfant.

exporter la fonction par défaut App() {
let text = "Bonjour, bienvenue chez MUO" ;
revenir (








);
}

Maintenant, créez un composant enfant et accédez à l'accessoire de texte en utilisant le useContext accrocher. Passe le Le contexte variable à l'aide createContext.

const ChildComponent = () => {
let text = useContext (Context);
console.log (texte) ;
revenir 
{texte}
;
};

En rapport: Frameworks JavaScript qui valent la peine d'être appris​​​​​

Beaucoup plus à explorer avec React

Vous venez d'apprendre les bases des crochets. C'est l'une des meilleures fonctionnalités de React, et elle est également très conviviale pour les développeurs. React est l'un des meilleurs frameworks front-end à apprendre aujourd'hui pour les opportunités d'emploi, la création d'applications d'une seule page ou simplement pour élargir vos connaissances en programmation.

En parlant d'élargir vos connaissances, la gestion de l'état n'est qu'une compétence que les développeurs de React doivent mettre en pratique. D'autres fonctionnalités clés, telles que les accessoires, méritent tout autant votre attention.

Comment utiliser les accessoires dans ReactJS

Si vous cherchez des conseils sur l'utilisation des accessoires dans ReactJS, vous êtes au bon endroit.

Lire la suite

A propos de l'auteur