React useDebounce-Hook

Einführung

In diesem Lab werden wir lernen, wie wir einen benutzerdefinierten React-Hook namens useDebounce erstellen, der das Debouncing von Benutzereingaben unterstützt. Debouncing ist eine Technik, die das Aufrufen einer Funktion verzögert, bis eine bestimmte Zeit seit der letzten Aufrufzeit verstrichen ist. Diese Technik wird häufig in Szenarien eingesetzt, in denen die Benutzereingabe häufige Aktualisierungen des Anwendungsstatus auslöst, da sie dazu beitragen kann, unnötige Neuerstellungen zu reduzieren und die Leistung zu verbessern.

Skills Graph

React useDebounce-Hook

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Um einen gegebenen Wert zu debouncen, können Sie einen benutzerdefinierten Hook erstellen, der einen value und eine delay annimmt. Verwenden Sie den useState()-Hook, um den debouncen-Wert zu speichern, und den useEffect()-Hook, um den debouncen-Wert jedes Mal zu aktualisieren, wenn value aktualisiert wird. Um das Aufrufen des Setters der vorherigen Zustandsvariablen um delay ms zu verzögern, verwenden Sie setTimeout(). Um aufzuräumen, wenn die Komponente abgebaut wird, verwenden Sie clearTimeout(). Dies ist besonders nützlich, wenn es um Benutzereingaben geht.

Hier ist eine Beispielimplementierung des useDebounce()-Hooks:

const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = React.useState(value);

  React.useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
};

Sie können den useDebounce()-Hook in einer Komponente wie folgt verwenden:

const Counter = () => {
  const [value, setValue] = React.useState(0);
  const lastValue = useDebounce(value, 500);

  return (
    <div>
      <p>
        Aktuell: {value} - Debouncen: {lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>Inkrementieren</button>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Counter />);

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das React useDebounce-Hook-Lab abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.