¿Qué son los componentes controlados por React y los componentes no controlados?

101

¿Qué son los componentes controlados y los componentes no controlados en ReactJS? ¿En qué se diferencian entre sí?

reactjs react-component Xin
fuente
21
Nominación para reabrir. En realidad, es una pregunta bastante precisa. No estoy seguro de cómo puede considerarse demasiado amplio.
Charlie Flowers

Respuestas:

127

Esto se relaciona con los componentes DOM con estado (elementos de formulario) y los documentos de React explican la diferencia:

  • Un componente controlado es aquel que toma su valor actual propsy notifica cambios a través de devoluciones de llamada como onChange. Un componente principal lo "controla" manejando la devolución de llamada y administrando su propio estado y pasando los nuevos valores como accesorios al componente controlado. También podría llamar a esto un "componente tonto".
  • Un componente no controlado es uno que almacena su propio estado internamente y usted consulta el DOM usando un refpara encontrar su valor actual cuando lo necesita. Es un poco más parecido al HTML tradicional.

La mayoría de los componentes nativos de la forma React admiten el uso controlado y no 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>

En la mayoría (o en todos) de los casos , debe utilizar componentes controlados .

Aaron Beall
fuente
1
¿No se toma el valor en statelugar de props?
Ivanka Todorova
9
@IvankaTodorova Para un componente controlado, el valor se transfiere props. Un componente no controlado se usaría statepara controlar el valor en sí mismo internamente. Ésta es la diferencia clave.
Aaron Beall
1
La diferencia entre ellos es que los componentes cuyo valor se establece / pasa y tienen una devolución de llamada se llaman controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) frente al HTML tradicional, donde un elemento de entrada maneja su propio valor y se puede leer a través de refsllamado uncontrolled components( <value type="text" />). Los componentes controlados gestionan su propio estado a través setStatede su componente principal o lo obtienen de él como accesorios.
Lior Elrom
¿Cómo llamaría a un componente que pasa defaultValuepor accesorios, pero que notifica al controlador onBlur?
Paul Razvan Berg
@PaulRazvanBerg Eso suena como un anti-patrón, el estado debe controlarse en un solo lugar . Por lo general, elevará el estado al antepasado común más cercano.
Aaron Beall
1
  • Los componentes controlados notifican a otros componentes sobre cambios mediante devoluciones de llamada. Por ejemplo: <Button onClick={() => console.log("clicked")}>Click</Button>.
  • Los componentes no controlados no notifican a otros componentes sobre sus cambios y solo puede acceder al componente utilizando ref-s. Ref puede ser útil si necesita acceder al dominio real del elemento HTML
shobe
fuente