M

MLOG

Deutsch

Erfahren Sie, wie Sie React Custom Hooks nutzen, um Komponentenlogik zu extrahieren und wiederzuverwenden, und so die Wartbarkeit, Testbarkeit und die gesamte Anwendungsarchitektur verbessern.

React Custom Hooks: Extrahieren von Komponentenlogik zur Wiederverwendbarkeit

React Hooks haben die Art und Weise, wie wir React-Komponenten schreiben, revolutioniert und bieten eine elegantere und effizientere Möglichkeit, den Zustand und Nebenwirkungen zu verwalten. Unter den verschiedenen verfügbaren Hooks stechen Custom Hooks als leistungsstarkes Werkzeug zum Extrahieren und Wiederverwenden von Komponentenlogik hervor. Dieser Artikel bietet eine umfassende Anleitung zum Verständnis und zur Implementierung von React Custom Hooks, die Sie befähigt, wartbarere, testbarere und skalierbarere Anwendungen zu erstellen.

Was sind React Custom Hooks?

Im Wesentlichen ist ein Custom Hook eine JavaScript-Funktion, deren Name mit "use" beginnt und die andere Hooks aufrufen kann. Er ermöglicht es Ihnen, Komponentenlogik in wiederverwendbare Funktionen zu extrahieren, wodurch Code-Duplizierung eliminiert und eine sauberere Komponentenstruktur gefördert wird. Im Gegensatz zu regulären React-Komponenten rendern Custom Hooks keine Benutzeroberfläche; sie kapseln lediglich Logik.

Stellen Sie sich diese als wiederverwendbare Funktionen vor, die auf React-Zustände und Lifecycle-Funktionen zugreifen können. Sie sind eine fantastische Möglichkeit, zustandsbehaftete Logik zwischen verschiedenen Komponenten zu teilen, ohne auf Higher-Order Components oder Render Props zurückgreifen zu müssen, was oft zu Code führen kann, der schwer zu lesen und zu warten ist.

Warum Custom Hooks verwenden?

Die Vorteile der Verwendung von Custom Hooks sind zahlreich:

Ihren ersten Custom Hook erstellen

Lassen Sie uns die Erstellung und Verwendung eines Custom Hooks anhand eines praktischen Beispiels veranschaulichen: das Abrufen von Daten von einer API.

Beispiel: useFetch - Ein Hook zum Abrufen von Daten

Stellen Sie sich vor, Sie müssen in Ihrer React-Anwendung häufig Daten von verschiedenen APIs abrufen. Anstatt die Abruflogik in jeder Komponente zu wiederholen, können Sie einen useFetch Hook erstellen.


import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

Erklärung:

Verwendung des useFetch Hooks in einer Komponente

Sehen wir uns nun an, wie dieser Custom Hook in einer React-Komponente verwendet wird:


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

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!users) return <p>No users found.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

Erklärung:

Fortgeschrittene Custom Hook Muster

Über das einfache Abrufen von Daten hinaus können Custom Hooks verwendet werden, um komplexere Logik zu kapseln. Hier sind einige fortgeschrittene Muster:

1. Zustandsverwaltung mit useReducer

Für komplexere Szenarien der Zustandsverwaltung können Sie Custom Hooks mit useReducer kombinieren. Dies ermöglicht es Ihnen, Zustandsübergänge auf eine vorhersehbarere und organisiertere Weise zu verwalten.


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

Verwendung:


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

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2. Kontext-Integration mit useContext

Custom Hooks können auch verwendet werden, um den Zugriff auf React Context zu vereinfachen. Anstatt useContext direkt in Ihren Komponenten zu verwenden, können Sie einen Custom Hook erstellen, der die Logik für den Kontextzugriff kapselt.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

Verwendung:


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

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

3. Debouncing und Throttling

Debouncing und Throttling sind Techniken, die verwendet werden, um die Rate zu steuern, mit der eine Funktion ausgeführt wird. Custom Hooks können verwendet werden, um diese Logik zu kapseln, wodurch es einfach wird, diese Techniken auf Event-Handler anzuwenden.


import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

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

  return debouncedValue;
}

export default useDebounce;

Verwendung:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // Perform search with debouncedSearchValue
    console.log('Searching for:', debouncedSearchValue);
    // Replace console.log with your actual search logic
  }, [debouncedSearchValue]);

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

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

Best Practices für das Schreiben von Custom Hooks

Um sicherzustellen, dass Ihre Custom Hooks effektiv und wartbar sind, befolgen Sie diese Best Practices:

Globale Überlegungen

Bei der Entwicklung von Anwendungen für ein globales Publikum sollten Sie Folgendes beachten:

Beispiel: Internationalisierte Datumsformatierung mit einem Custom Hook


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

Verwendung:


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

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

Fazit

React Custom Hooks sind ein leistungsstarker Mechanismus zum Extrahieren und Wiederverwenden von Komponentenlogik. Durch die Nutzung von Custom Hooks können Sie saubereren, wartbareren und testbareren Code schreiben. Wenn Sie sich mit React vertraut machen, wird die Beherrschung von Custom Hooks Ihre Fähigkeit, komplexe und skalierbare Anwendungen zu erstellen, erheblich verbessern. Denken Sie daran, Best Practices zu befolgen und globale Faktoren bei der Entwicklung von Custom Hooks zu berücksichtigen, um sicherzustellen, dass sie für ein vielfältiges Publikum effektiv und zugänglich sind. Nutzen Sie die Kraft von Custom Hooks und verbessern Sie Ihre React-Entwicklungsfähigkeiten!