Erzählen Sie die Unterschiede zwischen kontrollierten und uncontrolled Komponenten in React.

Steuerbare Komponenten verwalten ihren Zustand über useState (oder this.state in Klassen) und erhalten Daten und Rückruffunktionen über Props. Der Zustand des Formulars wird beispielsweise im React-Zustand gespeichert und durch onChange-Handler aktualisiert.

Unkontrollierte Komponenten speichern ihren Zustand innerhalb des DOM. Um auf ihren Wert zuzugreifen, wird useRef (oder React.createRef in Klassen) verwendet, um eine Referenz auf das DOM-Element zu erhalten. Der Wert der Formularelemente wird beispielsweise direkt aus dem DOM beim Absenden extrahiert.

Merkmal	Steuerbare Komponente	Unkontrollierte Komponente
Zustandsverwaltung	React-Zustand (useState)	DOM
Zugriff auf Wert	Über Zustand und Props	Über Refs (useRef)
Aktualisierung	Reaktiv, bei jeder Änderung	Bei expliziter Aktion (z.B. Submit)
Validierung	In der React-Logik	Über HTML-API oder manuell nach Wertabruf

Beispiel für eine steuerbare Komponente:

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

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

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

Beispiel für eine unkontrollierte Komponente:

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    alert('Wert des Inputs: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Wert abrufen</button>
    </>
  );
}

Die Wahl zwischen ihnen hängt von der Komplexität der Logik und der Notwendigkeit einer sofortigen Reaktion auf Eingabeveränderungen ab. Steuerbare Komponenten sind für komplexe Formulare und Echtzeit-Validierung vorzuziehen. Unkontrollierte sind für einfache Formulare oder die Integration mit Drittanbieter-DOM-Bibliotheken geeignet.