Principes de base des Hooks React, hooks useState

Dans cette histoire, nous allons couvrir toutes les bases sur les hooks de réaction et en savoir plus sur le hook de réaction intégré appelé useState ().

Prérequis -

Vous devez connaître les bases de HTML, Javascript, qu'est-ce que React et comment ça marche .

Et si vous remplissez ces conditions, vous êtes prêt à partir .

Qu'est-ce que React Hooks?

• Les React Hooks ont été introduits dans React 16.8 .
• Les hooks React sont essentiellement des fonctions qui vous permettent de gérer l' état de l'application Web, et vous permettent de travailler facilement avec d'autres fonctionnalités React telles que componentDidMount () , componentDidUpdate () sans écrire de classe .
• Vous pouvez utiliser les hooks React uniquement dans les composants fonctionnels , pas dans les composants définis par classe.
• En termes simples, nous pouvons définir les hooks de réaction comme des fonctions qui vous permettent de « vous connecter» à l' état de React et aux fonctionnalités du cycle de vie à partir de composants fonctionnels .
• Il existe de nombreux types de hooks React intégrés -

1. useState ()
2. useEffect ()
3. useContext ()

1. useReducer ()
2. useRef ()
3. useCallback ()
4. useMemo ()

Qu'est-ce que useState?

• useState est l'un des hooks React les plus courants et les plus utilisés.
• useState est utilisé comme hooks de gestion d'état d'un composant particulier.
• useState hook est utilisé pour gérer l'état de nos composants.
• useState nous permet de créer et de gérer des variables d'état facilement et commodément.
• En useState nous avons mis l' état initial de la variable d'état et de l' utilisation fonction définie useState pour changer cet état de cette variable d'état de l' état intial à l' état actuel .
• Nous ne pouvons utiliser useState que dans des composants fonctionnels et non dans des composants basés sur des classes .
• useState est identique à this.stateet this.setStatedans les composants basés sur les classes React .
• Ne vous inquiétez pas, si vous ne comprenez pas correctement state et useState, cela sera complètement clair dans votre tête une fois que vous le comprendrez par exemple de code.

Dans cette section, je vais créer un compteur simple à l' aide du hook useState afin que vous puissiez facilement comprendre comment fonctionne useState et quand l'utiliser.

• Code -
• Explication du code -
• Dans la ligne de ce code, nous avons importé le useStatehook à partir de ‘react’.
• Après cela, nous allons créer un composant fonctionnel appelé Appdans le fichier App.js.
• Dans ce composant fonctionnel, nous allons créer une variable d'état appelée count et une fonction useState appelée setCount.
• À la 6ème ligne de ce code, nous utilisons le hook useState dans lequel nous avons appelé la variable d'état count et pour changer l'état de ce compte, nous avons créé une fonction appelée setCount.
• Ici en useState(0)0 count état initial indiacé d'état varibale. Donc, au début, lorsque notre composant App charge la valeur de count la variable d'état sera 0. Et en utilisant setCountla méthode, nous pourrons changer la valeur de count la variable d'état.
• Nous avons maintenant créé une méthode appelée decreamentqui décrémentera la count valeur de la variable d'état de 1 chaque fois que nous cliquons sur le bouton (décrémenter -) . Fondamentalement, cette méthode définit l'état de la countvariable sur count-1using setCountmethod.
• Nous avons maintenant créé une méthode appelée increamentqui incrémentera la count valeur de la variable d'état de 1 chaque fois que nous cliquons sur le bouton (incrémenter +) . Fondamentalement, cette méthode définit l'état de la countvariable sur count+1using setCountmethod.
• Dans la return section de ce code est explicite et dans le bouton ( incrémenter +) nous avons passé la increament méthode en onClick événement et dans le bouton (décrémenter) nous avons passé la decreamentméthode.

Conclusion

Donc, ici, dans cet article, nous avons couvert les bases des hooks React et ce qu'est le hook useState, comment cela fonctionne et comment l'implémenter .

J'espère que vous avez aimé lire et apprendre.

Si vous avez aimé cet article, n'hésitez pas à laisser un applaudissement et à le partager avec les autres afin qu'ils puissent également en tirer des leçons.