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?

Angular

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 )

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 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 )

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.