Kontrollierte vs. unkontrollierte Komponenten in React

Kontrollierte Komponenten: Reaktionskomponenten, die den Zustand von Formularelementen über den Zustand oder Requisiten steuern, d. h. jede Zustandsänderung hat eine zugehörige Handlerfunktion.

Eigenschaften

• Der durch den Status - Elementwert gesteuerte Wert ist an die Statusvariable gebunden
• Erfordert einen Ereignishandler - Um den Status zu aktualisieren, benötigen Sie einen Ereignishandler
• Vorhersehbar - Da der Komponentenstatus den Eingabewert darstellt, ist die Komponente vorhersehbar und leicht zu debuggen
• React Verarbeitet die Eingabedaten und verlässt sich nicht auf DOM, um den aktuellen Eingabewert zu verfolgen

import React, { useState } from 'react';

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

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

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

Unkontrollierte Komponenten: React-Komponente, bei der DOM selbst den Status des Formularelements verwaltet. React greift über ref auf den Eingabewert zu, der seinen eigenen Status intern speichert, und Sie fragen das DOM mithilfe eines ref ab, um bei Bedarf den aktuellen Wert zu finden. Dies ähnelt eher traditionellem HTML.

Eigenschaften

• Von DOM gesteuerter Wert – Der Wert des Eingabefelds ist nicht an eine Statusvariable gebunden.
• Verwendet Ref, um auf einen Wert zuzugreifen oder bei Bedarf den Wert des Eingabeelements abzurufen
• Sie sind einfacher einzurichten, wenn Sie keine Echtzeitkontrolle über die Eingabe benötigen.
• Geeignet für Szenarien, in denen kein Reaktionsstatus zur Steuerung der Eingabe erforderlich ist.

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

Hier ist eine Vergleichstabelle zwischen kontrollierten und unkontrollierten Komponenten:

Wann wann verwenden
Kontrolliert - für Echtzeitvalidierungen, Eingabeformatierung oder sofortiges Feedback.
Unkontrolliert  – wird für einfache Anwendungsfälle wie Datei-Uploads verwendet. Der Wert vorab ausgefüllter Formulare kommt nicht häufig vor oder muss bis zur Formularübermittlung zurückgestellt werden.

Das obige ist der detaillierte Inhalt vonKontrollierte vs. unkontrollierte Komponenten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!