Может ли кто-нибудь объяснить разницу между односторонней привязкой данных Reacts и двусторонней привязкой данных Angular

109

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

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

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

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

javascript angularjs reactjs

— WinchenzoMagnifico
источник

Ответы:

165

Угловой

Когда 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 />Не имеет прямой доступ к состоянию компонентов, и поэтому он не может вносить изменения. Это односторонняя привязка . (Посмотрите этот код )

— Kyeotic
источник

Спасибо, это было очень информативно. Итак, я полагаю, что Angular больше похож на UI <----> Data, в отличие от React Render (data) ---> UI?

— WinchenzoMagnifico

Да, это очень лаконично выразиться

— Kyeotic

Чтобы быть ясным, отличительной чертой привязки данных является то, что она выполняет обновления автоматически . В примере с React UI → данные все еще выполняются, просто этого не происходит по умолчанию - вам нужно вручную настроить onChangeпрослушиватель и запустить handleChange. Но оттуда, из - за данными в одну стороны РЕАКТА привязки, данные → обновление пользовательского интерфейса делает автоматически.

— Адам Зернер

К вашему сведению, скрипке нужна была ссылка на AngularJS 1.1.1, я предполагаю, что ссылка на AngularJS 1.0.1 больше не действительна, получал 404. Как ни странно, использование идентичного кода в новой скрипке (со ссылкой на 1.1.1) не работает , не знаю, о чем это.

— Джош Саттерфилд,

194

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

— Габриэль
источник

Что такое Titre de l'annonce?

— ghd

«Заголовок объявления» на французском языке

— timelf123

@DamienRoche, насколько я понимаю эту концепцию, разница в следующем: двухсторонняя привязка данных: изменение данных меняет представление и наоборот - обновление ввода внутри представления обновляет данные. В пути поток данных: обновление данных обновляет представление, но обновление ввода в представлении не будет обновлять данные, если программист не сделает это явно, подключив прослушиватель к вводу, который обновит данные. Надеюсь, это прояснит вам ситуацию.

— Cake_Seller

Спасибо, @Patrick за ваше сообщение. Я всегда очень рад чувствовать, что то, что я сделал, полезно для других

— Габриэль

ссылка не работает @Gabriel не могли бы вы поделиться изображением в сообщении?

— user3141326 02

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

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

— Alex
источник