Crochets à réaction et composition en composants

Dans le premier article de cette série, nous avons traité un certain nombre de modèles avancés dans React. Cette fois, nous allons en apprendre davantage sur la manière dont nous pouvons utiliser des crochets à réaction pour remplacer certains de ces modèles afin d’augmenter la réutilisation de la logique d’états.

Il s’agit du deuxième article d’une série en deux parties. Dans le premier article, nous avons appris l'existence de modèles avancés dans React tels que les composants d'ordre supérieur et les accessoires de rendu. Nous avons examiné en quoi consistent exactement ces modèles, comment nous pouvons les utiliser pour atteindre un niveau satisfaisant de réutilisation du code et de partage de la logique d'état tout au long de nos projets, et comment ils peuvent nous aider à créer de meilleures applications. Dans cette partie, nous en apprendrons davantage sur React Hooks, sur leur nature et sur la manière de remplacer certains de ces modèles pour augmenter la réutilisation de la logique d'états avec React Hooks.

Nous savons que la composition dans React est un sujet important. beaucoup de gens ont commencé à en parler. Cela peut avoir un impact énorme sur nos applications s'il est mis en œuvre de manière incorrecte et avec de mauvais modèles. Nous devons donc nous efforcer d'améliorer la composition des composants dans notre code. Grâce à elle, nous pouvons automatiquement améliorer la lisibilité du code et nous obtenons moins de code avec plus de partage de logique à états dans toutes nos applications.

Le problème de certains modèles avancés de React, tels que High Order Components ou Render Props, c’est que parfois il est excessif. De plus, dans certains cas, cela peut laisser notre code plus lourd et trop difficile à comprendre pour les autres développeurs. Le fait que ces modèles soient avancés est un autre problème pour certains développeurs: ils ne savent pas exactement comment fonctionne un Render Prop et risquent de s'y perdre et de s'y perdre.

Mais comment remplacer ces modèles par de plus approche moderne, rendant notre code plus concis, plus lisible, et avec un bon niveau de composition des composants et de réutilisation du code? Nous pouvons utiliser React Hooks!

Dans la dernière version de React, l'équipe de React a publié React Hooks. C’est une toute nouvelle façon de traiter l’état de nos composants, en particulier maintenant que nous pouvons utiliser et gérer cet état dans nos composants fonctionnels. Avec Hooks, nous pouvons gérer assez facilement l'état de nos composants et partager la même logique, ce qui rend notre code plus lisible et notre application plus concise.

Hooks?

La manière dont nous traitons avec l'état dans React a toujours été une telle gros sujet et beaucoup de discussions de la part des développeurs. Le fait que nous devions utiliser les classes ES6 pour traiter l’État était assez ennuyant, car nous ne le connaissions pas trop et nous cherchions toujours une solution. Désormais, avec Hooks, nous disposons d’une toute nouvelle façon de traiter l’État à réagir.

Les crochets nous permettent de traiter l’État avec des composants fonctionnels. Il n’est donc plus nécessaire d’écrire plus de composants de classe. Pour commencer à utiliser Hooks, il suffit d'importer l'hameçon useState qui constitue l'hameçon le plus important:

importez React, {useState} de "react"; 

Maintenant, à l'intérieur notre composant de fonction, tout ce que nous avons à faire est de créer un const, qui va être un tableau de deux valeurs: la première est notre variable d'état et la seconde est notre fonction qui va faire quelque chose à notre état. Ensuite, nous passons la méthode useState puis la valeur par défaut de notre état, qui peut être un tableau, un objet, une chaîne, etc.

 const [name, setName] = useState ("");

Je viens de définir un état appelé nom qui va être une chaîne. Avec setName je peux définir mon nom chaque fois que je l'appelle. Assez simple et puissant, nous pouvons faire tout ce que nous faisions avec les classes ES6 avec des composants fonctionnels. Mais vous vous demandez peut-être comment nous pouvons gérer les méthodes de cycle de vie dans un composant fonctionnel.

Pour cela, l'équipe React a publié le hook useEffect qui peut totalement remplacer les méthodes de cycle de vie que nous utilisions dans ES6. composants de classe, cela nous permet de créer des effets secondaires dans nos composants. Pour l'utiliser, nous devons d'abord l'importer:

 import React, {useState, useEffect} de "react"; 

Et à l'intérieur de notre composant fonctionnel, nous passons une fonction appelée useEffect . [19659004] Semblable à composantDidMount et composantDidUpdate chaque fois que nous rendons ce composant, il restitue le nom que nous avons défini précédemment:

 useEffect (() => {console.log ( name);}); 

Le crochet useEffect peut être très délicat car il existe de nombreuses façons de l’utiliser. L'utiliser de manière inappropriée peut créer des problèmes dans votre application. Je vous recommande vraiment de commencer par lire la documentation sur le crochet useEffect puis pour voir comment cela fonctionne sous le capot, lisez ce document écrit par par Dan Abramov qui explique tout ce qui concerne le crochet useEffect .

Il s’agit d’une brève introduction à Hooks. Ensuite, nous allons en apprendre davantage sur les crochets personnalisés, sur ce qu’ils sont, sur la raison pour laquelle ils sont si puissants pour gérer la logique d’état dans nos applications et sur la façon dont nous pourrions remplacer nos accessoires de rendu nos accessoires de rendu.

Custom Hooks

19659008] Hooks est vraiment venu résoudre les problèmes que nous avons avec les composants d'ordre élevé et les accessoires de rendu, ainsi que pour nous permettre de traiter l'état avec un meilleur moyen que celui des composants de classes. Nous pouvons créer des crochets personnalisés à utiliser partout dans notre application, partager notre logique d'état quand nous le souhaitons et disposer d'une meilleure composition de composants. Les crochets personnalisés sont essentiellement une fonction, nous pouvons donc les importer où nous voulons. Dans le dernier article nous avons créé un accessoire de rendu appelé FetchJoke et nous savons qu'un accessoire de rendu est fondamentalement un accessoire dont la valeur est une fonction. Nous lui transmettons donc un composant. et nous le rendons.

Nous allons maintenant remplacer cet accessoire de rendu par un crochet personnalisé et vous verrez comment les crochets peuvent être un moyen plus efficace, plus puissant et plus lisible de gérer la réutilisation du code. Cas de composition de composants dans React than HOCs et Render Props.

Créons un fichier appelé useJokes qui sera un fichier dans lequel nous allons créer notre hook personnalisé. Importons maintenant le hook useState créons une fonction de flèche appelée useJokes et exportez-la à la fin de notre fichier.

 import {useState} de 'react';

const useJokes = () => {
  // ...
}

export default useJokes; 

Alors maintenant, dans notre fonction useJokes créons notre état, qui sera appelé blague . Et nous allons également créer une fonction pour définir notre état à chaque fois que nous faisons une demande, appelée setJoke . Nous allons passer une valeur par défaut à notre état de plaisanterie qui sera " Aucune blague. "

 const [joke, setJoke] = useState ("Aucune blague."); 

Maintenant que nous ayons implémenté notre état, nous devons créer notre fonction onRequest où nous ferons une demande lorsque nous cliquons sur le bouton. En dessous de notre état, créons une fonction de flèche appelée sur la requête et transmettons notre requête à l’intérieur:

 const onRequest = () => {
  fetch ("https://api.chucknorris.io/jokes/random")
    .then (response => response.json ())
    .then (joke => setJoke (joke.value))
    .catch (err => err);

Notez que lorsque nous renvoyons toute la blague qui va être un objet, nous devons définir une blague avec la fonction setJoke et passer le . joke.value pour cela. Sinon, cela produira une erreur.

Eh bien, notre crochet personnalisé est presque terminé. Tout ce que nous avons à faire est de renvoyer la blague et le onRequest à la fin de notre fonction comme ceci:

 return {blague, onRequest}; 

et l'ensemble de notre crochet personnalisé a uniquement. 16 lignes et ressemble à ceci à présent:

 import {useState} de "react";

const useJokes = () => {
  const [joke, setJoke] = useState ("Pas de blague.");
  const onRequest = () => {
    fetch ("https://api.chucknorris.io/jokes/random")
      .then (response => response.json ())
      .then (joke => setJoke (joke.value))
      .catch (err => err);
    };
    return {blague, onRequest};
};

export default useJokes; 

Maintenant, avec ce crochet personnalisé, nous pouvons remplacer assez facilement notre composant d'ordre élevé et notre propriété de rendu. Il nous suffit d'importer notre useJokes dans notre composant Jokes et à l'intérieur de notre composant, indiquez le code suivant:

 const {blague, onRequest} = useJokes (); [[;19659011] Ensuite, dans notre méthode de retour, nous allons retourner ceci: 


  
 {blague} 
   Cliquez pour voir une nouvelle blague. 
 
 Chaque fois que nous cliquons sur le bouton, cela nous renvoie une nouvelle blague. Vous pouvez remarquer que le code devient plus propre et plus lisible, ce qui nous aide à comprendre ce qui se passe sous le capot.
 Advanced Patterns
 Maintenant que nous avons des crochets et que nous sommes capables de créer des crochets personnalisés, de nombreuses personnes pourraient demandez-vous si les accessoires de rendu sont morts maintenant ou si cela vaut la peine d’utiliser des accessoires de rendu? Et ma réponse serait NON aux deux questions.
 Les accessoires de rendu ne sont pas morts, mais je ne pense pas que cela Cela vaut-il la peine d’utiliser les accessoires de rendu maintenant que nous avons des crochets? Nous savons qu'un accessoire de rendu est un accessoire dont la valeur est une fonction, mais si vous utilisez des accessoires de rendu, nous pourrions être confrontés à des problèmes, dont Wrapper Hell. Regardez cet exemple:
  (
   (
    
 (
      
    )} />
  )} />
)} /> 
 Dans ce cas, je viens de passer un exemple dans lequel nous n’avons que 3 accessoires de rendu, mais cela peut s’aggraver rapidement et notre code peut devenir assez désordonné et lent. Et ce problème n'est pas exclusif à Render Props - nous pourrions être confrontés à ce problème à l'aide de composants d'ordre élevé:
 connect (withLoading (withHandler (withProps (TodoComponent)))); 
 Dans ce cas, nous n'utilisons que 4 Les HOC transmettent notre logique à notre composant, mais imaginons que nous ayons un cas où nous devrions utiliser 10 HOC ou plus imbriqués. Il serait très pénible et très lent de développer et de maintenir ce code. En utilisant Hooks, nous n'avons pas ce problème car toute notre logique est partagée entre nos composants et nous n'aurons jamais de problème similaire à celui que Wrapper Hell utilise avec Hooks.
 Cela ne signifie pas que vous devez utiliser Hooks dans tous les cas. et ne retournez jamais à High Order Components ou Render Props! Cela signifie que dans certains cas (et dans la grande majorité d'entre eux), il est préférable d'utiliser Hooks car cela peut agréger une grande partie de votre application, ce qui permet au code de devenir plus lisible, plus rapide et beaucoup plus réutilisé.
 Conclusion
 19659008] Dans cette série en deux parties, nous avons découvert les schémas avancés de réaction et appris à les remplacer par des crochets. Aujourd'hui, l'avenir de React sera de plus en plus crochets - avec une meilleure composition des composants dans toutes nos applications, la logique d'état étant vraiment facile à partager entre les composants, une meilleure lisibilité du code, un code moins compliqué et plus lent, etc.
 Si vous avez le moindre avantage et par contre contre Advanced Patterns ou Hooks, commentez ci-dessous et discutons-en afin d’améliorer l’avenir des motifs et de la composition React.
 Merci de votre lecture!
 Vous voulez en savoir plus sur l’utilisation de React Hooks?
 For Pour en savoir plus sur les crochets à réaction, consultez certains de ces messages: