Adakah yang bisa menjelaskan perbedaan antara pengikatan data satu arah Reacts dan pengikatan data dua arah Angular

109

Saya agak bingung dengan konsep ini, Jika saya membuat aplikasi ToDo yang sama sepenuhnya di AngularJS dan ReactJS --- apa yang membuat React ToDo menggunakan pengikatan data satu arah vs pengikatan data dua arah AngularJS?

Saya mengerti bahwa React bekerja seperti

Render (data) ---> UI.

Apa bedanya dengan Angular?

javascript angularjs reactjs WinchenzoMagnifico
sumber

Jawaban:

165

Angular

Ketika angular mengatur penyatuan data dua "pengamat" ada (ini adalah penyederhanaan)

//js
$scope.name = 'test';
$timeout(function()  { $scope.name = 'another' }, 1000);
$timeout(function()  { console.log($scope.name); }, 5000);

<!-- html --->
<input ng-model="name" />

Masukan akan dimulai dengan test, kemudian diperbarui menjadi anotherdalam 1000ms. Setiap perubahan ke $scope.name, baik dari kode pengontrol atau dengan mengubah input, akan tercermin dalam log konsol 4000ms nanti. Perubahan ke <input />tercermin dalam $scope.nameproperti secara otomatis, karena ng-modelmengatur jam tangan masukan dan pemberitahuan $scopetentang perubahan. Perubahan dari kode dan perubahan dari HTML mengikat dua arah . (Lihat biola ini )

Reaksi

React tidak memiliki mekanisme untuk mengizinkan HTML mengubah komponen. HTML hanya dapat memunculkan event yang direspon oleh komponen. Contoh tipikal adalah dengan menggunakan onChange.

//js
render() { 
    return <input value={this.state.value} onChange={this.handleChange} />
}
handleChange(e) {
    this.setState({value: e.target.value});
}

Nilai seluruhnya<input /> dikontrol oleh fungsinya. Satu-satunya cara untuk memperbarui nilai ini adalah dari komponen itu sendiri, yang dilakukan dengan melampirkan acara ke set dengan metode komponen React . Tidak memiliki akses langsung ke status komponen, sehingga tidak dapat membuat perubahan. Ini mengikat satu arah . (Lihat codepen ini )renderonChange<input />this.state.valuesetState<input />

Kyeotic
sumber
9
Terima kasih, ini sangat informatif. Jadi saya kira Angular bekerja lebih seperti UI <----> Data berbeda dengan React's Render (data) ---> UI?
WinchenzoMagnifico
Ya, itu adalah cara yang sangat ringkas untuk mengatakannya
Kyeotic
5
Untuk lebih jelasnya, hal yang membedakan tentang pengikatan data adalah bahwa ia melakukan pembaruan untuk Anda secara otomatis . Pada contoh React, UI → data masih terjadi, hanya saja itu tidak terjadi secara default - Anda harus mengatur onChangelistener dan menjalankannya secara manual handleChange. Tapi dari sana, karena Bereaksi ini data yang salah satu cara mengikat, data → pembaruan UI tidak terjadi secara otomatis.
Adam Zerner
FYI biola membutuhkan referensi ke AngularJS 1.1.1, saya kira referensi ke AngularJS 1.0.1 tidak valid lagi, mendapatkan 404. Anehnya menggunakan kode identik di biola baru (dengan referensi 1.1.1) gagal , tidak tahu tentang apa itu.
Josh Sutterfield
194

Saya membuat gambar kecil. Saya harap ini cukup jelas. Beri tahu saya jika tidak!

2 cara data binding VS 1 cara data binding

Gabriel
sumber
21
Apa itu 'Titre de l'annonce'?
ghd
6
'Judul iklan' dalam bahasa Prancis
timelf123
14
@DamienRoche Sejauh yang saya mengerti konsep ini perbedaannya adalah berikut: Dalam pengikatan data dua arah: mengubah tampilan perubahan data dan sebaliknya - memperbarui input dalam tampilan pembaruan data. Dalam aliran data jalan: memperbarui tampilan pembaruan data tetapi memperbarui input dalam tampilan tidak akan memperbarui data kecuali programmer melakukannya secara eksplisit dengan melampirkan pendengar ke input yang akan memperbarui data. Harapan itu akan membuatnya sedikit lebih jelas untuk Anda.
Cake_Seller
2
Terima kasih, @Patrick atas pesan Anda. Saya selalu sangat senang merasakan sesuatu yang saya lakukan bermanfaat bagi orang lain
Gabriel
tautan rusak @Gabriel dapatkah Anda membagikan gambar di pos?
user3141326
12

Data binding dua arah memberikan kemampuan untuk mengambil nilai properti dan menampilkannya di tampilan sambil juga memiliki input untuk memperbarui nilai dalam model secara otomatis. Anda dapat, misalnya, menampilkan properti "tugas" pada tampilan dan mengikat nilai kotak teks ke properti yang sama. Jadi, jika pengguna memperbarui nilai kotak teks, tampilan akan diperbarui secara otomatis dan nilai parameter ini juga akan diperbarui di pengontrol. Sebaliknya, one way binding hanya mengikat nilai model ke tampilan dan tidak memiliki pengamat tambahan untuk menentukan apakah nilai dalam tampilan tersebut telah diubah oleh pengguna.

Mengenai React.js, itu tidak benar-benar dirancang untuk pengikatan data dua arah, namun, Anda masih dapat menerapkan pengikatan dua arah secara manual dengan menambahkan beberapa logika tambahan, lihat misalnya tautan ini . Di Angular.JS, pengikatan dua arah adalah warga kelas satu, jadi tidak perlu menambahkan logika tambahan ini.

Alex
sumber