Lorsque React 16.8 est sorti officiellement début février 2019, il était livré avec un autre API qui vous permet d'utiliser l'état et d'autres fonctionnalités dans React sans écrire de classe. Cette API supplémentaire est appelée Hooks et ils deviennent populaires dans l'écosystème React, des projets open source à être utilisés dans les applications de production.

Les React Hooks sont complètement opt-in ce qui signifie que la réécriture existante le code est inutile, ils ne contiennent pas de changements de rupture et ils sont disponibles pour une utilisation avec la version de React 16.8. Certains développeurs curieux utilisaient l'API Hooks avant même sa sortie officielle, mais à l'époque, elle n'était pas stable et n'était qu'une fonctionnalité expérimentale. Il est désormais stable et recommandé aux développeurs de React.

Remarque : Nous ne parlerons pas de React ou de JavaScript en général. Une bonne connaissance de ReactJS et de JavaScript vous sera utile au cours de ce didacticiel.

Que sont les crochets React?

Les crochets React sont des fonctions intégrées qui permettent aux développeurs React d'utiliser des méthodes d'état et de cycle de vie à l'intérieur des composants fonctionnels, ils fonctionnent également avec le code existant, de sorte qu'ils peuvent facilement être adoptés dans une base de code. La façon dont les crochets ont été présentés au public était qu'ils permettaient aux développeurs d'utiliser l'état dans les composants fonctionnels, mais sous le capot, les crochets sont beaucoup plus puissants que cela. Ils permettent aux développeurs React de bénéficier des avantages suivants:

• Réutilisation améliorée du code;
• Meilleure composition du code;
• Meilleures valeurs par défaut;
• Partage de la logique non visuelle avec l'utilisation de crochets personnalisés;
• Flexibilité dans monter et descendre l'arborescence des composants .

Avec React Hooks, les développeurs ont le pouvoir d'utiliser des composants fonctionnels pour presque tout ce qu'ils ont à faire, du simple rendu de l'interface utilisateur à la gestion de l'état et de la logique – ce qui est

Motivation derrière la sortie de React Hooks

Selon la documentation officielle de ReactJS voici la motivation derrière la sortie de React Hooks:

• Réutilisation de la logique d'état entre les composants est difficile.
  Avec les crochets, vous pouvez réutiliser la logique entre vos composants sans changer leur architecture ou structure.
• Les composants complexes peuvent être difficiles à comprendre.
  Lorsque les composants deviennent lar ger et effectuer de nombreuses opérations, il devient difficile à comprendre sur le long terme. Les hooks résolvent ce problème en vous permettant de séparer un composant unique particulier en diverses fonctions plus petites en fonction des éléments de ce composant séparé qui sont liés (tels que la configuration d'un abonnement ou la récupération de données), plutôt que d'avoir à forcer un fractionnement basé sur les méthodes de cycle de vie. 19659010] Les cours sont assez déroutants.
  Les cours sont un obstacle à l'apprentissage de React correctement; vous devez comprendre comment fonctionne ce en JavaScript qui diffère des autres langues. React Hooks résout ce problème en permettant aux développeurs d'utiliser le meilleur des fonctionnalités de React sans avoir à utiliser de classes.

The Rules Of Hooks

Il y a deux règles principales qui doivent être strictement respectées comme indiqué par l'équipe principale de React dans lequel ils ont décrit dans la documentation de la proposition de crochets .

• Assurez-vous de ne pas utiliser les crochets à l'intérieur des boucles, des conditions ou des fonctions imbriquées;
• Utilisez uniquement les crochets à l'intérieur des fonctions de réaction.

Réaction de base Crochets

Il existe 10 crochets intégrés livrés avec React 16.8, mais les crochets de base (couramment utilisés) comprennent:

Ce sont les 4 crochets de base couramment utilisés par les développeurs de React qui ont adopté des crochets React dans leur

useState ()

Le crochet useState () permet aux développeurs React de mettre à jour, gérer et manipuler l'état à l'intérieur des composants fonctionnels sans avoir besoin de le convertir en composant de classe. Utilisons l'extrait de code ci-dessous est un simple composant de compteur d'âge et nous allons l'utiliser pour expliquer la puissance et la syntaxe du crochet useState () .

 function App () {
  const [age, setAge] = useState (19);
  const handleClick = () => setAge (age + 1)

  revenir
      

          J'ai {age} ans
        
 
         Augmente mon âge! 
      
   
}

Si vous avez remarqué, notre composant a l'air assez simple, concis et c'est maintenant un composant fonctionnel et n'a pas non plus le niveau de complexité qu'un composant de classe aurait.

Le useState () hook reçoit un état initial en tant qu'argument puis retourne, en utilisant la déstructuration des tableaux en JavaScript, les deux variables du tableau peuvent être nommées quoi. La première variable est l'état réel, tandis que la deuxième variable est une fonction destinée à mettre à jour l'état en fournissant un nouvel état.

Ceci est à quoi devrait ressembler notre composant lorsqu'il est rendu dans notre application React. En cliquant sur le bouton "Augmenter mon âge", l'état de l'âge changera et le composant fonctionnera comme un composant de classe avec état.

useEffect ()

Le useEffect () hook accepte une fonction qui contiendrait du code efficace. Dans les composants fonctionnels, les effets tels que les mutations, les abonnements, les temporisations, la journalisation et d'autres effets ne sont pas autorisés à être placés à l'intérieur d'un composant fonctionnel, car cela entraînerait de nombreuses incohérences lors du rendu de l'interface utilisateur et créerait également des bogues déroutants.

En utilisant le crochet useEffect () la fonction effective qui lui est transmise s'exécutera juste après l'affichage du rendu à l'écran. Les effets sont fondamentalement présentés dans la manière impérative de créer des interfaces utilisateur qui est assez différente de la manière fonctionnelle de React.

Par défaut, les effets sont exécutés principalement une fois le rendu terminé, mais vous avez la possibilité de les déclencher également lorsque certaines valeurs changent

Le useEffect () est principalement utilisé pour les effets secondaires qui sont généralement utilisés pour les interactions avec l'API Browser / DOM ou la récupération de données de type API externe ou les abonnements. En outre, si vous connaissez déjà le fonctionnement des méthodes de cycle de vie de React, vous pouvez également penser à utiliser le crochet useEffect () en tant que montage de composant mise à jour et démontage – tous combinés en une seule fonction. Il nous permet de répliquer les méthodes de cycle de vie dans les composants fonctionnels.

Nous allons utiliser les extraits de code ci-dessous pour expliquer la manière la plus élémentaire que nous pouvons utiliser en utilisant le crochet useEffect () .

Étape 1: Définissez l'état de votre application

 import React, {useState} de 'react';
fonction App () {
    // Définir l'état
    const [name, setName] = useState ({prénom: 'nom', nom de famille: 'nom de famille'});
    const [title, setTitle] = useState ('BIO');
    
    revenir(
        

            
 Titre: {title} 
            
 Nom: {name.firstName} 
            
 Nom de famille: {name.surname} 
        
    );
};
exporter l'application par défaut

Tout comme nous l'avons vu dans la section précédente sur la façon d'utiliser le crochet useState () pour gérer l'état à l'intérieur des composants fonctionnels, nous l'avons utilisé dans notre extrait de code pour définir l'état de notre application qui rend mon nom complet.

Étape 2: appelez le crochet useEffect

 importez React, {useState, useEffect} depuis 'react';
fonction App () {
    // Définir l'état
    const [name, setName] = useState ({prénom: 'nom', nom de famille: 'nom de famille'});
    const [title, setTitle] = useState ('BIO');
   
    // Appelle le hook use effect
    useEffect (() => {
      setName ({nom: 'Shedrack', nom de famille: 'Akintayo'})
    }, []) // passe dans un tableau vide comme deuxième argument
    
    revenir(
        

            
 Titre: {title} 
            
 Nom: {name.firstName} 
            
 Nom de famille: {name.surame} 
        
    );
};
exporter l'application par défaut

Nous avons maintenant importé le crochet useEffect et nous avons également utilisé la fonction useEffect () pour définir l'état de notre propriété nom et prénom, qui est assez net et concis.

Vous avez peut-être remarqué le crochet useEffect dans le deuxième argument qui est un tableau vide; c'est parce qu'il contient un appel à setFullName qui n'a pas de liste de dépendances. Le passage du deuxième argument empêchera une chaîne infinie de mises à jour ( componentDidUpdate () ) et permettra également à notre useEffect () crochet de faire office de componentDidMount

Notre application React devrait maintenant ressembler à ceci:

Nous pouvons également utiliser la propriété title de notre application dans la fonction useEffect () en appelant la fonction setTitle () comme donc:

 importez React, {useState, useEffect} de 'react';
fonction App () {
    // Définir l'état
    const [name, setName] = useState ({prénom: 'nom', nom de famille: 'nom de famille'});
    const [title, setTitle] = useState ('BIO');
   
    // Appelle le hook use effect
    useEffect (() => {
      setName ({nom: 'Shedrack', nom de famille: 'Akintayo'})
      setTitle ({'My Full Name'}) // Définir le titre
    }, []) // passe dans un tableau vide comme deuxième argument
    
    revenir(
        

            
 Titre: {title} 
            
 Nom: {name.firstName} 
            
 Nom de famille: {name.surame} 
        
    );
};
exporter l'application par défaut

Maintenant que notre application est restituée, elle affiche maintenant le nouveau titre.

useContext ()

Le useContext () hook accepte un objet contextuel, c'est-à-dire la valeur renvoyée par React.createContext puis renvoie la valeur de contexte actuelle pour ce contexte.

Ce hook permet aux composants fonctionnels d'accéder facilement à votre React contexte de l'application. Avant l'introduction du crochet useContext vous devez configurer un contextType ou un pour accéder à votre état global transmis par un fournisseur dans un composant de classe.

Fondamentalement , le crochet useContext fonctionne avec l'API React Context qui est un moyen de partager des données en profondeur dans votre application sans avoir à passer manuellement les accessoires de votre application à différents niveaux. Maintenant, useContext () facilite un peu l'utilisation de Context.

Les extraits de code ci-dessous montreront comment l'API Context fonctionne et comment le useContext Hook le rend meilleur. [19659076] La façon normale d'utiliser l'API de contexte

 import React from "react";
importer ReactDOM depuis "react-dom";

const NumberContext = React.createContext ();
fonction App () {
  revenir (
    
      

        
      
    
  );
}
fonction Display () {
  revenir (
    
      {value => 
 La réponse à la question est {value}. 
}
    
  );
}
ReactDOM.render (document.querySelector ("# root"));

Décomposons maintenant l'extrait de code et expliquons chaque concept.

Ci-dessous, nous créons un contexte appelé NumberContext . Il est destiné à renvoyer un objet avec deux valeurs: {Provider, Consumer} .

 const NumberContext = React.createContext (); 

Ensuite, nous utilisons la valeur Provider value qui a été retourné à partir du NumberContext que nous avons créé pour mettre une valeur particulière à la disposition de tous les enfants.

 function App () {
  revenir (
    
      

        
      
    
  );
} 

Avec cela, nous pouvons utiliser la valeur Consumer qui a été renvoyée par le NumberContext que nous avons créé pour obtenir la valeur que nous avons mise à la disposition de tous les enfants. Si vous l'avez remarqué, ce composant n'a reçu aucun accessoire.

 function Display () {
  revenir (
    
      {value => 
 La réponse à la question est {value}. 
}
    
  );
}
ReactDOM.render (document.querySelector ("# root"));

Notez comment nous avons pu obtenir la valeur du composant App dans le composant Afficher en encapsulant notre contenu dans un NumberContext.Consumer et en utilisant le

Tout fonctionne bien et la méthode d'accessoires de rendu que nous avons utilisée est un très bon modèle pour gérer les données dynamiques, mais à long terme, elle introduit une imbrication et une confusion inutiles si vous

Utilisation de la méthode useContext

Pour expliquer la méthode useContext nous allons réécrire le composant Display à l'aide du crochet useContext.

 // importez useContext (ou nous pourrions écrire React.useContext)
importer React, {useContext} de 'react';

// l'ancien code va ici

fonction Display () {
  const value = useContext (NumberContext);
  return 
 La réponse est {valeur}. 
;
} 

C'est tout ce que nous devons faire pour afficher notre valeur. Assez bien, non? Vous appelez le crochet et passez useContext () dans l'objet contextuel que nous avons créé et nous en récupérons la valeur.

Remarque: N'oubliez pas que l'argument qui est passé au hook useContext doit être l'objet contextuel lui-même et tout composant appelant useContext sera toujours restitué lorsque la valeur de contexte change.

useReducer ()

Le hook useReducer est utilisé pour la gestion de complexes états et transitions dans l'état. Il prend une fonction de réducteur ainsi qu'une entrée d'état initial; puis, il renvoie l'état actuel et également une fonction de répartition en sortie au moyen de la déstructuration de la matrice.

Le code ci-dessous est la syntaxe appropriée pour utiliser le crochet useReducer . [19659032] const [state, dispatch] = useReducer (réducteur, initialArg, init);