Co to są komponenty kontrolowane i niekontrolowane komponenty w ReactJS? Czym się od siebie różnią?
Odpowiedzi:
Dotyczy to stanowych komponentów DOM (elementów formularzy), a dokumentacja Reacta wyjaśnia różnicę:
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”.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 .
stateraczej przejmowana niż props?
props. Niekontrolowany składnik użyłby statedo wewnętrznej kontroli samej wartości. To jest kluczowa różnica.
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.
defaultValueprzez właściwości, ale który powiadamia kontroler onBlur?
<Button onClick={() => console.log("clicked")}>Click</Button>.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.