Benutzerdefinierte Hooks in React: Wiederverwendung von Logik über Komponenten hinweg

Benutzerdefinierte Hooks in React

Ein Custom Hook ist eine JavaScript-Funktion, die es Ihnen ermöglicht, zustandsbehaftete Logik über mehrere Komponenten hinweg in einer React-Anwendung wiederzuverwenden. Benutzerdefinierte Hooks sind ein leistungsstarkes Tool zum Kapseln von Logik, die von Komponenten gemeinsam genutzt werden kann, um die Komponenten sauber zu halten und die Wiederverwendbarkeit von Code zu fördern.

Benutzerdefinierten Hooks wird „use“ vorangestellt, um der Konvention von React zu folgen, und sie können andere darin enthaltene Hooks verwenden (z. B. useState, useEffect, useContext usw.).

---

Warum benutzerdefinierte Hooks verwenden?

Benutzerdefinierte Haken bieten mehrere Vorteile:

1. Code-Wiederverwendbarkeit: Sie ermöglichen es Ihnen, wiederverwendbare Logik aus Ihren Komponenten zu extrahieren. Wenn Sie Logik haben, die von mehreren Komponenten gemeinsam genutzt werden muss, können Sie sie in einen benutzerdefinierten Hook extrahieren.
2. Trennung von Belangen: Durch die Verlagerung komplexer Logik aus Komponenten können benutzerdefinierte Hooks dazu beitragen, dass sich Komponenten stärker auf die Darstellung der Benutzeroberfläche konzentrieren, was die Lesbarkeit und Wartbarkeit verbessert.
3. Abstraktion: Sie bieten eine Möglichkeit, komplexe Logik zu abstrahieren, wodurch Ihre Komponenten sauberer und leichter verständlich werden.

---

So erstellen Sie einen benutzerdefinierten Hook

Um einen benutzerdefinierten Hook zu erstellen, befolgen Sie diese Schritte:

1. Schreiben Sie eine Funktion: Die Funktion sollte die Logik enthalten, die Sie wiederverwenden möchten.
2. Eingebaute Hooks verwenden: Innerhalb der Funktion können Sie andere React-Hooks wie useState, useEffect oder andere Hooks verwenden, um Status oder Nebenwirkungen zu verwalten.
3. Rückgabewerte: Gibt den erforderlichen Status, die Funktionen oder Werte vom benutzerdefinierten Hook zurück, die in der Komponente verwendet werden sollen.

---

Grundlegendes Beispiel eines benutzerdefinierten Hooks

Hier ist ein einfaches Beispiel für einen benutzerdefinierten Hook, der die Mausposition verwaltet:

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Erklärung:

• Der benutzerdefinierte Hook useMousePosition verfolgt die Mausposition auf dem Bildschirm.
• Es verwendet useState, um den Status der Mauskoordinaten (x und y) zu verwalten.
• Es verwendet useEffect, um einen Ereignis-Listener für das Mousemove-Ereignis hinzuzufügen und es zu bereinigen, wenn die Komponente ausgehängt oder der Effekt erneut ausgeführt wird.
• Der Hook gibt die Mausposition (x und y) zurück, die von jeder Komponente verwendet werden kann, die useMousePosition importiert und aufruft.

---

Verwenden des benutzerdefinierten Hooks in einer Komponente

Jetzt können Sie diesen benutzerdefinierten Hook in jeder Komponente verwenden, um auf die Mausposition zuzugreifen:

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Erklärung:

• Die MouseTracker-Komponente verwendet den benutzerdefinierten Hook useMousePosition, um auf die Mausposition zuzugreifen.
• Jedes Mal, wenn die Maus bewegt wird, wird die Position aktualisiert und die Komponente wird neu gerendert, um die neuen Koordinaten anzuzeigen.

---

Erweitertes Beispiel: Benutzerdefinierter Hook für die Formularverarbeitung

Sie können benutzerdefinierte Hooks für komplexere Logik erstellen, beispielsweise für die Formularverarbeitung.

import React from 'react';
import useMousePosition from './useMousePosition';

const MouseTracker = () => {
  const position = useMousePosition();  // Using the custom hook

  return (
    <div>
      <h2>Mouse Position:</h2>
      <p>X: {position.x}, Y: {position.y}</p>
    </div>
  );
};

export default MouseTracker;

Erklärung:

• Der useFormInput-Hook nimmt einen Anfangswert an und gibt den Eingabewert und eine handleChange-Funktion zurück.
• Der Hook kann in jeder Formularkomponente verwendet werden, um den Formulareingabestatus zu verwalten.

---

Verwenden des Form-Hooks in einer Komponente

Jetzt können Sie useFormInput in einer Formularkomponente verwenden:

import { useState } from 'react';

// Custom Hook to handle form input
const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

export default useFormInput;

Erklärung:

• Der useFormInput-Hook wird verwendet, um die Status- und Änderungsereignisse sowohl für die Namens- als auch für die E-Mail-Eingaben zu verarbeiten.
• Die handleSubmit-Funktion protokolliert die Formularwerte, wenn das Formular gesendet wird.

---

Regeln für benutzerdefinierte Hooks

Benutzerdefinierte Hooks folgen den gleichen Regeln wie React-Hooks:

1. Hooks nur auf der obersten Ebene aufrufen: Hooks nicht bedingt oder innerhalb von Schleifen aufrufen.
2. Nur ​​Hooks von React-Funktionen aufrufen: Benutzerdefinierte Hooks können nur von React-Funktionskomponenten oder anderen benutzerdefinierten Hooks aufgerufen werden.
3. Beginnen Sie mit use: Benutzerdefinierte Hooks müssen mit dem use-Präfix beginnen, um sie von regulären JavaScript-Funktionen zu unterscheiden.

---

Benutzerdefinierte Hooks für Nebenwirkungen verwenden

Benutzerdefinierte Hooks können auch verwendet werden, um Nebenwirkungen wie das Abrufen von Daten zu bewältigen.

import React from 'react';
import useFormInput from './useFormInput';

const MyForm = () => {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', nameInput.value);
    console.log('Email:', emailInput.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" {...nameInput} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" {...emailInput} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

Erklärung:

• useFetchData ist ein benutzerdefinierter Hook, der Daten von einer API abruft.
• Es verwaltet die Daten, isLoading und Fehlerzustände.
• Der Hook kann in jeder Komponente wiederverwendet werden, die Daten von einer API abrufen muss.

---

Verwenden des Fetch Data Hook in einer Komponente

So können Sie den useFetchData-Hook in einer Komponente verwenden:

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Erklärung:

• Die DataComponent verwendet den benutzerdefinierten Hook „useFetchData“, um Daten von der API abzurufen.
• Die Komponente übernimmt das Laden, Fehler und Anzeigen der abgerufenen Daten basierend auf dem vom benutzerdefinierten Hook zurückgegebenen Status.

---

Zusammenfassung der benutzerdefinierten Hooks

• Benutzerdefinierte Hooks ermöglichen es Ihnen, Logik in Ihrer React-Anwendung zu kapseln und wiederzuverwenden.
• Sie tragen dazu bei, Ihre Komponenten sauber zu halten, indem sie komplexe Logik abstrahieren.
• Benutzerdefinierte Hooks können integrierte Hooks wie useState, useEffect und andere verwenden und folgen denselben Regeln wie React-Hooks.
• Zu den häufigsten Anwendungsfällen für benutzerdefinierte Hooks gehören die Verwaltung von Formulareingaben, das Abrufen von Daten, die Behandlung von Nebenwirkungen und mehr.

---

Das obige ist der detaillierte Inhalt vonBenutzerdefinierte Hooks in React: Wiederverwendung von Logik über Komponenten hinweg. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!