DOM Virtual dan Bereaksi

Mari kita mulai dengan definisi di reactjs.org

DOM virtual (VDOM) adalah konsep pemrograman di mana representasi UI yang ideal, atau "virtual", disimpan dalam memori dan disinkronkan dengan DOM "nyata" oleh perpustakaan seperti ReactDOM. Proses ini disebut rekonsiliasi.

Itu definisi yang sangat buruk, mari kita coba memahaminya.

Virtual DOM adalah konsep yang diimplementasikan oleh perpustakaan di atas API browser. Setiap kali perubahan dibuat di browser, JS melintasi seluruh DOM alih-alih hanya merender bagian yang memerlukan perubahan. Yang memakan waktu dan mahal.

Dengan kata awam, Misalkan mesin mobil Anda perlu diperbaiki, jadi Anda akan memperbaiki mesin daripada memperbaiki seluruh mobil Anda. Hal yang sama dengan DOM virtual, alih-alih merender seluruh DOM, hanya elemen itu yang dirender di mana perubahan dibuat.

Bereaksi menggunakan Algoritma Diff untuk membandingkan perubahan antara pohon baru dan pohon terbaru (Pohon di sini tidak lain adalah merujuk pada perubahan yang dibuat yaitu VDOM baru dan VDOM terbaru). Proses perbandingan ini disebut Rekonsiliasi.

React mem-parsing pohon menggunakan Breadth-first search (BFS).

Ingatlah selalu, DOM Virtual tidak ada secara fisik, ini adalah representasi dalam memori atau cetak biru dari DOM Nyata.

Mari kita ambil contoh lain: Anda sedang membangun formulir yang terdiri dari dua bidang input. Sekarang Anda harus menambahkan bidang input lain, ketika Anda menambahkan bidang input ketiga, VDOM dibuat dengan perubahan Anda dan DOM asli tetap tidak terpengaruh. Sekarang perbandingan antara VDOM dan DOM nyata terjadi dan perubahan hanya dibuat di div jika diperlukan.

Mengapa DOM virtual? Sederhana, Inilah yang membuat reaksi cepat. Ia melakukan ini dengan diffing DOM virtual. Membandingkan dua pohon virtual lama dan baru, lalu buat hanya perubahan yang diperlukan ke DOM asli.

Jangan bingung bahwa VDOM dikembangkan oleh React js, VDOM adalah konsep yang digunakan oleh React js. DOM Virtual pada dasarnya adalah tangkapan layar DOM pada waktu tertentu. Setiap kali perubahan dibuat, komponen dirender ulang membuat VDOM baru.

Virtual DOM telah mendapatkan popularitasnya karena membuat aplikasi Anda cepat dan menghapus rendering yang tidak perlu dari seluruh halaman. Yang menghemat waktu dan uang.

Saya harap Anda menikmati artikelnya dan merasa bermanfaat. Jika saya melewatkan sesuatu, beri tahu saya di bagian komentar.