Countdown-Timer in React einrichten

Bei modernen Webanwendungen, die in React erstellt wurden, muss oft die Zeit im Auge behalten werden. Wenn Sie beispielsweise einen Blog haben, muss jeder Beitrag sein Datum und die seit der Veröffentlichung vergangene Zeit anzeigen.

React-Anwendungen können eine Vielzahl von Funktionen haben. Die Implementierung eines Countdown-Timers in JavaScript kann ziemlich schwierig sein. Dabei werden Datumswerte manipuliert oder formatiert.

Sehen wir uns eine Beispielimplementierung eines Countdowns in der React-Anwendung an.

Implementierung des Countdown-Timers in React

Im Allgemeinen sind Countdown-Timer in allen React-Frameworks gleich aufgebaut. Komponenten sind die Hauptbausteine ​​von React-Anwendungen.

In diesem Beispiel erstellen wir eine funktionale Komponente für den Countdown-Timer. Wir werden Hooks verwenden, um den Status aufrechtzuerhalten und Nebeneffekte zu verwalten.

Verwenden Sie die Hooks useState() und useEffect(), um den Countdown-Timer in React einzurichten

Functional React-Komponenten können unterschiedliche Strukturen haben, aber sie folgen alle dem gleichen Grundmuster. Lassen Sie uns eine Funktion einrichten und sie Countdown nennen.

Vermutlich werden Sie diese Komponente innerhalb einer übergeordneten Komponente verwenden, daher sollten wir auch props akzeptieren.

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

Bisher ist dies sehr einfach. Wir werden Startminuten- und Sekundenwerte von den Requisiten erhalten. Wenn es keine Minuten und Sekunden gibt, von denen heruntergezählt werden kann, gibt es keinen Timer, um eine leere Zeichenfolge anzuzeigen.

Wenn die Werte verfügbar sind, ist es besser, Sekunden immer zweistellig anzuzeigen, um die Konsistenz zu formatieren, auch wenn es sich um eine einstellige Zahl handelt. Das erreichen wir, indem wir das Template-Literal innerhalb der geschweiften Klammern verwenden.

Wie wir sehen können, sind die Werte mins und secs destrukturiert, also wird unser nächster Schritt darin bestehen, dies zu tun. Wir haben auch erwähnt, dass wir die Hooks useState() und useEffect() brauchen werden. Ersteres wird notwendig sein, um mit den sich ändernden Zeiten Schritt zu halten.

Wenn wir mit Klassenkomponenten arbeiten würden, würden wir Lebenszyklusmethoden verwenden, um den Zeitwechsel zu bewältigen. Wir können die useEffect()-Hooks für funktionale Komponenten mit vielen Funktionen für Lebenszyklusmethoden verwenden.

Lassen Sie uns also kurzerhand die Hooks in unsere Anwendung einführen:

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>
    )
}

Wir müssen mit dem Import der Hooks useState und useEffect aus der Kernbibliothek beginnen.

Bisher sind die Zustandsvariablen mins und secs auf 0 gesetzt, also sehen wir nichts auf dem Bildschirm. Wenn Sie jedoch die Werte startingMinutes und startingSeconds der props ändern, sehen Sie einen Startpunkt eines Countdowns. Im obigen Code haben wir auch Funktionen zum Aktualisieren des Zustands definiert.

Die Essenz eines Countdowns besteht darin, periodisch einen bestimmten Zeitwert abzuziehen. Dafür brauchen wir die Methode setInterval(). Es führt ein Stück Code einmal alle angegebenen Zeiträume aus.

In diesem Fall müssen wir mit jeder verstreichenden Sekunde die Gesamtsekunden um 1 verringern. Einmal alle 60 Sekunden müssen wir auch die Startminuten um 1 verringern.

Unsere fertige Anwendung wird in etwa so aussehen:

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>
  );
}

Hier gibt es viel auszupacken. Lassen Sie uns zunächst die Logik unseres setInterval()-Callbacks erklären, da dies der Code ist, der einmal alle angegebenen Zeiträume ausgeführt wird.

Zuerst prüfen wir, ob der Zustandswert secs größer als 0 ist, und wenn ja, aktualisieren wir den Zustand mit dem Wert secs - 1. Es ist praktisch die Kernfunktionalität unseres Countdowns.

Im nächsten Schritt wird definiert, was passieren soll, wenn secs und mins 0 sind. In diesem Fall brechen wir die wiederholte Ausführung des Codes ab, indem wir die Funktion clearInterval() aufrufen.

Schließlich behandeln wir in der Anweisung else den Fall, dass die Sekunden 0 erreicht haben, aber noch Minuten abzuziehen sind.

Die Callback-Funktion ist das erste Argument. Es enthält den Codeabschnitt, der wiederholt ausgeführt werden soll.

In unserem Beispiel haben wir eine Inline-Funktion geschrieben, aber wir hätten sie genauso gut separat schreiben und in unserer setInterval()-Methode wie folgt referenzieren können:

setInterval(someFunction, 1000)

Das zweite Argument in diesem Beispiel bezieht sich ebenso wie das ursprüngliche Beispiel auf die Verzögerung. Sie gibt an, wie viel Zeit die Funktion setInterval() zwischen den Ausführungen des Codes warten soll.

Der Zeitwert wird in Millisekunden angegeben. In unserem Beispiel möchten wir, dass der Countdown-Timer jede Sekunde ausgeführt wird, 1000 Millisekunden.

Schließlich wird der Rückgabewert des Hooks useEffect() häufig verwendet, um Abonnements zu bereinigen und sich wiederholende Funktionen wie setInterval() abzubrechen. In unserem Beispiel machen wir genau das und rufen clearInterval() auf, wenn wir unsere Callback-Funktion sampleInterval() ausführen.