Я трохи нечіткий щодо цих концепцій, якщо я будую той самий додаток ToDo повністю в AngularJS та ReactJS --- що змушує React ToDo використовувати одностороннє прив'язування даних до двостороннього прив'язування даних AngularJS?
Я розумію, що подібні роботи реагують
Візуалізація (дані) ---> інтерфейс користувача
Чим це відрізняється від кутового?
Відповіді:
Коли кутовий параметр встановлює прив'язку даних, існують два "спостерігачі" (це спрощення)
//js
$scope.name = 'test';
$timeout(function() { $scope.name = 'another' }, 1000);
$timeout(function() { console.log($scope.name); }, 5000);
<!-- html --->
<input ng-model="name" />Вхід розпочнеться з test, потім оновиться до another1000мс. Будь-які зміни $scope.name, або з коду контролера, або шляхом зміни входу, будуть відображені в журналі консолі 4000 мс пізніше. Зміни на значення <input />відображаються у $scope.nameвластивості автоматично, оскільки ng-modelналаштування спостерігає за введенням та повідомляє $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 />Не має прямий доступ до стану компонентів, і тому він не може вносити зміни. Це одностороння прив'язка . (Ознайомтеся з цим кодовим кодом )
onChangeслухача і запустити handleChange. Але звідти, з - за даними в одну боку реактив прив'язки, дані → оновлення призначеного для користувача інтерфейсу робить автоматично.
Я зробив невеликий малюнок. Я сподіваюся, що це досить зрозуміло. Дайте мені знати, якщо це не так!
Двостороння прив'язка даних забезпечує можливість приймати значення властивості та відображати його на поданні, одночасно маючи вхід для автоматичного оновлення значення в моделі. Наприклад, ви можете показати "завдання" властивості у поданні та прив'язати значення текстового поля до тієї самої властивості. Отже, якщо користувач оновить значення текстового поля, перегляд автоматично оновиться, а значення цього параметра також оновиться в контролері. На противагу цьому, один спосіб прив'язки лише прив'язує значення моделі до подання і не має додаткового спостерігача, щоб визначити, чи змінено значення в представленні користувачем.
Що стосується React.js, він насправді не був розроблений для двостороннього прив'язки даних, однак ви все одно можете реалізувати двостороннє прив'язування вручну, додавши додаткову логіку, див., Наприклад, це посилання . У Angular.JS двостороння прив'язка є першокласним громадянином, тому немає необхідності додавати цю додаткову логіку.