Я немного не уверен в этих концепциях. Если я создам одно и то же приложение ToDo полностью на AngularJS и ReactJS --- что заставляет React ToDo использовать одностороннюю привязку данных по сравнению с двусторонней привязкой данных AngularJS?

Я понимаю, что React работает как

Рендеринг (данные) ---> UI.

Чем это отличается от Angular?

Угловой

Когда angular устанавливает привязку данных, существуют два "наблюдателя" (это упрощение)

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

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

Ввод начнется с test, затем anotherобновится до 1000 мсек. Любые изменения $scope.nameиз кода контроллера или изменения ввода будут отражены в журнале консоли спустя 4000 мсек. Изменения <input />в $scope.nameсвойстве отражаются в свойстве автоматически, поскольку ng-modelsetup отслеживает ввод и уведомляет $scopeоб изменениях. Изменения из кода и изменения из HTML являются двусторонними . (Посмотри на эту скрипку )

Реагировать

В React нет механизма, позволяющего HTML изменять компонент. HTML может вызывать только события, на которые реагирует компонент. Типичный пример - использование onChange.

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

Значению <input />управляется полностью с помощью renderфункции. Единственный способ обновить это значение - из самого компонента, что выполняется путем присоединения onChangeсобытия к объекту, <input />который устанавливается this.state.valueс помощью метода компонента React setState. <input />Не имеет прямой доступ к состоянию компонентов, и поэтому он не может вносить изменения. Это односторонняя привязка . (Посмотрите этот код )

Я сделал небольшой рисунок. Надеюсь, это достаточно ясно. Дайте мне знать, если это не так!

Двусторонняя привязка данных дает возможность принимать значение свойства и отображать его в представлении, а также имеет вход для автоматического обновления значения в модели. Вы можете, например, показать свойство «задача» в представлении и привязать значение текстового поля к тому же самому свойству. Итак, если пользователь обновляет значение текстового поля, представление будет автоматически обновляться, и значение этого параметра также будет обновлено в контроллере. Напротив, односторонняя привязка только связывает значение модели с представлением и не имеет дополнительного наблюдателя, чтобы определить, было ли значение в представлении изменено пользователем.

Что касается React.js, он на самом деле не был разработан для двусторонней привязки данных, однако вы все равно можете реализовать двустороннюю привязку вручную, добавив некоторую дополнительную логику, см., Например, эту ссылку . В Angular.JS двухсторонняя привязка - это первоклассный гражданин, поэтому нет необходимости добавлять эту дополнительную логику.