Catégories
Astuces et Design

Premiers pas avec l'API React Hooks – Smashing Magazine

A propos de l'auteur

Shedrack Akintayo est un ingénieur logiciel de Lagos, au Nigéria, qui aime le développement communautaire, l'open source et la création de contenu et de technologie pour les prochains…
Plus à propos
Shedrack

Dans ce didacticiel, vous allez apprendre et comprendre ce que sont les crochets React, les crochets React de base disponibles et également des exemples de la façon de les écrire pour vos applications React. Au cours du processus, vous apprendrez également à connaître certains crochets supplémentaires livrés avec React 16.8 et comment écrire vos propres crochets React personnalisés.

Lorsque React 16.8 est sorti officiellement début février 2019, il était livré avec une API supplémentaire 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 Crochets et ils deviennent populaires dans l'écosystème React, des projets open source aux applications de production.

React Hooks est complètement opt-in, ce qui signifie que la réécriture du code existant 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. Maintenant, il est 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 pendant que vous parcourez ce didacticiel.

Que sont les crochets React?

React Hooks 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 de React de bénéficier des avantages suivants:

  • Amélioration de la réutilisation du code;
  • Meilleure composition du code;
  • De meilleurs défauts;
  • Partager la logique non visuelle avec l'utilisation de crochets personnalisés;
  • Flexibilité pour monter et descendre le components arbre.

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 plutôt bien.

La motivation derrière la sortie des crochets React

Selon la documentation officielle de ReactJS, ce qui suit est la motivation derrière la sortie de React Hooks:

  • La réutilisation de la logique avec état entre les composants est difficile.
    Avec Hooks, 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 plus gros et effectuent de nombreuses opérations, cela devient difficile à comprendre à 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 une division basée sur les méthodes de cycle de vie.
  • Les classes sont assez déroutantes.
    Les cours sont un obstacle à l'apprentissage de React correctement; vous devez comprendre comment this dans les œuvres JavaScript qui diffèrent 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.

Les règles des crochets

Il y a deux règles principales qui doivent être strictement respectées, comme indiqué par l'équipe principale de React, dans lesquelles elles sont décrites dans la documentation de la proposition de hooks.

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

Crochets React de base

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 React qui ont adopté React Hooks dans leurs bases de code.

useState()

le useState() hook 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 useState() crochet.

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

  return 
      
I am {age} Years Old
}

Si vous l'avez remarqué, notre composant semble 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.

Notre application React terminée (Grand aperçu)

Voici à 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 fonctionnerait 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 minuteries, 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 bugs déroutants.

En utilisant le useEffect() hook, 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 également la possibilité de les déclencher lorsque certaines valeurs changent.

le useEffect() accrocher principalement dans le jeu pour les effets secondaires qui sont généralement utilisés pour les interactions avec le navigateur / API DOM ou la récupération de données de type API externe ou les abonnements. De plus, si vous connaissez déjà le fonctionnement des méthodes de cycle de vie de React, vous pouvez également penser à useEffect() accrocher comme montage de composants, mise à jour et démontage – tous combinés dans une seule fonction. Il nous permet de reproduire les méthodes de cycle de vie dans les composants fonctionnels.

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

Étape 1: définir l'état de votre demande
import React, {useState} from 'react';
function App() {
    //Define State
    const (name, setName) = useState({firstName: 'name', surname: 'surname'});
    const (title, setTitle) = useState('BIO');
    
    return(
        

Title: {title}

Name: {name.firstName}

Surname: {name.surname}

); }; export default App

Tout comme nous l'avons vu dans la section précédente sur la façon d'utiliser le useState() crochet 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
import React, {useState, useEffect} from 'react';
function App() {
    //Define State
    const (name, setName) = useState({firstName: 'name', surname: 'surname'});
    const (title, setTitle) = useState('BIO');
   
    //Call the use effect hook
    useEffect(() => {
      setName({name: 'Shedrack', surname: 'Akintayo'})
    }, ())//pass in an empty array as a second argument
    
    return(
        

Title: {title}

Name: {name.firstName}

Surname: {name.surame}

); }; export default App

Nous avons maintenant importé le useEffect crochet et a également fait usage de la useEffect() fonction pour définir l'état de notre propriété nom et prénom qui est assez soigné et concis.

Vous avez peut-être remarqué useEffect accrochez le deuxième argument qui est un tableau vide; c'est parce qu'il contient un appel à la setFullName qui n'a pas de liste de dépendances. Passer le deuxième argument empêchera une chaîne infinie de mises à jour (componentDidUpdate()) et permettra également à nos useEffect() crochet pour agir comme componentDidMount méthode de cycle de vie et rendu une fois sans re-rendu à chaque changement dans l'arborescence.

Notre application React devrait maintenant ressembler à ceci:

Réagissez à l'aide de l'application useEffect Crochet (grand aperçu)

Nous pouvons également utiliser title propriété de notre application à l'intérieur du useEffect() fonction en appelant le setTitle() fonction, comme ceci:

import React, {useState, useEffect} from 'react';
function App() {
    //Define State
    const (name, setName) = useState({firstName: 'name', surname: 'surname'});
    const (title, setTitle) = useState('BIO');
   
    //Call the use effect hook
    useEffect(() => {
      setName({name: 'Shedrack', surname: 'Akintayo'})
      setTitle({'My Full Name'}) //Set Title
    }, ())// pass in an empty array as a second argument
    
    return(
        

Title: {title}

Name: {name.firstName}

Surname: {name.surame}

); }; export default App

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

Notre projet terminé (Grand aperçu)

useContext()

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

Ce crochet permet aux composants fonctionnels d'accéder facilement au contexte de votre application React. Avant le useContext crochet a été introduit, vous auriez besoin de mettre en place un contextType ou un pour accéder à votre état global transmis par un fournisseur dans un composant de classe.

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

Les extraits de code ci-dessous montreront comment l'API contextuelle fonctionne et comment le useContext Le crochet le rend meilleur.

La façon normale d'utiliser l'API contextuelle
import React from "react";
import ReactDOM from "react-dom";

const NumberContext = React.createContext();
function App() {
  return (
    
      
); } function Display() { return ( {value =>
The answer to the question is {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 le Provider valeur renvoyée par le NumberContext nous avons créé pour mettre une valeur particulière à la disposition de tous les enfants.

function App() {
  return (
    
      
); }

Avec cela, nous pouvons utiliser le Consumer valeur renvoyée par le NumberContext 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() {
  return (
    
      {value => 
The answer to the question is {value}.
}
); } ReactDOM.render(, document.querySelector("#root"));

Notez comment nous avons pu obtenir la valeur du App composant dans le Display composant en enveloppant notre contenu dans un NumberContext.Consumer et utiliser la méthode des accessoires de rendu pour récupérer la valeur et la restituer.

Tout fonctionne bien et la méthode des 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 n'y êtes pas habitué.

Utilisation de la méthode useContext

Pour expliquer useContext méthode, nous allons réécrire le Display composant utilisant le hook useContext.

// import useContext (or we could write React.useContext)
import React, { useContext } from 'react';

// old code goes here

function Display() {
  const value = useContext(NumberContext);
  return 
The answer is {value}.
; }

C’est tout ce que nous devons faire pour afficher notre valeur. Assez bien, non? Vous appelez le useContext() hook and pass dans l'objet contextuel que nous avons créé et nous en prenons la valeur.

Remarque: N'oubliez pas que l'argument transmis 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 useReducer hook est utilisé pour gérer les états complexes et les transitions dans l'état. Il faut un reducer fonction et également une entrée d'état initial; puis, il retourne l'état actuel et aussi un dispatch fonctionner en sortie au moyen de la déstructuration des tableaux.

Le code ci-dessous est la syntaxe appropriée pour utiliser le useReducer crochet.

const (state, dispatch) = useReducer(reducer, initialArg, init);

C'est en quelque sorte une alternative à la useState crochet; il est généralement préférable de useState lorsque vous avez une logique d'état complexe qui a à voir avec plusieurs sous-valeurs ou lorsque l'état suivant dépend du précédent.

Autres crochets React disponibles

useCallback Ce hook renvoie une fonction de rappel qui est mémorisée et qui ne change que si une dépendance dans l'arborescence des dépendances change.
useMemo Ce hook renvoie une valeur mémorisée, vous pouvez passer une fonction "créer" et aussi un tableau de dépendances. La valeur qu'elle renvoie n'utilisera à nouveau la valeur mémorisée que si l'une des dépendances de l'arborescence des dépendances change.
useRef Ce crochet renvoie un objet ref mutable dont .current est initialisée à l'argument passé (initialValue). L'objet retourné sera disponible pendant toute la durée de vie du composant.
useImperativeHandle Ce hook est utilisé pour personnaliser la valeur d'occurrence qui est rendue disponible pour les composants parents lors de l'utilisation de références dans React.
useLayoutEffect Ce crochet similaire au useEffect hook, cependant, il se déclenche de manière synchrone après toutes les mutations DOM. Il rend également de la même manière que componentDidUpdate et componentDidMount.
useDebugValue Ce crochet peut être utilisé pour afficher une étiquette pour les crochets personnalisés dans React Dev Tools. Il est très utile pour le débogage avec React Dev Tools.

Crochets React personnalisés

Un «crochet personnalisé» est une fonction JavaScript dont les noms sont préfixés par le mot use et peut être utilisé pour appeler d'autres crochets. Il vous permet également d'extraire la logique des composants dans des fonctions réutilisables; ce sont des fonctions JavaScript normales qui peuvent utiliser d'autres crochets à l'intérieur, et contiennent également une logique avec état commune qui peut être utilisée dans plusieurs composants.

Les extraits de code ci-dessous illustrent un exemple de React Hook personnalisé pour implémenter le défilement infini (par Paulo Levy):

import { useState } from "react";

export const useInfiniteScroll = (start = 30, pace = 10) => {
  const (limit, setLimit) = useState(start);
  window.onscroll = () => {
    if (
      window.innerHeight + document.documentElement.scrollTop ===
      document.documentElement.offsetHeight
    ) {
      setLimit(limit + pace);
    }
  };
  return limit;
};

Ce crochet personnalisé accepte deux arguments qui sont start et pace. L'argument start est le nombre initial d'éléments à restituer tandis que l'argument pace est le nombre suivant d'éléments à restituer. Par défaut, le start et pace les arguments sont définis sur 30 et 10 respectivement, ce qui signifie que vous pouvez réellement appeler le crochet sans aucun argument et ces valeurs par défaut seront utilisées à la place.

Donc, afin d'utiliser ce crochet dans une application React, nous l'utiliserions avec une API en ligne qui renvoie des données «fausses»:

import React, { useState, useEffect } from "react";
import { useInfiniteScroll } from "./useInfiniteScroll";

const App = () => {
  let infiniteScroll = useInfiniteScroll();

  const (tableContent, setTableContent) = useState(());

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/")
      .then(response => response.json())
      .then(json => setTableContent(json));
  }, ());

  return (
    
{tableContent.slice(0, infiniteScroll).map(content => { return ( ); })}
User ID Title
{content.userId} {content.title}
); }; export default App;

Le code ci-dessus affichera une liste de fausses données (userID et title) qui utilisent le crochet de défilement infini pour afficher le nombre initial de données à l'écran.

Conclusion

J'espère que vous avez apprécié ce tutoriel. Vous pouvez toujours en savoir plus sur React Hooks dans les références ci-dessous.

Si vous avez des questions, vous pouvez les laisser dans la section commentaires et je me ferai un plaisir de répondre à toutes!

Le dépôt de support de cet article est disponible sur Github.

Ressources et lectures complémentaires

Smashing Editorial(ks, ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *