O que são componentes controlados e componentes não controlados React?

102

O que são componentes controlados e componentes não controlados no ReactJS? Como eles diferem um do outro?

reactjs react-component

— Xin
fonte

Indicando para reabrir. Na verdade, é uma pergunta bastante precisa. Não sei como pode ser considerado muito amplo.

— Charlie Flowers

127

Isso está relacionado aos componentes DOM com estado (elementos do formulário) e os documentos do React explicam a diferença:

Um componente controlado é aquele que obtém seu valor atual propse notifica as alterações por meio de retornos de chamada como onChange. Um componente pai o "controla" manipulando o retorno de chamada e gerenciando seu próprio estado e passando os novos valores como acessórios para o componente controlado. Você também pode chamar isso de "componente burro".
Um componente não controlado é aquele que armazena seu próprio estado internamente, e você consulta o DOM usando um refpara encontrar seu valor atual quando necessário. É um pouco mais parecido com o HTML tradicional.

A maioria dos componentes do formulário React nativos suportam o uso controlado e não controlado:

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

Na maioria (ou em todos) os casos, você deve usar componentes controlados .

— Aaron Beall
fonte

O valor não é levado adiante em statevez de props?

— Ivanka Todorova,

@IvankaTodorova Para um componente controlado, o valor é transmitido props. Um componente não controlado seria usado statepara controlar o próprio valor internamente. Esta é a principal diferença.

— Aaron Beall

A diferença entre eles é que os componentes cujo valor é definido / passado e têm um retorno de chamada são chamados controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) em comparação com o HTML tradicional, onde um elemento de entrada manipula seu próprio valor e pode ser lido por meio de refscalled uncontrolled components( <value type="text" />). Os componentes controlados estão gerenciando seu próprio estado por meio setStateou obtendo-o de seu componente pai como suporte.

— Lior Elrom de

Como você chamaria um componente que passa defaultValuepor adereços, mas que notifica o controlador onBlur?

— Paul Razvan Berg

@PaulRazvanBerg Isso soa como um anti-padrão, o estado deve ser controlado em um único lugar . Normalmente, você elevará o estado ao ancestral comum mais próximo.

— Aaron Beall

Os componentes controlados notificam outros componentes sobre mudanças usando callbacks. Por exemplo: <Button onClick={() => console.log("clicked")}>Click</Button>.
Componentes não controlados não notificam outros componentes sobre suas mudanças e você pode acessar o componente apenas usando ref-s. Ref pode ser útil se você precisar acessar o real dom do elemento HTML

— shobe
fonte