Estou um pouco confuso sobre esses conceitos, se eu construir o mesmo aplicativo ToDo completamente em AngularJS e ReactJS --- o que faz o React ToDo usar a vinculação de dados unilateral em vez da vinculação de dados bidirecional do AngularJS?

Eu entendo que o React funciona como

Render (dados) ---> UI.

Como isso é diferente do Angular?

Angular

Quando angular configura a ligação de dados, existem dois "observadores" (isto é uma simplificação)

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

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

A entrada começará com teste depois será atualizada anotherem 1000 ms. Quaisquer alterações $scope.name, seja do código do controlador ou alterando a entrada, serão refletidas no log do console 4000 ms depois. As alterações no <input />são refletidas na $scope.namepropriedade automaticamente, já que o ng-modelset up observa a entrada e notifica $scopeas alterações. As alterações no código e no HTML são vinculativas de duas vias . (Veja este violino )

Reagir

O React não possui um mecanismo para permitir que o HTML altere o componente. O HTML só pode gerar eventos aos quais o componente responde. O exemplo típico é usando onChange.

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

O valor de <input />é controlado inteiramente pela renderfunção. A única maneira de atualizar esse valor é a partir do próprio componente, o que é feito anexando um onChangeevento ao <input />qual é definido this.state.valuecom o método do componente React setState. O <input />não tem acesso direto ao estado dos componentes e, portanto, não pode fazer alterações. Esta é uma ligação unilateral . (Confira este código )

Fiz um pequeno desenho. Espero que esteja claro o suficiente. Me avise se não for!

A vinculação de dados bidirecional fornece a capacidade de pegar o valor de uma propriedade e exibi-lo na visualização, ao mesmo tempo em que tem uma entrada para atualizar automaticamente o valor no modelo. Você poderia, por exemplo, mostrar a propriedade "tarefa" na visualização e vincular o valor da caixa de texto a essa mesma propriedade. Portanto, se o usuário atualizar o valor da caixa de texto, a visualização será atualizada automaticamente e o valor deste parâmetro também será atualizado no controlador. Em contraste, a associação unilateral apenas vincula o valor do modelo à visualização e não tem um inspetor adicional para determinar se o valor na visualização foi alterado pelo usuário.

Com relação ao React.js, ele não foi realmente projetado para vinculação de dados bidirecional, no entanto, você ainda pode implementar a vinculação bidirecional manualmente adicionando alguma lógica adicional, consulte por exemplo este link . No Angular.JS, a vinculação bidirecional é um cidadão de primeira classe, portanto, não há necessidade de adicionar essa lógica.