Bu kavramlar konusunda biraz belirsizim, eğer aynı ToDo uygulamasını tamamen AngularJS ve ReactJS'de oluşturursam - React ToDo'nun AngularJS'nin iki yönlü veri bağlamasına kıyasla tek yönlü veri bağlamayı kullanmasını sağlayan nedir?
React'in şu şekilde çalıştığını anlıyorum:
Oluştur (veri) -> UI.
Bunun Angular'dan farkı nedir?
Yanıtlar:
Açısal kurulumlar veri bağlayan iki "izleyici" mevcut olduğunda (bu bir basitleştirmedir)
//js
$scope.name = 'test';
$timeout(function() { $scope.name = 'another' }, 1000);
$timeout(function() { console.log($scope.name); }, 5000);
<!-- html --->
<input ng-model="name" />Giriş ile başlayacak test, ardından another1000 ms olarak güncellenecektir . $scope.nameDenetleyici kodundan veya girişi değiştirerek yapılan herhangi bir değişiklik , 4000 ms sonra konsol günlüğüne yansıtılacaktır. Değişiklikler <input />yansıtılır $scope.nameberi, otomatik özelliği ng-modelsetleri yukarı giriş ve bildirebilmesi saatler $scopedeğişikliklerin. Koddaki değişiklikler ve HTML'deki değişiklikler iki yönlü bağlamadır . ( Bu kemana bir bak )
React, HTML'nin bileşeni değiştirmesine izin veren bir mekanizmaya sahip değildir. HTML yalnızca bileşenin yanıt verdiği olayları oluşturabilir. Tipik bir örnek kullanmaktır onChange.
//js
render() {
return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
this.setState({value: e.target.value});
}Değerinin değeri tamamen işlev tarafından <input />kontrol edilir . Bu değeri güncellemenin tek yolu , React bileşen yöntemiyle ayarlanan bir olayın eklenmesiyle gerçekleştirilen bileşenin kendisidir . O değişiklik yapamazsınız böylece bileşenler devlete doğrudan erişime sahip olurlar ve gelmez. Bu tek yönlü bağlayıcıdır . (Bu kod parçasına göz atın )renderonChange<input />this.state.valuesetState<input />
onChangedinleyici ve koşmak handleChange. Ama çünkü en Tepki tek yönlü veri, oradan UI güncellemesi → veriler, bağlama yok otomatik olarak gerçekleşir.
Küçük bir çizim yaptım. Umarım yeterince açıktır. Değilse bana bildirin!
İki yönlü veri bağlama, bir mülkün değerini alma ve görünümde görüntüleme yeteneği sağlarken aynı zamanda modeldeki değeri otomatik olarak güncellemek için bir girişe sahip olur. Örneğin, görünümde "görev" özelliğini gösterebilir ve metin kutusu değerini aynı özelliğe bağlayabilirsiniz. Bu nedenle, kullanıcı metin kutusunun değerini güncellerse, görünüm otomatik olarak güncellenecek ve bu parametrenin değeri de denetleyicide güncellenecektir. Buna karşılık, tek yönlü bağlama, yalnızca modelin değerini görünüme bağlar ve görünümdeki değerin kullanıcı tarafından değiştirilip değiştirilmediğini belirleyen ek bir izleyiciye sahip değildir.
React.js ile ilgili olarak, gerçekten iki yönlü veri bağlama için tasarlanmamıştır, ancak yine de bazı ek mantık ekleyerek iki yönlü bağlamayı manuel olarak uygulayabilirsiniz, örneğin bu bağlantıya bakın . Angular.JS'de iki yönlü bağlama birinci sınıf bir vatandaştır, bu nedenle bu ek mantığı eklemeye gerek yoktur.