Cosa sono i componenti controllati da React e i componenti non controllati?

102

Cosa sono i componenti controllati e i componenti non controllati in ReactJS? In cosa differiscono l'uno dall'altro?

reactjs react-component

— Xin
fonte

Nomina per riaprire. In realtà è una domanda abbastanza precisa. Non sono sicuro di come possa essere considerato troppo ampio.

— Charlie Flowers,

127

Questo si riferisce ai componenti DOM stateful (elementi del modulo) e i documenti di React spiegano la differenza:

Un componente controllato è quello che prende il suo valore corrente propse notifica le modifiche tramite callback come onChange. Un componente genitore lo "controlla" gestendo il callback e gestendo il proprio stato e passando i nuovi valori come props al componente controllato. Potresti anche chiamarlo un "componente stupido".
Un componente non controllato è quello che memorizza il proprio stato internamente e si interroga il DOM utilizzando a refper trovare il suo valore corrente quando ne hai bisogno. Questo è un po 'più simile all'HTML tradizionale.

La maggior parte dei componenti del modulo React nativo supporta l'utilizzo sia controllato che non controllato:

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

Nella maggior parte (o in tutti) i casi è necessario utilizzare componenti controllati .

— Aaron Beall
fonte

Il valore non è preso attraverso statepiuttosto che props?

— Ivanka Todorova

@IvankaTodorova Per un componente controllato il valore viene passato attraverso props. Un componente non statecontrollato utilizzerebbe per controllare internamente il valore stesso. Questa è la differenza fondamentale.

— Aaron Beall

La differenza tra loro è che i componenti il cui valore è impostato / passato e hanno un callback sono chiamati controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) rispetto all'HTML tradizionale in cui un elemento di input gestisce il proprio valore e può essere letto tramite refscalled uncontrolled components( <value type="text" />). I componenti controllati gestiscono il proprio stato tramite setStateo lo ottengono dal componente genitore come oggetti di scena.

— Lior Elrom

Come chiameresti un componente che lo riceve defaultValueattraverso gli oggetti di scena, ma che notifica il controller onBlur?

— Paul Razvan Berg

@PaulRazvanBerg Sembra un anti-pattern, lo stato dovrebbe essere controllato in un unico posto . Di solito eleverai lo stato all'antenato comune più vicino.

— Aaron Beall

I componenti controllati notificano ad altri componenti le modifiche utilizzando i callback. Ad esempio: <Button onClick={() => console.log("clicked")}>Click</Button>.
I componenti non controllati non notificano ad altri componenti le loro modifiche e puoi accedere al componente solo usando ref-s. Ref potrebbe essere utile se devi accedere alla dominazione reale dell'elemento HTML

— shobe
fonte