Gestion de l'état à l'aide de React Hooks

1 h Niveau 5

Introduction

React introduit un tout nouveau concept appelé React Hooks à partir de React 16.8. Même s'il s'agit d'un concept relativement nouveau, il permet aux composants fonctionnels de React d'avoir leur propre état et cycle de vie. De plus, React Hooks permet aux composants fonctionnels d'utiliser de nombreuses fonctionnalités qui n'étaient pas disponibles auparavant. Dans ce chapitre, nous allons voir comment gérer l'état d'un composant fonctionnel en utilisant React Hooks.

Qu'est-ce que React Hooks ?

Les React Hooks sont des fonctions spéciales fournies par React pour gérer une fonctionnalité spécifique à l'intérieur d'un composant fonctionnel React. React fournit une fonction Hook pour chaque fonctionnalité supportée. Par exemple, React fournit la fonction useState() pour gérer l'état dans un composant fonctionnel. Quand un composant fonctionnel React utilise React Hooks, React Hooks s'attache au composant et fournit des fonctionnalités supplémentaires.

La signature générale de UseState() Hook est la suivante : -

const [<state variable>, <state update function>] = useState(<initial value>);

Par exemple, la gestion de l'état d'un composant d'horloge à l'aide de Hooks peut être effectuée comme indiqué ci-dessous.

const [currentDateTime, setCurrentDateTime] = useState(new Date()); 
setInterval(() => setCurrentDateTime(new Date()), 1000);

Ici,

  • currentDateTime − Variable utilisée pour contenir la date et l'heure actuelles (retournée par setState())
  • setCurrentDate() − Function utilisée pour définir la date et l'heure actuelles (renvoyée par setState())

Create a stateful component

Recréons notre composant d'horloge en utilisant des crochets dans ce chapitre.

Tout d'abord, créez une nouvelle application react, react-clock-hook-app en utilisant le bundler Create React App ou Rollup en suivant les instructions du chapitre Création d'une application React.

Ensuite, ouvrez l'application dans votre éditeur préféré.

Ensuite, créez le dossier src sous le répertoire racine de l'application.

Ensuite, créez un dossier de composants sous le dossier src.

Ensuite, créez un fichier Clock.js dans le dossier src/components et commencez à le modifier.

Ensuite, importez la bibliothèque React et React state Hook, setState.

import React, { useState } from 'react';

Ensuite, créez le composant Clock.

function Clock() { 
}

Ensuite, créez des crochets d'état pour maintenir la date et l'heure.

const [currentDateTime, setCurrentDateTime] = useState(new Date());

Ensuite, réglez la date et l'heure pour chaque seconde.

setInterval(() => setCurrentDateTime(new Date()), 1000);

Ensuite, créez l'interface utilisateur pour afficher la date et l'heure actuelles en utilisant currentDateTime et renvoyez-la.

return ( <div><p>The current time is {currentDateTime.toString()}</p></div> );

Enfin, exportez le composant en utilisant l'extrait de code -

export default Clock;

Le code source complet du composant Clock est le suivant -

import React, { useState } from 'react';

function Clock(props) {
    const [currentDateTime, setCurrentDateTime] = useState(new Date());
    setInterval(() => setCurrentDateTime(new Date()), 1000);
    return (
        <div><p>The current time is {currentDateTime.toString()}</p></div>
    );
}
export default Clock;

Ensuite, créez un fichier, index.js, dans le dossier src et utilisez le composant Clock.

import React from 'react';
import ReactDOM from 'react-dom';
import Clock from './components/Clock';

ReactDOM.render(
    <React.StrictMode>
        <Clock />
    </React.StrictMode>,
    document.getElementById('root')
);

Enfin, créez un dossier public sous le dossier racine et créez le fichier index.html.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Clock</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/JavaScript" src="./index.js"></script>
    </body>
</html>

Ensuite, servez l'application en utilisant la commande npm.

npm start

Ensuite, ouvrez le navigateur et entrez http://localhost:3000 dans la barre d'adresse et appuyez sur la touche Entrée. L'application affichera l'heure et la mettra à jour toutes les secondes.

L'application ci-dessus fonctionne bien. Mais, la fonction setCurrentDateTime() définie pour s'exécuter toutes les secondes doit être supprimée lorsque l'application se termine. Nous pouvons le faire en utilisant un autre Hook, useEffect fourni par React. Nous l'apprendrons dans le prochain chapitre (cycle de vie des composants).

Se connecter pour voir la suite
logo discord

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !

En savoir plus