DOM Maya: Teknik di sebalik kemas kini DOM pantas React.

Helo semua, saya teruja untuk memulakan satu siri siaran baharu di mana saya akan cuba menerangkan pelbagai konsep daripada dunia pengaturcaraan. Kami akan merangkumi segala-galanya daripada istilah seperti idempoten dan idiomatik kepada konsep yang lebih khusus yang berkaitan dengan perpustakaan dan rangka kerja. Dan hari ini, kita akan menyelami satu topik sedemikian — DOM Maya.

Jika anda rasa ini berguna, jangan lupa Suka, Kongsi dan Komen tentang topik yang anda ingin saya bincangkan seterusnya. Jangan buang masa lagi dan terus masuk ke DOM Maya!

NOTA: Sebelum kita meneruskan, adalah penting untuk memahami bahawa konsep DOM Maya bukan eksklusif untuk React. Pustaka bahagian hadapan JavaScript lain, seperti Vue, juga menggunakannya untuk meningkatkan prestasi pemaparan.

DOM

DOM (Model Objek Dokumen) ialah perwakilan seperti pepohon bagi dokumen HTML (atau halaman web/aplikasi web) menggunakan nod atau objek. DOM direka bentuk supaya perpustakaan dan rangka kerja bahagian hadapan (javascript) boleh berinteraksi dengan dan memanipulasi dokumen secara pengaturcaraan melalui APInya.

Mengapa DOM Maya

Walaupun DOM menyediakan cara yang cekap untuk memanipulasi dokumen melalui APInya, prestasi boleh menjadi isu apabila terdapat beribu-ribu elemen pada skrin. Ini kerana kemas kini dalam DOM selalunya melibatkan pemusnahan dan mencipta semula keseluruhan subpokok.

Di sinilah DOM Maya berperanan. DOM Maya ialah perwakilan dalam memori yang ringan bagi DOM Sebenar, membenarkan penyegerakan perubahan yang pantas dan cekap kepada DOM sebenar — satu proses yang dikenali sebagai Penyesuaian.

Perkara utama yang perlu diingat di sini ialah:

1. DOM Maya ialah versi ringan DOM Sebenar, bermakna ia tidak mempunyai semua sifat DOM Sebenar, yang menjadikannya lebih cekap untuk digunakan.
2. DOM Maya wujud dalam ingatan, membolehkan manipulasi yang lebih pantas dan lebih cekap sebelum perubahan digunakan pada DOM Sebenar.

Dengan ini, perpustakaan JavaScript yang menggunakan API DOM mencipta DOM Maya mereka sendiri dan memanipulasinya. Mereka mengemas kini DOM Sebenar hanya apabila perlu, dan walaupun begitu, dengan operasi yang minimum.

Bagaimanakah DOM maya dikendalikan dalam React??

React JS ialah perpustakaan popular yang dibangunkan oleh Facebook untuk membina antara muka pengguna. Disebabkan kesederhanaannya, ia telah mendapat populariti besar-besaran dan digunakan dalam banyak projek web moden.

Seperti kebanyakan perpustakaan hadapan JS yang lain, React menggunakan konsep DOM Maya untuk mengurus pemaparan semula dan kemas kini dengan cekap dalam aplikasi.

React menggunakan algoritma pembezaan bersama teknik penyesuaian untuk mengoptimumkan proses ini. (Khususnya, pustaka ReactDOM mengendalikan perkara ini di sebalik tabir.)

Mari pecahkan langkah demi langkah:

1. Fungsi render() komponen bertindak balas

   • Fungsi render() komponen tindak balas mula-mula mencipta Elemen React/DOM Maya dengan JSX.
   • Ia mengandungi versi ringan rakan sejawat Real DOM dan sifat tambahan seperti $$typeof, props, untuk memudahkan perbezaan yang cekap.

2. Algoritma pembezaan

   • Apabila komponen React dikemas kini, DOM Maya baharu dicipta dan proses pembezaan bermula. Ini ialah Algoritma heuristik O(n) berdasarkan dua andaian utama.
     1. Jenis unsur yang berbeza menghasilkan pokok yang berbeza.
     2. Prop kunci boleh digunakan untuk menjejak elemen kanak-kanak yang kekal konsisten antara pemaparan.

2.1. Langkah dalam algoritma pembezaan

• Apabila algoritma menemui dua jenis elemen DOM yang berbeza: ia akan meruntuhkan DOM Maya lama dan mencipta yang baharu dari awal berdasarkan spesifikasi elemen baharu.
• Apabila React menemui jenis elemen DOM yang sama: ia mengekalkan objek DOM lama dan hanya mengemas kini atribut yang diubah.
• Untuk elemen React daripada jenis yang sama, React memastikan objek DOM lama tetap utuh dan membekalkan prop yang dikemas kini.
• Apabila mengendalikan elemen kanak-kanak, React berulang melalui kedua-dua set kanak-kanak (pokok DOM maya lama dan pokok yang baru dicipta), membuat kemas kini apabila wujud perbezaan.

2.2. Mengapa menggunakan kekunci?

Seperti yang dinyatakan dalam perkara terakhir, algoritma pembezaan berulang melalui senarai anak dan membuat perubahan jika perlu. Jika anda tidak menggunakan kunci dalam senarai kanak-kanak, prestasi mungkin terjejas dan anda mungkin menghadapi tingkah laku yang tidak dijangka.

Mari kita lihat contoh:

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

Dalam senario di atas, algoritma sebenarnya boleh mengendalikan pengubahsuaian dengan cekap. Ia melihat setiap anak indeks dan menemui

apple

&&

nanas

adalah sama dalam kedua-dua senarai dan tidak melakukan apa-apa kepada mereka manakala

anggur

hanya terdapat dalam senarai baharu justeru menambah satu pada senarai lama.

Tetapi katakan, kami mahu menambah

anggur

pada mulanya.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

Di sini prestasi algoritma akan menurun apabila ia melihat

anggur

menggantikan

epal

,

epal

menggantikan

nanas

dan

nanas

dalam kedudukan terakhir. Oleh itu mencipta semula semua elemen daripada strach.

Untuk menyelesaikan kesesakan prestasi ini, pekerja pasukan React menggunakan Key yang merupakan id unik yang dilampirkan pada item anak senarai yang boleh digunakan oleh algoritma untuk menentukan sama ada item itu boleh dibiarkan utuh dan hanya susun semula kedudukan atau perlu dibuat semula.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>grape</li>
  <li>apple</li>
  <li>pineapple</li>
</ul>

Sekarang bertindak balas boleh menggunakan atribut Kunci dan hanya meletakkan semula item anak yang tidak dikemas kini sambil menambah item anak baharu.

3) Fungsi render() ReactDOM

Akhirnya fungsi render() ReactDOM dipanggil, yang menyelaraskan perbezaan antara DOM Maya baharu dan DOM Sebenar. Ini menghasilkan operasi minimum yang diperlukan untuk memaparkan semula HTML dengan cekap.

Kesimpulan

Dalam artikel ini, kami telah meneroka DOM Maya, teknik yang digunakan oleh banyak perpustakaan bahagian hadapan untuk mengendalikan perubahan data dan elemen dengan cekap dengan operasi DOM yang minimum. Kami juga melihat cara React secara khusus menggunakan proses pembezaan dan penyelarasan untuk mengoptimumkan kemas kini.

Saya harap siaran ini membantu anda lebih memahami cara DOM Maya berfungsi. Walaupun anda sudah biasa dengan konsep itu, saya harap Sekarang anda tahu apakah itu DOM Maya dan cara ia menyumbang dalam mewujudkan persekitaran bahagian hadapan yang dioptimumkan.

Atas ialah kandungan terperinci DOM Maya: Teknik di sebalik kemas kini DOM pantas React.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!