Configurer le compte à rebours dans React

Les applications Web modernes construites dans React impliquent souvent de garder une trace du temps. Par exemple, si vous avez un blog, chaque publication doit indiquer sa date et le temps écoulé depuis sa publication.

Les applications React peuvent avoir un ensemble diversifié de fonctionnalités. L’implémentation d’un compte à rebours en JavaScript peut être assez difficile. Cela implique de manipuler des valeurs de date ou de les formater.

Regardons un exemple d’implémentation d’un compte à rebours dans l’application React.

Implémentation du compte à rebours dans React

En général, les comptes à rebours dans tous les frameworks React sont structurés de la même manière. Les composants sont les principaux blocs de construction des applications React.

Nous allons créer un composant fonctionnel pour le compte à rebours dans cet exemple. Nous utiliserons des crochets pour maintenir l’état et gérer les effets secondaires.

Utilisez les crochets useState() et useEffect() pour configurer le compte à rebours dans React

Les composants fonctionnels de React peuvent avoir des structures différentes, mais ils suivent tous le même modèle de base. Configurons une fonction et appelons-la Countdown.

Vraisemblablement, vous utiliserez ce composant dans un composant parent, nous devrions donc également accepter les props.

export default function Countdown(props){
    return (
    <div>
    {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}    
    </div>
    )
}

Jusqu’ici, c’est très simple. Nous allons obtenir des valeurs de minutes et de secondes de départ à partir des props. S’il n’y a pas de minutes et de secondes à décompter, il n’y a pas de minuterie pour afficher une chaîne vide.

Si les valeurs sont disponibles, il est préférable de toujours afficher les secondes à deux chiffres pour la cohérence du formatage, même s’il s’agit d’un nombre à un chiffre. Nous y parvenons en utilisant le modèle littéral dans les accolades.

Comme nous pouvons le voir, les valeurs mins et secs sont déstructurées, donc notre prochaine étape sera de le faire. Nous avons également mentionné que nous aurons besoin des crochets useState() et useEffect(). Le premier sera nécessaire pour suivre l’évolution des temps.

Si nous travaillions avec des composants de classe, nous utiliserions des méthodes de cycle de vie pour gérer le changement de temps. Nous pouvons utiliser les crochets useEffect() pour les composants fonctionnels avec de nombreuses fonctionnalités de méthodes de cycle de vie.

Alors, sans plus tarder, introduisons les crochets dans notre application :

import React from "react";
import { useState, useEffect } from "react";
export default function Countdown(props){
  const { startingMinutes = 0, startingSeconds = 0 } = props;
  const [mins, setMinutes] = useState(startingMinutes);
  const [secs, setSeconds] = useState(startingSeconds);
    return (
    <div>
    {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}    
    </div>
    )
}

Nous devons commencer à importer les crochets useState et useEffect de la bibliothèque principale.

Jusqu’à présent, les variables d’état mins et secs sont définies sur 0, nous n’allons donc rien voir à l’écran. Cependant, si vous modifiez les valeurs startingMinutes et startingSeconds des props, vous verrez un point de départ d’un compte à rebours. Dans le code ci-dessus, nous avons également défini des fonctions pour mettre à jour l’état.

L’essence d’un compte à rebours est de déduire périodiquement une certaine valeur de temps. Pour cela, nous allons avoir besoin de la méthode setInterval(). Il exécute un morceau de code une fois tous les laps de temps spécifiés.

Dans ce cas, à chaque seconde qui passe, nous devons diminuer le total des secondes de 1. Une fois toutes les 60 secondes, nous devons également diminuer les minutes de départ de 1.

Notre application finie ressemblera à ceci :

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

export default function Countdown(props) {
  const { startingMinutes = 111, startingSeconds = 0 } = props;
  const [mins, setMinutes] = useState(startingMinutes);
  const [secs, setSeconds] = useState(startingSeconds);
  useEffect(() => {
    let sampleInterval = setInterval(() => {
      if (secs > 0) {
        setSeconds(secs - 1);
      }
      if (secs === 0) {
        if (mins === 0) {
          clearInterval(sampleInterval);
        } else {
          setMinutes(mins - 1);
          setSeconds(59);
        }
      }
    }, 1000);
    return () => {
      clearInterval(sampleInterval);
    };
  });

  return (
    <div>
      {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}
    </div>
  );
}

Il y a beaucoup à déballer ici. Tout d’abord, expliquons la logique de notre callback setInterval() puisqu’il s’agit du code qui sera exécuté une fois tous les laps de temps spécifiés.

Tout d’abord, nous vérifions si la valeur de l’état secs est supérieure à 0, et si c’est le cas, nous mettons à jour l’état avec la valeur secs - 1. C’est pratiquement la fonctionnalité de base de notre compte à rebours.

L’étape suivante définit ce qui doit se passer si les secs et mins sont 0. Dans ce cas, nous annulons l’exécution répétée du code en appelant la fonction clearInterval().

Enfin, dans l’instruction else, on traite le cas où les secondes ont atteint 0, mais il reste encore des minutes à déduire.

La fonction de rappel est le premier argument. Il contient le morceau de code qui doit s’exécuter de manière répétée.

Dans notre exemple, nous avons écrit une fonction inline, mais nous aurions tout aussi bien pu l’écrire séparément et la référencer dans notre méthode setInterval(), comme ceci :

setInterval(someFunction, 1000)

Le deuxième argument de cet exemple, ainsi que l’échantillon d’origine, fait référence au délai. Il spécifie combien de temps la fonction setInterval() doit attendre entre les exécutions du code.

La valeur de temps est spécifiée en millisecondes. Dans notre exemple, nous voulons que le compte à rebours soit exécuté toutes les secondes, 1000 millisecondes.

Enfin, la valeur de retour du crochet useEffect() est couramment utilisée pour nettoyer les abonnements et annuler les fonctions répétitives comme setInterval(). Dans notre exemple, nous faisons exactement cela et appelons clearInterval() lors de l’exécution de notre fonction de rappel sampleInterval().