Comment déstructurer les bases de React Hooks

Les crochets sont devenus une nouvelle fonctionnalité assez puissante de React. Ils peuvent être intimidants si vous n'êtes pas vraiment sûr de ce qui se passe dans les coulisses. La beauté est maintenant de pouvoir gérer l’état de manière simple (et réutilisable) dans les composants de la fonction.

Mais pourquoi ne pas utiliser une classe? Sans s’éloigner trop du sujet, les fonctions offrent un moyen plus simple d’écrire vos composants, vous guidant pour écrire de manière plus propre et plus réutilisable. Bonus: cela facilite généralement la rédaction de tests.

Il y a beaucoup de cas d'utilisation de hooks, je ne vais donc pas me lancer dans des exemples. Il ne faut pas être trop méchant pour se mettre au courant avec quelques lignes rapides. Dans l’intérêt de cet article, supposons que les cookies de navigateur ne sont pas une chose et qu’ils sont du type comestible.

Plonger dans la jarre à biscuits

Nous avons ici MyCookies, un composant de fonction, que nous pouvons considérer comme notre jarre à biscuits. Disons que nous voulons garder en interne le nombre de cookies que nous avons dans le pot. Avec la nouvelle API de hooks, nous pouvons ajouter une simple ligne en utilisant useState pour gérer le travail.

const MyCookies = () => {
  const [cookies, setCookieCount] = useState (0);
  ...
};

Attendez, comment pouvons-nous récupérer les cookies?

Si vous pensez que ce qui précède est magique et vous demandez comment les valeurs du tableau sont définies, vous devez comprendre les bases de la déstructuration du tableau.

Lors de la déstructuration d'un objet, la même clé sera utilisée où que vous essayiez de l'extraire, la déstructuration des tableaux utilisant l'ordre des éléments dans le tableau.

const [un, deux] = [1, 2];
console.log (un); // 1
console.log (deux); // 2

Bien que ce qui précède semble donner l’impression de les nommer dans un ordre particulier, ce n’est pas comme indiqué ci-dessous:

const [deux, un] = [1, 2];
console.log (deux); // 1
console.log (un); // 2

Sans aller trop loin dans le gouffre technique, useState est une fonction qui renvoie un tableau que nous sommes en train de déstructurer pour l'utiliser dans notre composant.

Qu'en est-il du 0 dans l'invocation de useState lui-même? C’est simplement la valeur initiale sur laquelle nous définissons l’instance d’état. Dans ce cas, nous allons malheureusement commencer avec 0 cookies.

En fait, utilisez l'état

Une fois que nous avons nos cookies déstructurés et la fonction setCookiesCount, nous pouvons commencer à interagir avec l'état local du composant, comme vous pourriez le faire en utilisant setState dans un composant de classe.

Au moment du rendu, notre valeur de cookies correspond à l'invocation de la valeur d'état interne de useState, similaire à ce que vous pourriez voir avec this.state. Pour mettre à jour cette valeur, nous pouvons simplement appeler setCookiesCount.

const MyCookies = () => {
  const [cookies, setCookieCount] = useState (0);
  revenir (
    <>
      

Cookies: {cookies}       

Si vous êtes plus habitué à la syntaxe de la classe, vous pouvez mettre à jour l’état en utilisant this.setState, qui ressemble à ceci:

La classe MyCookies étend React.Component {
  constructeur () {
    super();
    this.state = {
      cookies: 0
    }
  }
  render () {
    revenir (
      <>
        

Cookies: {this.state.cookies}         

Comment utiliser les effets

Les composants ont souvent besoin d’un moyen de créer des effets secondaires qui n’interrompent pas nécessairement le flux fonctionnel d’un composant de fonction. Supposons que nous ayons le nombre de cookies que nous avons enregistrés sur un serveur quelque part, nous voudrons peut-être récupérer ce nombre lors du chargement de l'application.

const MyCookies = () => {
  const [cookies, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). then ((count) => {
      setCookieCount (count);
    })
  });
  ...
};

Après le rendu du composant, tout ce qui est à l'intérieur de useEffect sera exécuté. Tout effet secondaire provenant de useEffect ne se produira qu'une fois le rendu terminé. Cela dit, une fois que useEffect est exécuté, nous lançons getCookieCount et utilisons notre précédente fonction setCookieCount pour mettre à jour l'état du composant.

Tenez bon, il ya quelque chose qui ne va pas…

Cependant, le code ci-dessus contient un piège. Cet effet s'exécutera à chaque fois, supprimant essentiellement toute nouvelle augmentation de la valeur de cookie de notre bouton d'origine Ajouter un cookie.

Pour contourner ce problème, nous pouvons définir un deuxième argument pour la fonction useEffect, ce qui nous permet de laisser savoir à React à quel moment le réexécuter. Dans notre exemple ci-dessus, définir ce deuxième argument sur un tableau vide ne le fera fonctionner qu'une seule fois.

const MyCookies = () => {
  const [cookies, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). then ((count) => {
      setCookieCount (count);
    })
  }, []);
  ...
};

Toutefois, dans la plupart des cas, vous souhaiterez transmettre un tableau de dépendances qui, une fois modifiées, provoqueront l’utilisation de l’effet de useEffect. Supposons, par exemple, que vous récupériez le nombre d'un type de cookie spécifique et que vous souhaitiez le récupérer à nouveau si ce type change.

const MyCookies = ({cookieType = 'chocolate'}) => {
  const [cookies, setCookieCount] = useState (0);
  useEffect (() => {
    getCookieCount (). then ((count) => {
      setCookieCount (count);
    })
  }, [cookieType]);
  ...
};

Dans le code ci-dessus, chaque fois que notre prop cookieType change, React sait que nous en dépendons pour notre effet et réexécutera cet effet.

Essayer d'utiliser le contexte

Je ne vais pas entrer dans les détails de l’API de contexte de React car c’est un peu hors de portée. Toutefois, si vous le connaissez bien, le hook useContext vous permet d’utiliser facilement votre contexte à partir de votre composant fonction.

importer BasketContext à partir de 'contexte';

const Basket = ({enfants}) => {
  revenir (
    
      

Mon panier       { Enfants }        ) } // MyCookies.js const MyCookies = ({cookieType = 'chocolate'}) => {   const basketItems = useContext (BasketContext);   ... };

Dans le code ci-dessus, étant donné notre contexte déjà créé, nous pouvons immédiatement "utiliser" ledit contexte et collecter les valeurs transmises à notre fournisseur de contexte.

Nettoyer vos crochets

Ce qui rend les crochets encore plus puissants, c'est de les combiner et de les abstraire. Sécher votre code de manière plus propre. Comme dernier exemple rapide, nous pouvons prendre nos exemples de cookie de useState et useEffect et les résumer dans leur propre fonction [Nom] use, créant ainsi efficacement un point d'ancrage personnalisé.

// useCookies.js
fonction useCookies (initialCookieCount) {

  const [cookies, setCookieCount] = useState (initialCookieCount);

    useEffect (() => {
    getCookieCount (). then ((count) => {
      setCookieCount (count);
    })
  }, []);

  fonction addCookie () {
    setCookieCount (cookies + 1);
    console.log ('');
  }

  fonction removeCookie () {
    setCookieCount (cookies - 1);
    console.log ('');
  }

  revenir {
    biscuits,
    addCookie,
    enleverCookie
  }
};

// MyCookies.js
const MyCookies = () => {
  const {cookies, addCookie, removeCookie} = useCookies (0);
  ...
};

Nous avons pu dégager notre logique d’état en toute sécurité et l’utiliser tout de même pour gérer nos cookies.

Beaucoup plus pour devenir accro

Ce sont les trois crochets de base que React nous donne, mais ils en fournissent d’autres beaucoup plus, avec tous les mêmes principes sous-jacents que la documentation de React explique très bien.

Plus de javascript, UX et autres choses intéressantes de moi sur Twitter.

Publié à l'origine sur https://www.colbyfayock.com le 17 avril 2019.