Funktionskomponenten in React — Der moderne Entwicklungsstandard

Was ist ein Functional Component?

Functional Component ist eine React-Komponente, die als Funktion definiert ist, die ein Props-Objekt akzeptiert und ein React-Element zurückgibt. Vor React 16.8 wurden solche Komponenten als zustandslos bezeichnet, da sie keinen internen Zustand verwalten konnten.

Mit der Einführung von Hooks in React 16.8 (Februar 2019) erhielten funktionale Komponenten Zugriff auf State (useState), Seiteneffekte (useEffect), Kontext (useContext) und Refs (useRef). Der Begriff „zustandslos“ ist veraltet — moderne funktionale Komponenten verwalten den Zustand vollständig.

React empfiehlt offiziell funktionale Komponenten als primäre Methode zum Erstellen von Komponenten. Die gesamte Dokumentation auf react.dev, Beispiele, Tutorials und neue APIs (Server Components, Actions) basieren auf dem funktionalen Ansatz. Klassenkomponenten wurden nicht entfernt, aber neue React-Funktionen sind nur über Hooks verfügbar.

Erstellen einer Funktionskomponente

Die einfachste Funktionskomponente ist eine Funktion, die JSX zurückgibt. Sie akzeptiert Props als Argument, benötigt keinen Konstruktor, super-Aufruf oder this-Bindung. Props sind direkt über das Funktionsargument zugänglich — kein this.props erforderlich.

// Functional component without state
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Arrow function (common variant)
const Greeting = ({ name }) => (
  <h1>Hello, {name}!</h1>
);

Komponente mit Zustand

Um Zustand hinzuzufügen, verwenden Sie useState. Der Hook gibt ein Tupel von zwei Werten zurück: den aktuellen Zustand und eine Setter-Funktion. Im Gegensatz zum klassenbasierten this.setState ersetzt useState den Wert vollständig, anstatt ihn mit dem vorherigen zu verschmelzen.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Hooks in Funktionskomponenten

Hooks sind die Grundlage von modernem React. Jeder Hook löst eine bestimmte Aufgabe: useState — Zustand, useEffect — Seiteneffekte, useContext — Kontextzugriff, useRef — DOM-Elementreferenzen, useCallback und useMemo — Memoisation.

useEffect für Seiteneffekte

useEffect ersetzt componentDidMount, componentDidUpdate und componentWillUnmount gleichzeitig. Das erste Argument ist ein Callback mit dem Effekt, das zweite ist ein Abhängigkeitsarray. Wenn das Array leer ist, wird der Effekt einmal nach dem Mounten ausgeführt. Wenn Abhängigkeiten angegeben sind, wird er bei jeder Änderung einer von ihnen ausgeführt.

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

function UserData({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let cancelled = false;

    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        if (!cancelled) setUser(data);
      });

    // Cleanup - analog of componentWillUnmount
    return () => { cancelled = true; };
  }, [userId]); // Dependency

  return <div>{user?.name}</div>;
}

Benutzerdefinierte Hooks

Der Hauptvorteil funktionaler Komponenten ist die Wiederverwendung von Logik durch benutzerdefinierte Hooks. Während in einer Klassenkomponente die Logik zwischen componentDidMount und componentDidUpdate dupliziert wurde, wird sie in einer Funktionskomponente in eine separate Funktion mit dem Präfix use extrahiert. Benutzerdefinierte Hooks sind die primäre Alternative zu HOC und Render Props.

Komposition statt Vererbung

React empfiehlt Komposition statt Vererbung zur Wiederverwendung von Code zwischen Komponenten. Funktionale Komponenten sind ideal für Komposition: Eine Komponente kann mehrere andere enthalten und ihnen Props und Children übergeben.

Das Children-Muster — wenn eine Komponente Kindelemente über die Prop Children empfängt — wird natürlich implementiert: function Layout({ children }). Das Analogon zu Vue-Slots wird durch benannte Komponenten-Props implementiert: function Page({ header, sidebar, content }).

Vererbung wird in React kaum verwendet. Selbst Klassenkomponenten, die technisch extends unterstützen, bilden selten Hierarchien, die tiefer als eine Ebene sind. Funktionale Komponenten mit Komposition decken die Anforderungen an die Code-Wiederverwendung ohne Vererbung vollständig ab.

Leistungsoptimierung

Funktionale Komponenten verfügen über eingebaute Optimierungsmechanismen. React.memo — das Äquivalent zu PureComponent für Funktionen: verhindert erneutes Rendern, wenn sich Props nicht geändert haben (oberflächlicher Vergleich). useMemo speichert Berechnungsergebnisse zwischen Renderings zwischen.

import React, { useMemo } from 'react';

// React.memo - memoize component
const ExpensiveList = React.memo(({ items }) => {
  return <ul>
    {items.map(item =>
      <li key={item.id}>{item.name}</li>
    )}
  </ul>;
});

// useMemo - caching result
function Dashboard({ transactions }) {
  const summary = useMemo(() => {
    return transactions.reduce((acc, t) => acc + t.amount, 0);
  }, [transactions]);

  return <p>Total: {summary}</p>;
}

useCallback memoisiert Callback-Funktionen, damit sie nicht bei jedem Rendern neu erstellt werden. Dies ist entscheidend beim Übergeben von Funktionen an Kindkomponenten, die in React.memo eingewickelt sind: Ohne useCallback wird die Kindkomponente jedes Mal neu gerendert, weil sich die Funktionsreferenz ändert.

Funktionale vs. Klassenkomponenten

Der Unterschied zwischen den Ansätzen geht über die Syntax hinaus. Funktionale Komponenten sind Closures: Zustand und Effekte sind an ein bestimmtes Rendering gebunden. Klassenkomponenten verwenden this: Der Zustand wird immer von this.state bezogen, der zum Zeitpunkt der Ausführung eines asynchronen Callbacks veraltet sein kann.

Funktionale Komponenten bieten einen linearen Ausführungsfluss. In einer Klassenkomponente ist verwandte Logik oft über mehrere Lebenszyklusmethoden verstreut. Zum Beispiel wird ein WebSocket-Abonnement in componentDidMount eingerichtet und in componentWillUnmount entfernt. In einer Funktionskomponente befinden sich beide Operationen in einem einzigen useEffect mit einer Bereinigungsfunktion als Rückgabe.

TypeScript und Funktionskomponenten

TypeScript funktioniert natürlicher mit funktionalen Komponenten als mit Klassen. Props-Typisierung — ein Interface für das Funktionsargument. Der Rückgabetyp ist JSX.Element oder ReactNode. useState leitet den Typ automatisch aus dem Anfangswert ab.

import React, { useState } from 'react';

interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
}

const Button: React.FC<ButtonProps> =
  ({ label, variant = 'primary', onClick }) => (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );

Modernes TypeScript erlaubt die Typisierung von useReducer mit diskriminierten Union-Typen, Generics in benutzerdefinierten Hooks und strenge Children-Validierung durch React.PropsWithChildren. Funktionale Komponenten mit TypeScript bieten vollständige Typsicherheit ohne zusätzliche Abstraktionen.