Kontrollierte und unkontrollierte Komponenten in Reaktion

1. Kontrollierte Komponenten in Reaktion
2. Unkontrollierte Komponenten in Reaktion

Webentwickler verwenden JavaScript-basierte Frameworks aus vielen Gründen, hauptsächlich weil sie es uns ermöglichen, interaktive Webanwendungen zu erstellen, um die bestmögliche Benutzererfahrung zu bieten.

In diesem Artikel wird das Konzept kontrollierter Komponenten in React erörtert und Ratschläge gegeben, wie man sie implementiert und wann sie notwendig sind.

Der Hauptunterschied zwischen den beiden Arten von Komponenten besteht darin, wie sie den Status beibehalten und wie Sie auf die Werte in Eingabefeldern zugreifen.

Kontrollierte Komponenten in Reaktion

Bei dieser Art von Komponenten werden Benutzereingaben immer im Zustand gespeichert und nur mit der Methode setState() aktualisiert. Das Attribut value des Elements <input> wird auf diesen Zustandswert gesetzt.

Dadurch wird sichergestellt, dass der Staat die einzige Quelle der Wahrheit ist. Wenn Sie etwas in das Eingabefeld eingeben, wird der Statuswert aktualisiert, und der Wert im Eingabefeld spiegelt den neuesten Status wider.

Mit anderen Worten, das Textfeld aktualisiert den Status und erhält seinen Wert auch vom Status.

Hier ist ein Beispiel für eine gesteuerte Komponente.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [input, setInput] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      ></input>
      <p>The text you entered:</p>
      <h1>{input}</h1>
    </div>
  );
}

In diesem Beispiel importieren wir den useState()-Hook aus der React-Kernbibliothek. Wir verwenden den Hook, um eine Zustandsvariable input zu erstellen, und die Funktion, um ihren Wert zu aktualisieren.

Wir initialisieren die Zustandsvariable mit einem leeren String.

In JSX haben wir ein <div>-Element, das drei Elemente enthält: <input>, <p> und <h1>. Wir richten das Eingabeelement so ein, dass jedes Mal, wenn der Benutzer etwas eingibt oder löscht, der Ereignishandler onChange den Status mit dem neuesten Wert im Eingabefeld aktualisiert.

Außerdem setzen wir das Attribut value, damit das Eingabefeld seinen Wert aus dem Zustand erhält.

Schließlich haben wir ein <h1>-Element, das einen Kopfzeilentext anzeigt, der die Zeichenfolge in der Zustandsvariablen darstellt.

Schauen Sie sich diese Live-Demo auf CodeSandbox an und sehen Sie, wie alles funktioniert.

Unkontrollierte Komponenten in Reaktion

Eingabeelemente im DOM können ihren Zustand beibehalten. Bei unkontrollierten Komponenten greifen wir direkt im DOM-Element auf den Wert zu.

In React verwenden wir refs, um auf Eingabeelemente zuzugreifen. In diesem Fall greifen wir mit ref.current.value auf den aktuellen Wert im Input-Element zu.

Daher müssen Sie in React refs erstellen, um unkontrollierte Komponenten zu haben. Dazu benötigen Sie entweder den Hook useRef() für funktionale Komponenten oder die Methode React.createRef() in Klassenkomponenten.

Laut React-Dokumentation sollte Ihre Anwendung nur kontrollierte Komponenten haben. Unkontrollierte Komponenten sind unberechenbar und schwer zu warten.