¿Alguien puede explicar la diferencia entre el enlace de datos unidireccional de Reacts y el enlace de datos bidireccional de Angular?

8 minutos de lectura

Estoy un poco confuso con estos conceptos. Si construyo la misma aplicación ToDo completamente en AngularJS y ReactJS, ¿qué hace que React ToDo use el enlace de datos unidireccional frente al enlace de datos bidireccional de AngularJS?

Entiendo que React funciona como

Procesar (datos) —> IU.

¿En qué se diferencia esto de Angular?

Hice un pequeño dibujo. Espero que sea lo suficientemente claro. ¡Avísame si no es así!

Enlace de datos de 2 vías VS enlace de datos de 1 vía

  • ¿Qué es ‘Titre de l’annonce’?

    – ghd

    12 dic 2016 a las 17:21

  • ‘título del anuncio’ en francés

    – timelf123

    14 de diciembre de 2016 a las 15:57

  • @DamienRoche, hasta donde entiendo este concepto, la diferencia es la siguiente: enlace de datos bidireccional: cambiar la vista de cambios de datos y viceversa: actualizar la entrada dentro de la vista actualiza los datos. En el flujo de datos: la actualización de la vista de actualizaciones de datos, pero la actualización de la entrada en la vista no actualizará los datos a menos que el programador lo haga explícitamente al adjuntar el oyente a la entrada que actualizará los datos. Espero que te quede un poco más claro.

    – Cake_Seller

    19/06/2017 a las 13:00

  • Gracias, @Patrick por tu mensaje. Siempre estoy muy feliz de sentir que algo que hice es útil para los demás.

    – gabriel

    14 de febrero de 2018 a las 15:19

  • el enlace está roto @Gabriel, ¿podrías compartir la imagen en la publicación?

    – usuario3141326

    2 de agosto de 2018 a las 15:05


avatar de usuario
kyeótico

Angular

Cuando angular configura el enlace de datos, existen dos “observadores” (esto es una simplificación)

//js
$scope.name="test";
$timeout(function()  { $scope.name="another" }, 1000);
$timeout(function()  { console.log($scope.name); }, 5000);

<!-- html --->
<input ng-model="name" />

La entrada comenzará con testluego actualice a another en 1000 ms. Cualquier cambio en $scope.name, ya sea desde el código del controlador o cambiando la entrada, se reflejará en el registro de la consola 4000 ms después. Cambios en el <input /> se reflejan en el $scope.name propiedad automáticamente, ya que ng-model configura vigila la entrada y notifica $scope de los cambios Los cambios del código y los cambios del HTML son unión bidireccional. (Verificar este violín)

Reaccionar

React no tiene un mecanismo para permitir que el HTML cambie el componente. El HTML solo puede generar eventos a los que responde el componente. El ejemplo típico es usando onChange.

//js
render() { 
    return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
    this.setState({value: e.target.value});
}

el valor de la <input /> está controlada enteramente por el render función. La única forma de actualizar este valor es desde el propio componente, lo que se hace adjuntando un onChange evento a la <input /> que establece this.state.value con el método del componente React setState. los <input /> no tiene acceso directo al estado de los componentes, por lo que no puede realizar cambios. Esto es unión unidireccional. (Mira esto códec)

  • Gracias, esto fue extremadamente informativo. Entonces, supongo que Angular funciona más como UI Data en contraste con Render(data)—>UI de React.

    – Winchenzo Magnífico

    29 de diciembre de 2015 a las 23:08

  • Sí, esa es una manera muy concisa de decirlo.

    – kyeótica

    29 de diciembre de 2015 a las 23:18

  • Para ser claros, lo que distingue al enlace de datos es que hace las actualizaciones por usted. automáticamente. En el ejemplo de React, UI → datos todavía están sucediendo, es solo que no sucede de manera predeterminada: tiene que configurar manualmente el onChange escucha y corre handleChange. Pero a partir de ahí, debido al enlace de datos unidireccional de React, los datos → actualización de la interfaz de usuario lo hace suceder automáticamente.

    – Adam Zerner

    3 de julio de 2017 a las 23:35


  • FYI, el violín necesitaba una referencia a AngularJS 1.1.1, supongo que la referencia a AngularJS 1.0.1 ya no era válida, estaba obteniendo un 404. Curiosamente, el uso de un código idéntico en un violín nuevo (con una referencia 1.1.1) falla , no se de que se trata.

    –Josh Sutterfield

    3 de enero de 2020 a las 4:26


avatar de usuario
Alex

El enlace de datos bidireccional brinda la capacidad de tomar el valor de una propiedad y mostrarlo en la vista al mismo tiempo que tiene una entrada para actualizar automáticamente el valor en el modelo. Podría, por ejemplo, mostrar la propiedad “tarea” en la vista y vincular el valor del cuadro de texto a esa misma propiedad. Entonces, si el usuario actualiza el valor del cuadro de texto, la vista se actualizará automáticamente y el valor de este parámetro también se actualizará en el controlador. Por el contrario, el enlace unidireccional solo vincula el valor del modelo a la vista y no tiene un observador adicional para determinar si el usuario ha cambiado el valor en la vista.

Con respecto a React.js, en realidad no fue diseñado para el enlace de datos bidireccional, sin embargo, aún puede implementar el enlace bidireccional manualmente agregando alguna lógica adicional, consulte, por ejemplo, esto Enlace. En Angular.JS, el enlace bidireccional es un ciudadano de primera clase, por lo que no es necesario agregar esta lógica adicional.

¿Qué es el enlace de datos?

el enlace de datos es una técnica general que une las fuentes de datos del proveedor y el consumidor y las sincroniza.

Oferta de datos en Angular

de acuerdo a Documentos de AngularJs, El enlace de datos en aplicaciones AngularJS es la sincronización automática de datos entre el modelo y los componentes de vista. La vista es una proyección del modelo en todo momento. Cuando el modelo cambia, la vista refleja el cambio y viceversa.

ingrese la descripción de la imagen aquí

la plantilla (que es el HTML sin compilar junto con cualquier marcado o directiva adicional) se compila en el navegador. El paso de compilación produce una vista en vivo. Cualquier cambio en la vista se refleja inmediatamente en el modelo y cualquier cambio en el modelo se propaga a la vista.

Enlace de datos en ReactJs

La conexión entre los datos que se mostrarán en la vista y la lógica del componente se denomina enlace de datos en ReactJS. ReactJS utiliza el enlace de datos unidireccional. En el enlace de datos unidireccional se puede seguir una de las siguientes condiciones:

  • Componente para ver: Cualquier cambio en los datos del componente se reflejaría en la vista.
  • Ver al componente: Cualquier cambio en View se reflejaría en los datos del componente.

ingrese la descripción de la imagen aquí

Lee mas aquí y aquí.

Si bien React no proporciona enlaces de datos bidireccionales listos para usar, hay muchos casos de uso para los que parecen ser el mecanismo de administración de estado natural con el que trabajar, especialmente cuando se trabaja en aplicaciones complejas de una sola página o React Native o con muchos datos, transformaciones y lógica coordinados asincrónicamente.

enlaces de reacción agrega soporte de enlaces bidireccionales convenientes y herramientas para React / React Native y reaccionar-esperables se basa en él con soporte asíncrono adicional. Estos paquetes, especialmente utilizados en combinación con ganchos y contextos de React, significan no tener que elegir estrictamente entre modelos unidireccionales y bidireccionales solo por trabajar con React vs Angular.

El enlace de datos unidireccional es muy simple, excepto en Reaccionar rara vez usamos la palabra enlace para referirnos a cómo fluyen los datos.

  const fn = (a) => { return ... }

Si se proporciona un valor como a, usaremos ese valor en el alcance de la función. Lo anterior es la programación 101.

  <Title name={"Hello"} />

La línea anterior no significa que algo sucedería mágicamente aparte del hecho de que “Hola” se envía a la función Título y establece un apoyo en “Hola”, si insiste en usar la palabra vincular aquí, ahí es donde ocurre la vinculación.

Ya sea que desee usar este accesorio para mostrar o conectar con otro estado o lo que sea, ¡tiene que codificarlo usted mismo! No hay otra magia. Por cierto, esto se llama props en Reaccionar. Y props es más o menos el argumento de entrada de una función codificado en un formato de objeto. Así que la definición más precisa de este “atadura” en Reaccionar debería llamarse asignación. En Reaccionar código fuente, verá algo muy rápidamente después de crear el elemento.

  element.props = { name: "Hello" }

Y créalo o no, no hay otro código en Reaccionar que tiene algo que ver con este “atadura” más adelante.

Ejemplo

Utilice el ejemplo de entrada,

<input value={value} onChange={onChange} />

si le damos un value a input, la entrada recogería el valor para mostrarlo. Si cambia el valor, tiene la intención de cambiar la visualización.

¿Por qué el value ¿cambio? No puede por defecto. Tienes que cambiarlo escuchando un evento del sistema como onChange o alguna lógica de negocios como setTimeout o de cualquier forma que puedas imaginar. Pero el cambio es una acción, usted realiza la acción, por lo tanto, puede manejar la acción cambiando el valor. Supongo que aquí es de donde viene el “sentido único”. Esencialmente, nada es gratis.

Confusión

Lo que nos confunde es que DOM elemento tiene su propio estado o propiedades. Por ejemplo, podemos hacer el.textContent="abc" sin uso Reaccionar.

<input />

Si solo codificamos así, todavía vemos que el valor en la pantalla cambia después de escribir cualquier cosa. Pero este comportamiento no tiene nada que ver con Reaccionares el DOM funcionalidades de los elementos. Reaccionar se refiere a la primera versión como elemento controlado. Esencialmente Reaccionar sobrescribe el DOM camino.

NOTA

Para ser honesto, solo después de que dejé de usar la palabra “vinculante” para estos casos, comencé a entender lo que son. Pero eso podría ser sólo yo.

¿Ha sido útil esta solución?