javascript - react - ¿Alguien puede explicar la diferencia entre el enlace de datos unidireccional Reacciona y el enlace de datos bidireccional de Angular
react vue (3)
Estoy un poco confuso con estos conceptos, si construyo la misma aplicación ToDo por completo 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
Render (datos) ---> UI.
¿Cómo es esto diferente de Angular?
Angular
Cuando angular establece la vinculació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 la
test
, luego se actualizará 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 4000ms más tarde.
Los cambios en
<input />
se reflejan en la propiedad
$scope.name
automáticamente, ya
ng-model
configuración
ng-model
vigila la entrada y notifica a
$scope
de los cambios.
Los cambios del código y los cambios del HTML son
enlaces 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 usando
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 función
render
.
La única forma de actualizar este valor es desde el componente en sí, lo que se hace adjuntando un evento
onChange
a
<input />
que establece
this.state.value
con el método de componente React
setState
.
<input />
no tiene acceso directo al estado de los componentes, por lo que no puede realizar cambios.
Este es
un enlace unidireccional
.
(Mira este
codepen
)
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 de 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 link . En Angular.JS, el enlace bidireccional es un ciudadano de primera clase, por lo que no es necesario agregar esta lógica adicional.
