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?

Kątowy

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 )

Reagować

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 )

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.