Co to są komponenty kontrolowane przez React i komponenty niekontrolowane?

106

Co to są komponenty kontrolowane i niekontrolowane komponenty w ReactJS? Czym się od siebie różnią?

reactjs react-component Xin
źródło
22
Nominacja do ponownego otwarcia. Właściwie to dość precyzyjne pytanie. Nie wiem, jak można to uznać za zbyt szerokie.
Charlie Flowers

Odpowiedzi:

134

Dotyczy to stanowych komponentów DOM (elementów formularzy), a dokumentacja Reacta wyjaśnia różnicę:

  • Kontrolowany komponent to taki, który bierze swoją bieżącą wartość przez propsi powiadamia zmiany poprzez wywołania zwrotne jak onChange. Komponent nadrzędny „kontroluje” go, obsługując wywołanie zwrotne i zarządzając własnym stanem oraz przekazując nowe wartości jako właściwości do kontrolowanego komponentu. Można to również nazwać „głupim komponentem”.
  • Niekontrolowane Komponent jest jeden, który przechowuje jej własny stan wewnętrznie i kwerendy DOM przy użyciu refznaleźć swoją obecną wartość, gdy jest to potrzebne. To trochę bardziej przypomina tradycyjny HTML.

Większość natywnych składników formularza React obsługuje zarówno kontrolowane, jak i niekontrolowane użycie:

// 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>

W większości (lub we wszystkich) przypadkach należy używać kontrolowanych komponentów .

Aaron Beall
źródło
1
Czy wartość nie jest stateraczej przejmowana niż props?
Ivanka Todorova
9
@IvankaTodorova W przypadku kontrolowanego komponentu wartość jest przekazywana props. Niekontrolowany składnik użyłby statedo wewnętrznej kontroli samej wartości. To jest kluczowa różnica.
Aaron Beall
1
Różnica między nimi jest to, że elementy, że ich wartość jest ustawiona / przeszły i mają zwrotnego nazywane są controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) vs. tradycyjny HTML gdzie element uchwyt wejściowy własnej wartości i może być odczytany poprzez refsnazywa uncontrolled components( <value type="text" />). Kontrolowane komponenty zarządzają własnym stanem poprzez setStatelub pobierają go z komponentu nadrzędnego jako właściwości.
Lior Elrom
Jak nazwałbyś komponent, który pobiera go defaultValueprzez właściwości, ale który powiadamia kontroler onBlur?
Paul Razvan Berg
@PaulRazvanBerg To brzmi jak anty-wzór, stan powinien być kontrolowany w jednym miejscu . Zwykle podnosisz stan do najbliższego wspólnego przodka.
Aaron Beall
1
  • Kontrolowane komponenty powiadamiają inne komponenty o zmianach za pomocą wywołań zwrotnych. Na przykład: <Button onClick={() => console.log("clicked")}>Click</Button>.
  • Niekontrolowane komponenty nie powiadamiają innych komponentów o ich zmianach, a dostęp do komponentu można uzyskać tylko za pomocą referencji. Ref może być przydatny, jeśli chcesz uzyskać dostęp do rzeczywistej domeny elementu HTML
shobe
źródło
1

Komponent kontrolowany to komponent, który pobiera zmienioną wartość z funkcji wywołania zwrotnego, a komponent niekontrolowany to komponent, który ma komponent z DOM. Na przykład, gdy wartość wejściowa zostanie zmieniona, możemy użyć funkcji onChange w komponencie kontrolowanym, a także możemy uzyskać wartość za pomocą DOM, jak ref.

LuarlaGagella
źródło