Cuéntenos las diferencias entre componentes controlados e no controlados en React.

Los componentes controlados gestionan su estado a través de useState (o this.state en clases) y reciben datos y funciones de devolución de llamada a través de props. El estado del formulario, por ejemplo, se almacena en el estado de React y se actualiza mediante manejadores onChange.

Los componentes no controlados almacenan su estado dentro del DOM. Para acceder a su valor, se usa useRef (o React.createRef en clases) para obtener una referencia al elemento DOM. El valor de los elementos del formulario, por ejemplo, se extrae directamente del DOM al enviar.

Característica	Componente controlado	Componente no controlado
Gestión del estado	Estado de React (useState)	DOM
Acceso al valor	A través de estado y props	A través de Refs (useRef)
Actualización	Reactiva, en cada cambio	Solo en acción explícita (por ejemplo, enviar)
Validación	En la lógica de React	A través de API HTML estándar o manualmente después de obtener el valor

Ejemplo de componente controlado:

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

Ejemplo de componente no controlado:

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    alert('Valor del input: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Obtener valor</button>
    </>
  );
}

La elección entre ellos depende de la complejidad de la lógica y la necesidad de reacción instantánea a los cambios de entrada. Los componentes controlados son preferibles para formularios complejos y validación en tiempo real. Los no controlados son adecuados para formularios simples o para integración con bibliotecas DOM de terceros.