Saya melihat React dev talk at ( Pete Hunt: React: Rethinking best practices - JSConf EU 2013 ) dan pembicara menyebutkan bahwa pengecekan model yang kotor bisa lambat. Tapi bukankah menghitung perbedaan antara DOM virtual sebenarnya bahkan lebih sedikit performanya karena DOM virtual, dalam banyak kasus, harus lebih besar dari model?
Saya sangat suka kekuatan potensial dari DOM Virtual (terutama rendering sisi-server) tetapi saya ingin mengetahui semua pro dan kontra.
javascript
dom
reactjs
virtual-dom
Daniil
sumber
sumber
Jawaban:
Saya penulis utama modul virtual-dom , jadi saya mungkin bisa menjawab pertanyaan Anda. Sebenarnya ada 2 masalah yang perlu diselesaikan di sini
Dalam Bereaksi, masing-masing komponen Anda memiliki status. Keadaan ini seperti diamati yang mungkin Anda temukan di KO atau pustaka gaya MVVM lainnya. Intinya, Bereaksi tahu kapan harus merender ulang adegan karena ia bisa mengamati kapan data ini berubah. Pengecekan yang kotor lebih lambat daripada yang bisa diamati karena Anda harus melakukan polling data secara berkala dan memeriksa semua nilai dalam struktur data secara rekursif. Sebagai perbandingan, menetapkan nilai pada negara akan memberi sinyal kepada pendengar bahwa beberapa negara telah berubah, sehingga Bereaksi hanya dapat mendengarkan untuk acara perubahan pada negara dan mengantri rendering ulang.
DOM virtual digunakan untuk rendering ulang DOM secara efisien. Ini tidak benar-benar terkait dengan kotor memeriksa data Anda. Anda dapat merender ulang menggunakan DOM virtual dengan atau tanpa pemeriksaan kotor. Anda benar bahwa ada beberapa overhead dalam menghitung perbedaan antara dua pohon virtual, tetapi perbedaan DOM virtual adalah tentang memahami apa yang perlu diperbarui di DOM dan bukan apakah data Anda telah berubah atau tidak. Sebenarnya, algoritma diff adalah pemeriksa kotor itu sendiri tetapi digunakan untuk melihat apakah DOM kotor.
Kami bertujuan membuat ulang pohon virtual hanya ketika kondisi berubah. Jadi menggunakan diamati untuk memeriksa apakah negara telah berubah adalah cara yang efisien untuk mencegah rendering ulang yang tidak perlu, yang akan menyebabkan banyak perbedaan pohon yang tidak perlu. Jika tidak ada yang berubah, kami tidak melakukan apa pun.
DOM virtual itu bagus karena memungkinkan kita menulis kode kita seolah-olah kita sedang merender ulang seluruh adegan. Di belakang layar, kami ingin menghitung operasi tambalan yang memperbarui DOM agar terlihat seperti yang kami harapkan. Jadi walaupun algoritma DOM diff / patch virtual mungkin bukan solusi optimal , ini memberi kami cara yang sangat bagus untuk mengekspresikan aplikasi kami. Kami hanya menyatakan dengan tepat apa yang kami inginkan dan Bereaksi / virtual-dom akan mencari cara untuk membuat adegan Anda terlihat seperti ini. Kami tidak harus melakukan manipulasi DOM manual atau bingung tentang keadaan DOM sebelumnya. Kami juga tidak perlu merender ulang seluruh adegan, yang bisa jadi jauh lebih efisien daripada menambalnya.
sumber
unnecessary re-renders
?this.state.cats = 99
Anda masih perlu memeriksa kotor untuk memeriksa perubahan model, seperti halnya kotor Angular memeriksa pohon $ scope. Ini bukan perbandingan kecepatan kedua teknik, itu hanya pernyataan bahwa Bereaksi tidak melakukan pemeriksaan kotor karena memiliki setter gaya Backbone sebagai gantinya.Baru-baru ini saya membaca artikel terperinci tentang React's algorithm di sini: http://calendar.perfplanet.com/2013/diff/ . Dari apa yang saya mengerti, apa yang membuat React cepat adalah:
Dibandingkan dengan pemeriksaan kotor, perbedaan utama IMO adalah:
Pengecekan model kotor : Komponen reaksi secara eksplisit ditetapkan sebagai kotor setiap kali
setState
dipanggil, jadi tidak diperlukan perbandingan (data) di sini. Untuk pemeriksaan kotor, perbandingan (dari model) selalu terjadi pada setiap loop intisari.Pembaruan DOM : Operasi DOM sangat mahal karena memodifikasi DOM juga akan menerapkan dan menghitung gaya, tata letak CSS. Waktu yang dihemat dari modifikasi DOM yang tidak perlu bisa lebih lama dari waktu yang dihabiskan untuk membedakan DOM virtual.
Poin kedua bahkan lebih penting untuk model non-sepele seperti satu dengan jumlah bidang yang besar atau daftar besar. Satu perubahan lapangan dari model kompleks hanya akan menghasilkan operasi yang diperlukan untuk elemen DOM yang melibatkan bidang itu, alih-alih seluruh tampilan / templat.
sumber
$scope.$digest
dijalankan beberapa kali per siklus digest, jadi ini adalah beberapa kali perbandingan data lengkap dibandingkan satu kali perbandingan pohon DOM virtual parsial.Bereaksi bukan satu-satunya perpustakaan manipulasi DOM. Saya mendorong Anda untuk memahami alternatif dengan membaca artikel ini dari Auth0 yang mencakup penjelasan terperinci dan tolok ukur. Saya akan menyoroti di sini pro dan kontra mereka, saat Anda bertanya:
sumber
Berikut ini komentar dari anggota tim React Sebastian Markbåge yang memberi penjelasan:
https://news.ycombinator.com/item?id=6937668
sumber
Virtual Dom tidak ditemukan oleh reaksi. Ini adalah bagian dari dom HTML. Ia ringan dan terlepas dari detail implementasi khusus browser.
Kita dapat menganggap DOM virtual sebagai salinan HTML DOM yang lokal dan disederhanakan. Ini memungkinkan React untuk melakukan komputasinya dalam dunia abstrak ini dan melewati operasi DOM "nyata", seringkali lambat dan khusus browser. Sebenarnya tidak ada perbedaan besar antara DOM dan VIRTUAL DOM.
Di bawah ini adalah poin mengapa Virtual Dom digunakan (sumber Virtual DOM di ReactJS ):
Serta memperbarui properti DOM yaitu. nilai-nilai. Ini mengikuti suatu algoritma.
Sekarang, anggaplah jika Anda memperbarui DOM 10 kali secara langsung, maka semua langkah di atas akan berjalan satu per satu dan memperbarui algoritma DOM akan membutuhkan waktu untuk memperbarui nilai DOM.
Inilah sebabnya mengapa Real DOM lebih lambat daripada DOM virtual.
sumber