Bienvenue, je suis content que tu sois là ! Aujourd'hui, je vais passer en revue React Hooks car j'ai travaillé avec eux sur mon projet actuel et je pense qu'ils sont extrêmement utiles. Je vais faire un rapide tour d'horizon qui, espérons-le, vous permettra de les utiliser dans votre prochaine application React ! Je vais passer en revue le but des crochets et pourquoi ils sont si utiles. Ensuite, je vais vous montrer comment implémenter les crochets dans votre application React et vous guider avec un exemple. Commençons!

Introduction aux crochets React

React Hooks était une nouvelle API qui a été incluse dans le déploiement de React v16.8 et a été présentée comme une nouvelle façon d'utiliser l'état dans les composants fonctionnels sans créer de classe. Mais les Hooks sont bien plus puissants que ça ! Les crochets permettent aux développeurs React d'utiliser l'état et d'autres méthodes de cycle de vie à l'intérieur des composants fonctionnels. Ils fonctionnent également bien avec le code existant, de sorte qu'ils peuvent facilement être adoptés dans une base de code.

Avantages des crochets React

Selon la documentation officielle de ReactJS , il y avait trois raisons principales pour la sortie de React Hooks. Premièrement, avant Hooks, il était très difficile de réutiliser la logique d'état entre les composants. Les crochets vous permettent de réutiliser la logique d'état entre les composants sans modifier leur composition. Deuxièmement, les cours sont difficiles à utiliser et parfois déroutants. Pour utiliser les classes, vous devez comprendre comment celaen JavaScript fonctionne, ce qui est très différent des autres langages. React Hooks aide à faciliter cette transition depuis d'autres langages et permet aux développeurs de bénéficier des avantages de React sans avoir à utiliser de classes. Enfin, cela aide à simplifier les composants en permettant aux développeurs de séparer un seul composant particulier en diverses fonctions plus petites en fonction des éléments du composant séparé qui sont liés.

Deux règles de React Hooks

Il n'y a que deux règles que l'équipe principale de React a décrites dans leur proposition qui doivent être strictement respectées lors de l'utilisation de React Hooks. La première est de ne pas utiliser de crochets à l'intérieur de boucles, de conditions ou de fonctions imbriquées . En suivant la première règle, il " ... garantit que les crochets sont appelés dans le même ordre à chaque rendu d'un composant et permet à React de conserver correctement l'état des crochets entre plusieurs appels useStateet . ” La seconde est, n'utilisez que des crochets dans une fonction React . En suivant la deuxième règle, il " garantit que toute la logique avec état d'un composant est clairement visible à partir de son code source. ”useEffect

Comment implémentons-nous React Hooks ?

Maintenant que vous avez une meilleure compréhension de React Hooks, vous êtes prêt à apprendre à les mettre en œuvre. Il y a en fait 10 crochets intégrés dans React v16.8, mais je ne couvrirai que le crochet le plus fondamental, useState() . Je vais passer par un exemple pour vous montrer comment useState() est utilisé et la syntaxe. Une fois que vous aurez appris à utiliser cette fonction, vous serez sur la bonne voie pour implémenter Hooks dans votre application React !

useState()

Le crochet useState() permet aux développeurs de mettre à jour, de gérer et de manipuler l'état à l'intérieur des composants fonctionnels. Comme je l'ai dit plus haut, c'est le plus basique et le plus fondamental des crochets et vous permettra de vous éloigner de l'utilisation des classes. Regardons l'exemple ci-dessous pour expliquer la puissance et la syntaxe du crochet useState() .

La première chose que nous devons faire dans le composant est de nous assurer d'importer le hook useState() de React (voir ligne 1). Maintenant, comme vous pouvez le voir ci-dessus, je peux utiliser une fonction au lieu de créer une classe pour le composant App. À la ligne 5, vous verrez la syntaxe utilisée pour établir un objet d'état, age . La deuxième variable, setAge , fonctionne de la même manière que setState() lorsque nous utilisons des classes et vous permet de modifier l'objet d'état age . Le paramètre dans useState() est la valeur par défaut/initiale de l'objet d'état. Ensuite, vous pouvez voir à la ligne 7 que la fonction setAge est utilisée pour modifier la valeur de l' âgevariable à chaque fois que le bouton est cliqué. Vous pouvez voir à quoi cela ressemble sur le navigateur ci-dessous.

Vous pouvez voir dans le navigateur qu'à chaque fois qu'un utilisateur appuie sur le bouton, l'âge, qui est également affiché, augmentera de 1.

Conclusion

Maintenant que vous avez acquis toutes les informations et bases sur React Hooks, vous devriez être armé des outils pour les mettre en œuvre dans votre prochaine application React ! J'ai mentionné plus tôt qu'il y a en fait 10 Hooks différents qui viennent avec l'API. Ils peuvent également être très utiles pour construire des composants fonctionnels propres. Cependant, avec useState() vous en avez assez pour commencer l'implémentation. Je vous mets au défi de lire plus en profondeur la documentation de React Hooks pour en savoir plus sur les autres Hooks de l'API ! Je suis tellement contente que tu me rejoignes et si tu continues, je te verrai la semaine prochaine !