React Custom Hooks: Eigene Hooks verstehen und implementieren

React ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es bietet eine Möglichkeit, Code wiederzuverwenden und den Status auf saubere und organisierte Weise zu verwalten. Mit der Veröffentlichung von React 16.8 wurde eine neue Funktion namens Custom Hooks eingeführt, die es Entwicklern ermöglicht, ihre eigenen Hooks zu erstellen, um Logik zwischen Komponenten zu teilen und wiederzuverwenden.

In diesem Blog werden wir die Grundlagen benutzerdefinierter Hooks verstehen und lernen, wie wir unsere eigenen Hooks erstellen.

Was sind benutzerdefinierte Hooks? Benutzerdefinierte Hooks sind Funktionen, die es Ihnen ermöglichen, Zustandslogik und andere Logik zwischen React-Komponenten wiederzuverwenden. Sie sind eine Möglichkeit, zustandsbehaftete Logik aus einer Komponente zu extrahieren und sie mit anderen Komponenten zu teilen. Benutzerdefinierte Hooks beginnen mit dem Wort „use“ und können nur innerhalb des Körpers einer React-Funktionskomponente oder eines anderen benutzerdefinierten Hooks aufgerufen werden.

Warum benutzerdefinierte Hooks verwenden? Benutzerdefinierte Hooks bieten eine Möglichkeit, zustandsbehaftete Logik aus Komponenten zu extrahieren und sie so wiederverwendbar und leichter verständlich zu machen. Sie können komplexe Komponenten vereinfachen und Code lesbarer und wartbarer machen. Benutzerdefinierte Hooks ermöglichen es Entwicklern auch, Logik zwischen Komponenten zu teilen und wiederzuverwenden, wodurch die Notwendigkeit des Kopierens und Einfügens von Code verringert wird.

Benutzerdefinierte Hooks erstellen Um einen benutzerdefinierten Hook zu erstellen, müssen wir die folgenden Schritte ausführen:

1. Erstellen Sie eine neue Funktion mit dem Präfix „use“.
2. Fügen Sie Logik innerhalb der Funktion hinzu
3. Gibt einen Status und alle Hilfsfunktionen zurück, die der Komponente zur Verfügung gestellt werden sollen

import React, { useState } from 'react';
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
const toggleValue = () => {
    setValue(!value);
  };
return [value, toggleValue];
}

Hier ist ein Beispiel für die Verwendung des useToggleHooks in einer Komponente:

import React from 'react';
import useToggle from './useToggle';
function ToggleButton() {
  const [isToggled, toggleValue] = useToggle();
return (
    <button onClick={toggleValue}>
      {isToggled ? 'Turn Off' : 'Turn On'}
    </button>
  );
}

Ich hoffe, dieser Blog hilft Ihnen, Ihre eigenen benutzerdefinierten Hooks in React zu verstehen und zu implementieren. Viel Spaß beim Codieren!