Jestem trochę niejasny w tych koncepcjach, jeśli zbuduję tę samą aplikację ToDo całkowicie w AngularJS i ReactJS - co sprawia, że React ToDo używa jednokierunkowego wiązania danych w porównaniu z dwukierunkowym wiązaniem danych AngularJS?
Rozumiem, że tak działa React
Renderuj (dane) ---> UI.
Czym to się różni od Angulara?
Odpowiedzi:
Gdy angular ustawia wiązanie danych, istnieją dwa „obserwatory” (jest to uproszczenie)
//js
$scope.name = 'test';
$timeout(function() { $scope.name = 'another' }, 1000);
$timeout(function() { console.log($scope.name); }, 5000);
<!-- html --->
<input ng-model="name" />Dane wejściowe będą rozpoczynać się od test, a następnie aktualizować za another1000 ms. Wszelkie zmiany wprowadzone w $scope.namekodzie kontrolera lub w wyniku zmiany danych wejściowych zostaną odzwierciedlone w dzienniku konsoli 4000 ms później. Zmiany wprowadzone <input />we $scope.namewłaściwości są automatycznie odzwierciedlane we właściwości, ponieważ ng-modelkonfigurator śledzi dane wejściowe i powiadamia $scopeo zmianach. Zmiany w kodzie i zmiany w kodzie HTML są dwustronne . (Sprawdź to skrzypce )
React nie posiada mechanizmu, który pozwalałby HTML na zmianę komponentu. Kod HTML może zgłaszać tylko zdarzenia, na które odpowiada składnik. Typowym przykładem jest użycie onChange.
//js
render() {
return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
this.setState({value: e.target.value});
}Wartość <input />jest kontrolowana całkowicie przez renderfunkcję. Jedynym sposobem zaktualizowania tej wartości jest sam komponent, co jest realizowane poprzez dołączenie onChangezdarzenia do <input />atrybutu which this.state.valueprzy użyciu metody komponentu React setState. <input />Nie ma bezpośredniego dostępu do stanu komponentów, a więc nie może dokonać zmian. To jest jednostronne wiązanie . (Sprawdź ten kod )
onChangenasłuchiwanie i uruchomić handleChange. Ale stamtąd, z powodu jednokierunkowego wiązania danych Reacta, aktualizacja danych → interfejsu użytkownika odbywa się automatycznie.
Zrobiłem mały rysunek. Mam nadzieję, że jest to wystarczająco jasne. Daj mi znać, jeśli tak nie jest!
Dwukierunkowe powiązanie danych umożliwia pobranie wartości właściwości i wyświetlenie jej w widoku, mając jednocześnie dane wejściowe umożliwiające automatyczne aktualizowanie wartości w modelu. Możesz na przykład pokazać właściwość „zadanie” w widoku i powiązać wartość pola tekstowego z tą samą właściwością. Jeśli więc użytkownik zaktualizuje wartość pola tekstowego, widok zostanie automatycznie zaktualizowany, a wartość tego parametru również zostanie zaktualizowana w kontrolerze. W przeciwieństwie do tego, jednokierunkowe powiązanie wiąże tylko wartość modelu z widokiem i nie ma dodatkowego obserwatora do określenia, czy wartość w widoku została zmieniona przez użytkownika.
Jeśli chodzi o React.js, nie został on tak naprawdę zaprojektowany do dwukierunkowego wiązania danych, jednak nadal można zaimplementować dwukierunkowe wiązanie ręcznie, dodając dodatkową logikę, zobacz na przykład ten link . W Angular.JS dwukierunkowe wiązanie jest obywatelem pierwszej klasy, więc nie ma potrzeby dodawania tej dodatkowej logiki.