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


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

Entiendo que React tipo de funciona como

Render (datos) ---> UI.

¿Cómo es esto diferente de Angular?


74
2017-12-29 22:11


origen


Respuestas:


Angular

Cuando angular establece la unión 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 test, luego actualiza a another en 1000ms. Cualquier cambio a $scope.name, ya sea desde el código del controlador o cambiando la entrada, se reflejará en el registro de la consola 4000ms más tarde. Cambios a la <input /> se reflejan en el $scope.name propiedad de forma automática, ya ng-model configura relojes la entrada y notifica $scope de los cambios Los cambios del código y los cambios del HTML son unión bidireccional. (Revisa 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 mediante el uso 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 componente en sí, lo que se hace adjuntando un onChange evento a la <input /> que establece this.state.value a 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 unidireccional. (Mira esto codepen)


108
2017-12-29 22:37



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

2 ways data binding VS 1 way data binding


130
2018-06-01 10:56



El enlace de datos bidireccional proporciona la capacidad de tomar el valor de una propiedad y mostrarla en la vista a la vez 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 de una manera solo vincula el valor del modelo a la vista y no tiene un observador adicional para determinar si el usuario ha cambiado el valor de la vista.

En cuanto a React.js, en realidad no fue diseñado para el enlace de datos bidireccional, sin embargo, todavía puede implementar el enlace bidireccional de forma manual agregando alguna lógica adicional, consulte por ejemplo este enlazar. En Angular.JS, el enlace bidireccional es un ciudadano de primera clase, por lo que no es necesario agregar esta lógica adicional.


8
2017-12-29 22:20