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 enlace de datos unidireccional frente al enlace de datos bidireccional de AngularJS?
Entiendo que React funciona como
Render (datos) ---> UI.
¿En qué se diferencia de Angular?
Respuestas:
Cuando las configuraciones angulares de databinding 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 testy luego se actualizará anotheren 1000ms. Cualquier cambio $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. Los cambios <input />en la $scope.namepropiedad se reflejan automáticamente en la propiedad, ya ng-modelque la configuración vigila la entrada y notifica $scopelos cambios. Los cambios del código y los cambios del HTML son vinculantes bidireccionales . (Mira este violín )
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 el uso de onChange.
//js
render() {
return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
this.setState({value: e.target.value});
}
El valor de <input />está controlado completamente por la renderfunción. La única forma de actualizar este valor es desde el componente en sí, que se realiza adjuntando un onChangeevento al <input />que establece this.state.valuecon el método del componente React setState. El <input />no tiene acceso directo al estado de los componentes, por lo que no puede hacer cambios. Esta es una unión unidireccional . (Mira este codepen )
onChangeoyente y de ejecución handleChange. Pero a partir de ahí, debido a los datos de una manera vinculante Reaccionar, los datos → actualización de la interfaz hace suceden de forma automática.
Hice un pequeño dibujo. Espero que esté lo suficientemente claro. ¡Avísame si no es así!
El enlace de datos bidireccional brinda la capacidad de tomar el valor de una propiedad y mostrarlo en la vista al tiempo que tiene una entrada para actualizar automáticamente el valor en el modelo. Por ejemplo, podría 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, la vinculación 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 algo de lógica adicional, consulte, por ejemplo, este enlace . En Angular.JS, el enlace bidireccional es un ciudadano de primera clase, por lo que no es necesario agregar esta lógica adicional.