Sono un po 'confuso su questi concetti, se costruisco la stessa app ToDo completamente in AngularJS e ReactJS --- cosa fa sì che React ToDo usi l'associazione dati unidirezionale rispetto all'associazione dati bidirezionale di AngularJS?

Capisco che React funzioni come

Rendering (dati) ---> UI.

In che modo è diverso da Angular?

Angolare

Quando angolare imposta l'associazione dati esistono due "osservatori" (questa è una semplificazione)

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

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

L'ingresso inizierà con test, quindi si aggiornerà a another1000 ms. Eventuali modifiche a $scope.name, dal codice del controller o modificando l'input, verranno riflesse nel registro della console 4000 ms più tardi. Le modifiche a <input />si riflettono $scope.nameautomaticamente nella proprietà, poiché la ng-modelconfigurazione controlla l'input e notifica $scopele modifiche. Le modifiche dal codice e le modifiche dall'HTML sono vincolanti a due vie . (Guarda questo violino )

Reagire

React non ha un meccanismo per consentire all'HTML di cambiare il componente. L'HTML può generare solo eventi a cui il componente risponde. L'esempio tipico è usare onChange.

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

Il valore di <input />è controllato interamente dalla renderfunzione. L'unico modo per aggiornare questo valore è dal componente stesso, che viene fatto allegando un onChangeevento al <input />quale viene impostato this.state.valuecon il metodo del componente React setState. Il <input />non ha accesso diretto allo stato dei componenti e quindi non può apportare modifiche. Questo è unidirezionale . ( Dai un'occhiata a questo codepen )

Ho fatto un piccolo disegno. Spero sia abbastanza chiaro. Fammi sapere se non lo è!

Il data binding bidirezionale offre la possibilità di prendere il valore di una proprietà e visualizzarlo nella vista, avendo anche un input per aggiornare automaticamente il valore nel modello. È possibile, ad esempio, mostrare la proprietà "task" sulla vista e associare il valore della casella di testo a quella stessa proprietà. Quindi, se l'utente aggiorna il valore della casella di testo, la vista si aggiornerà automaticamente e anche il valore di questo parametro verrà aggiornato nel controller. Al contrario, l'associazione unidirezionale lega solo il valore del modello alla vista e non dispone di un watcher aggiuntivo per determinare se il valore nella vista è stato modificato dall'utente.

Per quanto riguarda React.js, non è stato realmente progettato per il data binding a due vie, tuttavia, puoi comunque implementare manualmente il binding a due vie aggiungendo una logica aggiuntiva, vedi ad esempio questo link . In Angular.JS l'associazione a due vie è un cittadino di prima classe, quindi non è necessario aggiungere questa logica aggiuntiva.