Was sind reaktionsgesteuerte und unkontrollierte Komponenten?

100

Was sind gesteuerte und unkontrollierte Komponenten in ReactJS? Wie unterscheiden sie sich voneinander?

reactjs react-component Xin
quelle
21
Nominierung zur Wiedereröffnung. Es ist eigentlich eine ziemlich genaue Frage. Ich bin mir nicht sicher, wie es als zu breit angesehen werden kann.
Charlie Flowers

Antworten:

127

Dies bezieht sich auf statusbehaftete DOM-Komponenten (Formularelemente), und die React-Dokumente erläutern den Unterschied:

  • Eine gesteuerte Komponente ist eine Komponente , die ihren aktuellen Wert durchläuftprops und Änderungen durch Rückrufe wie benachrichtigt onChange. Eine übergeordnete Komponente "steuert" sie, indem sie den Rückruf behandelt, ihren eigenen Status verwaltet und die neuen Werte als Requisiten an die gesteuerte Komponente übergibt. Sie können dies auch als "dumme Komponente" bezeichnen.
  • Eine unkontrollierte Komponente ist eine Komponente , die ihren eigenen Status intern speichert. Sie fragen das DOM mit a ab ref, um den aktuellen Wert bei Bedarf zu ermitteln. Dies ist ein bisschen mehr wie traditionelles HTML.

Die meisten nativen React-Formularkomponenten unterstützen sowohl die kontrollierte als auch die unkontrollierte Verwendung:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

In den meisten (oder allen) Fällen sollten Sie kontrollierte Komponenten verwenden .

Aaron Beall
quelle
1
Wird der Wert nicht stateeher durchgenommen als props?
Ivanka Todorova
9
@IvankaTodorova Bei einer kontrollierten Komponente wird der Wert übergeben props. Eine unkontrollierte Komponente würde stateden Wert selbst intern steuern. Dies ist der Hauptunterschied.
Aaron Beall
1
Der Unterschied zwischen ihnen besteht darin, dass Komponenten, deren Wert festgelegt / übergeben wird und die einen Rückruf haben, als controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) bezeichnet werden, im Vergleich zu herkömmlichem HTML, bei dem ein Eingabeelement seinen eigenen Wert verarbeitet und über refsaufgerufene uncontrolled components( <value type="text" />) gelesen werden kann . Kontrollierte Komponenten verwalten ihren eigenen Status über setStateoder erhalten ihn von ihrer übergeordneten Komponente als Requisiten.
Lior Elrom
Wie würden Sie eine Komponente aufrufen, die sie defaultValueüber Requisiten erhält , aber den Controller benachrichtigt onBlur?
Paul Razvan Berg
@PaulRazvanBerg Das klingt wie ein Anti-Pattern, der Status sollte an einem einzigen Ort gesteuert werden . Normalerweise heben Sie den Status zum nächsten gemeinsamen Vorfahren.
Aaron Beall
1
  • Kontrollierte Komponenten benachrichtigen andere Komponenten über Änderungen mithilfe von Rückrufen. Zum Beispiel : <Button onClick={() => console.log("clicked")}>Click</Button>.
  • Unkontrollierte Komponenten benachrichtigen andere Komponenten nicht über ihre Änderungen, und Sie können nur mit ref-s auf Komponenten zugreifen. Ref kann nützlich sein, wenn Sie auf den Real Dom des HTML-Elements zugreifen müssen
Shobe
quelle