Componentes controlados y no controlados en React

1. Componentes controlados en React
2. Componentes no controlados en React

Los desarrolladores web utilizan marcos basados en JavaScript por muchas razones, principalmente porque nos permiten crear aplicaciones web interactivas para brindar la mejor experiencia de usuario posible.

Este artículo discutirá el concepto de componentes controlados en React y aconsejará cómo implementarlos y cuándo son necesarios.

La principal diferencia entre los dos tipos de componentes es cómo mantienen el estado y cómo accede a los valores en los campos de entrada.

Componentes controlados en React

Para este tipo de componente, las entradas del usuario siempre se almacenan en el estado y solo se actualizan mediante el método setState(). El atributo value del elemento <input> se establece en este valor de estado.

Esto asegura que el Estado sea la única fuente de verdad. Ingresar algo en el campo de entrada actualizará el valor del estado y el valor en el campo de entrada reflejará el estado más reciente.

En otras palabras, el campo de texto actualiza el estado y también obtiene su valor del estado.

Aquí hay un ejemplo de un componente controlado.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [input, setInput] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      ></input>
      <p>The text you entered:</p>
      <h1>{input}</h1>
    </div>
  );
}

Importamos el enlace useState() de la biblioteca central React en este ejemplo. Usamos el gancho para crear una variable de estado entrada y la función para actualizar su valor.

Inicializamos la variable de estado a una cadena vacía.

En JSX, tenemos un elemento <div> que contiene tres elementos: <input>, <p> y <h1>. Configuramos el elemento de entrada para que cada vez que el usuario ingrese o elimine algo, el controlador de eventos onChange actualizará el estado con el valor más reciente en el campo de entrada.

También establecemos el atributo valor para que el campo de entrada obtenga su valor del estado.

Finalmente, tenemos un elemento <h1>, que mostrará un texto de encabezado que representa la cadena en la variable de estado.

Mire esta demostración en vivo en CodeSandbox y vea cómo funciona todo.

Componentes no controlados en React

Los elementos de entrada en el DOM pueden mantener su estado. Para componentes no controlados, accedemos al valor directamente en el elemento DOM.

En React, usamos refs para acceder a los elementos de entrada. En este caso, usamos el ref.current.value para acceder al valor actual en el elemento de entrada.

Por lo tanto, deberá crear refs en React para tener componentes no controlados. Para eso, necesitará el gancho useRef() para componentes funcionales, o el método React.createRef() en componentes de clase.

De acuerdo con los documentos de React, su aplicación solo debe tener componentes controlados. Los componentes no controlados son impredecibles y difíciles de mantener.