React Hooks - Satttoshi/github-wiki-generator GitHub Wiki

React Hooks sind eine Funktionserweiterung, die in React eingeführt wurde, um den Umgang mit Zustand und Nebeneffekten in funktionalen Komponenten zu erleichtern.

Um React Hooks verwenden zu können, müssen sie zuerst importiert werden:

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

Die useState-Hook ermöglicht es, Zustandsvariablen in funktionalen Komponenten zu verwenden. Sie wird verwendet, um Variablen zu deklarieren und ihnen einen Anfangswert zuzuweisen.

Hier ist ein Beispiel, wie useState verwendet wird, um den Wert einer Zählervariable zu verwalten:

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Wenn der Button geklickt wird, wird setCount verwendet, um den Wert der Zählervariable count zu aktualisieren.

Die useEffect-Hook ermöglicht es, Nebeneffekte in funktionalen Komponenten zu verwalten. Sie wird verwendet, um Code auszuführen, der Daten abruft, Änderungen an der DOM vornimmt oder andere Nebeneffekte hat.

Hier ist ein Beispiel, wie useEffect verwendet wird, um Daten von einer API abzurufen und sie in der Komponente anzuzeigen:

const DataFetching = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

In diesem Beispiel wird useEffect mit einem leeren Abhängigkeitsarray verwendet, um sicherzustellen, dass der API-Aufruf nur einmal beim Laden der Komponente erfolgt. Die abgerufenen Daten werden dann im Zustand data gespeichert und in der Komponente angezeigt.

Die Verwendung von React Hooks hat mehrere Vorteile:

• Einfachere Zustandsverwaltung: Mit useState können Zustandsvariablen in funktionalen Komponenten deklariert und aktualisiert werden, ohne eine Klasse erstellen zu müssen.
• Bessere Modularität: Hooks ermöglichen die Aufteilung von Logik in einzelne Funktionen, was den Code lesbarer und leichter zu warten macht.
• Keine Abhängigkeit von der Komponentenhierarchie: Mit Hooks können Zustand und Effekte unabhängig von der Komponentenstruktur verwendet werden, was die Wiederverwendbarkeit und Flexibilität von Code verbessert.

Die Verwendung von React Hooks macht die Entwicklung mit React effizienter und ermöglicht es Entwicklern, kompakteren und verständlicheren Code zu schreiben.