Implémentation d'un état de chargement de base

Comment créer un état de chargement de base à l'aide de hooks HTML, Javascript et ReactJs ?

Exigences :
1) Réagir au composant fonctionnel.
2) Il devrait simplement renvoyer le texte de chargement : "Chargement".
3) Afficher les points ajoutés progressivement (1) à la fin du texte de chargement chaque seconde.
Par exemple :
Chargement. -1s- Chargement.. -1s- Chargement... -1s- Chargement

Approche:

Décidez des éléments statiques. Ajoutez ensuite la dynamique (états, hooks, etc.). Selon la réflexion dans le document React.

Implémentation des éléments statiques :

1) Créez un composant fonctionnel qui renvoie "Loading".

const Loading = () => {
  const loadingText = "Loading";

  return (
    <div>
      <h2>{loadingText}</h2>
    </div>
  );
};

export default Loading;

Dynamique:

1) Le nombre de points représente un état du composant. Alors, définissez une variable d'état en utilisant useState.

const [dots, setDots] = useState(1);

Et ajoutez les points après avoir chargé le texte

{".".repeat(dots)}

2) Un état change automatiquement après chaque seconde. window.setInterval peut effectuer cette tâche. Laissez la fonction de rappel vide pour l'instant.

window.setInterval(() => {
      // Logic to increment dots
    }, 1000);

3) Créez un hook useEffect qui ne s'exécute qu'une seule fois après le rendu initial.

useEffect(() => {
    window.setInterval(() => {
      // Logic to increment dots
    }, 1000);
  }, []);

Jusqu'à présent, l'application affiche uniquement "Chargement".
Faites une pause et réfléchissez à la logique à l’intérieur de la fonction de rappel window.setInterval.

La solution qui semble évidente :

setDots((dots + 1) % 4);

Cependant, c'est faux. Le composant n'ira qu'à partir de
"Chargement."-1s-"Chargement...". Ensuite, il restera bloqué.

Raison : Le rappel fn de useEffect est déclenché sur l'état initial des points (1). Toute mise à jour de la variable points n'affecte pas la fermeture du fn de rappel de useEffect.

Catch-1 : Inclure des points dans le tableau de dépendances de useEffect n'a pas de sens. Parce qu'alors il appelle window.setInterval à chaque mise à jour de l'état des points. (Peut utiliser window.setTimeout à la place. Mais pourquoi ?)

Catch-2 : L'état des points du composant Loading doit dépendre de useEffect et window.setInterval. Cependant, l'utilisation de points directement dans useEffect fait en dépendre useEffect.

Avant de passer à l'étape suivante, pensez aux fermetures.

Approche révisée

Définissez le propre état des points du rappel de useEffect (disons effectDots). La fonction de rappel de window.setInterval incrémente les effectDots et définit également l'état des points du composant de chargement.
(La clé est de modifier la dépendance de setInterval -> état des points du composant à l'état des points du composant -> setInterval. )

Version révisée des fonctions de rappel de useEffect et window.setInterval avec un effet d'état localDots :

  useEffect(() => {
    let effectDots = 1;
    window.setInterval(() => {
      // increment, modulo 4
      // set the Loading component's state
      setDots(effectDots++ % 4);
    }, 1000);
  }, []);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!