Implementierung eines Grundladezustands

Wie erstellt man einen grundlegenden Ladezustand mithilfe von HTML-, Javascript- und ReactJS-Hooks?

Anforderungen:
1) Funktionskomponente reagieren.
2) Es sollte nur der Ladetext zurückgegeben werden: „Laden“.
3) Zeigen Sie die Punkte an, die jede Sekunde inkrementell (1) am Ende des Ladetextes hinzugefügt werden.
Zum Beispiel:
Laden. -1s- Laden.. -1s- Laden... -1s- Laden

Ansatz:

Legen Sie die statischen Elemente fest. Fügen Sie dann die Dynamik hinzu (Zustände, Hooks usw.). Gemäß der Überlegung im React-Dokument.

Implementierung statischer Elemente:

1) Erstellen Sie eine Funktionskomponente, die „Laden“ zurückgibt.

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

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

export default Loading;

Dynamik:

1) Die Anzahl der Punkte stellt einen Zustand der Komponente dar. Definieren Sie also eine Statusvariable mit useState.

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

Und fügen Sie die Punkte hinzu, nachdem Sie den Text geladen haben

{".".repeat(dots)}

2) Ein Zustand ändert sich automatisch nach jeder Sekunde. window.setInterval kann diese Aufgabe ausführen. Lassen Sie die Rückruffunktion vorerst leer.

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

3) Erstellen Sie einen useEffect-Hook, der nach dem ersten Rendern nur einmal ausgeführt wird.

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

Bisher zeigt die App nur „Laden“ an.
Machen Sie eine Pause und denken Sie über die Logik in der Rückruffunktion window.setInterval nach.

Die naheliegendste Lösung:

setDots((dots + 1) % 4);

Allerdings es ist falsch. Die Komponente wird nur ab
verfügbar sein „Laden.“-1s-„Laden...“. Dann bleibt es hängen.

Grund: Der Rückruf-FN von useEffect wird beim Anfangszustand der Punkte (1) ausgelöst. Jede Aktualisierung der Dots-Variable hat keinen Einfluss auf das Schließen der Callback-FN von useEffect.

Catch-1: Das Einfügen von Punkten in das Abhängigkeitsarray von useEffect macht keinen Sinn. Denn dann ruft es window.setInterval bei jeder Aktualisierung des Punktstatus auf. (Kann stattdessen window.setTimeout verwenden. Aber warum?)

Catch-2: Der Punktstatus der Loading-Komponente sollte von useEffect und window.setInterval abhängen. Wenn Sie jedoch Punkte direkt im useEffect verwenden, hängt der useEffect davon ab.

Bevor Sie mit dem nächsten Schritt fortfahren, denken Sie über Schließungen nach.

Überarbeiteter Ansatz

Definieren Sie den eigenen Punktstatus des Rückrufs von useEffect (z. B. effectDots). Die Rückruffunktion von window.setInterval erhöht die effectDots und legt außerdem den Punktstatus der Loading Component fest.
(Der Schlüssel besteht darin, die Abhängigkeit von setInterval -> dots state der Komponente in dots state der Komponente -> setInterval zu ändern.)

Überarbeitete Version der Rückruffunktionen von useEffect und window.setInterval mit einem lokalen Zustand effectDots:

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

Das obige ist der detaillierte Inhalt vonImplementierung eines Grundladezustands. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!