Kegunaan react virtual dom: 1. Meningkatkan performa kode react. Virtual DOM adalah objek js. Membuat objek js menghabiskan kinerja yang jauh lebih sedikit daripada membuat DOM nyata DOM akan berdampak besar. Peningkatan kinerja; 2. Untuk mencapai aplikasi lintas terminal, di sisi browser, DOM virtual diubah menjadi node DOM browser individual, atau dapat diubah menjadi komponen aplikasi asli untuk diimplementasikan lintas terminal. aplikasi.
Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.
1. Performa yang jauh lebih baik
2. Memungkinkan aplikasi cross-end (React Native). Di sisi browser, DOM virtual diubah menjadi node DOM browser individual. Itu juga dapat diubah menjadi komponen aplikasi asli, dan aplikasi lintas segmen dapat direalisasikan.
Mengapa ini meningkatkan kinerja
Jika tidak ada DOM virtual, maka DOM asli akan langsung dibuat. Setiap kali data berubah, DOM nyata akan dibuat, lalu DOM asli akan dibandingkan, lalu DOM asli akan dimodifikasi DOM akan menghabiskan banyak kinerja (Karena pohon DOM yang dihasilkan oleh JS akan memanggil API tingkat aplikasi web, kehilangan kinerja pada tingkat API ini sangat besar), yang akan menghabiskan banyak kinerja.
Berbeda dengan DOM virtual. DOM virtual adalah objek js. Membuat objek js menghabiskan kinerja yang jauh lebih sedikit daripada membuat DOM nyata. Mengganti pembuatan DOM nyata dengan pembuatan DOM virtual akan menghasilkan peningkatan kinerja yang sangat besar.
DOM maya
Virtual DOM adalah objek js
<div id='abc'><span>halo dunia</span></div>//DOM Nyata['div', {id: 'abc'}, ['span', {}, 'halo dunia' ]]//DOM mayaProses pemuatan dan pembaruan halaman
1.menyatakan data
2.jsx templat
3. Data + template menghasilkan DOM virtual
4. Gunakan DOM virtual untuk menghasilkan DOM nyata
5.perubahan keadaan
6. Data + template menghasilkan DOM virtual baru
7. Bandingkan DOM virtual asli dan DOM virtual baru (algoritma berbeda)
8. Langsung operasikan DOM dan berpindah tempat
Perluas pengetahuan Anda:
Apa tujuan dari DOM virtual?
Untuk mencapai pembaruan elemen DOM yang efisien di halaman;
Dalam aplikasi web tradisional, kami sering memperbarui perubahan data ke antarmuka pengguna secara real time, sehingga setiap perubahan kecil pada data akan menyebabkan pohon DOM dirender ulang.
Tujuan dari DOM virtual adalah untuk mengakumulasi semua operasi, menghitung semua perubahan secara statistik, dan memperbarui DOM secara seragam.
Kinerja sangat meningkat
Ini memungkinkan aplikasi lintas ujung (React Native). Di sisi browser, DOM virtual diubah menjadi node DOM browser individual. Itu juga dapat diubah menjadi komponen aplikasi asli, dan aplikasi lintas segmen dapat direalisasikan.
Perbedaan antara DOM dan DOM virtual
1. DOM virtual tidak akan melakukan operasi penyusunan huruf dan menggambar ulang.
2. Sering-seringlah memodifikasi DOM virtual, kemudian membandingkan dan memodifikasi bagian-bagian yang perlu diubah di DOM sebenarnya sekaligus (catatan!), dan terakhir melakukan pengaturan huruf dan menggambar ulang di DOM sebenarnya untuk mengurangi hilangnya pengaturan huruf dan menggambar ulang yang berlebihan Node DOM.
3. Efisiensi pengaturan huruf dan menggambar ulang DOM sebenarnya cukup rendah.
4. Virtual DOM secara efektif mengurangi penggambaran ulang dan penyusunan huruf pada area yang luas (node DOM nyata), karena pada akhirnya berbeda dengan DOM asli dan hanya dapat merender sebagian saja.