Enlace de datos unidireccional en React

1. Enlace de datos unidireccional en React
2. Enlace de datos unidireccional frente a enlace de datos bidireccional en React

Actualmente, los desarrolladores front-end tienen tres opciones para crear aplicaciones web: marcos JavaScript React, Vue y Angular. Estos marcos comparten muchas similitudes, pero también son diferentes en aspectos importantes.

En este artículo, discutiremos el enlace de datos unidireccional en React. Esta es una de las características distintivas de la biblioteca React, que influye en la estructura y funcionalidad de las aplicaciones web React.

Enlace de datos unidireccional en React

A diferencia de otros marcos de JavaScript, React no tiene una función para vincular el valor del elemento de entrada DOM con una variable de estado. Introducir nuevos caracteres en el elemento no actualiza automáticamente la variable de estado.

La estructura de los componentes de React generalmente está escrita en JSX, que tiene una sintaxis similar a HTML con características dinámicas adicionales.

Para actualizar el estado en respuesta a las acciones del usuario, debe definir un controlador de eventos y configurar el atributo para ejecutar el controlador de eventos en respuesta a las acciones del usuario.

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <h2>{value}</h2>
    </div>
  );
}

En este ejemplo, las acciones del usuario desencadenan el controlador de eventos onChange, que actualiza la variable de estado. Luego puede mostrar este valor como una etiqueta <h2>.

Enlace de datos unidireccional frente a enlace de datos bidireccional en React

Comparación de React, Angular y Vue, que tienen enlace de datos bidireccional.

Puede pensar en el enlace bidireccional como la configuración de una conexión bidireccional entre una entrada (elemento DOM) y los datos para que cada vez que uno se actualice, otro también se actualice.

Por ejemplo, en Vue, puede vincular un valor del elemento de entrada a un valor de estado. Cambiarlo también cambiará el valor en el elemento de entrada.

Además, ingresar más caracteres en el elemento de entrada cambiará el valor del estado.

En React, no hay forma de establecer una relación directa entre el valor del elemento DOM de entrada y el estado. Puede configurar controladores de eventos para actualizar el estado siempre que detecte una nueva entrada del usuario.

Por lo general, cambiar el estado no cambia el valor en el elemento <Input>.

Veamos este ejemplo.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <h2>{value}</h2>
      <button onClick={() => setValue(value.concat(value))}>
        Double the Text
      </button>
    </div>
  );
}

Aquí tenemos un elemento <input> cuyo valor interno no está vinculado a una variable de estado. Sin embargo, cada vez que el usuario ingresa un carácter, React ejecuta los controladores de eventos y establece la variable de estado valor igual a la entrada del usuario.

Esto se demuestra cuando mostramos la variable de estado como el encabezado <h2>.

También tenemos un botón llamado Duplicar el texto. Al hacer clic en este botón se ejecuta otra función, que actualiza la variable de estado al agregarla.

Vaya a esta demostración de CodeSandbox para comprender mejor el código. Cuando usa el botón para cambiar el valor de estado, no afecta el elemento de entrada.

La razón es que React no tiene enlace de datos bidireccional entre el elemento de entrada y la variable de estado.