React, dikembangkan dan dikelola oleh Facebook, adalah salah satu perpustakaan JavaScript paling populer untuk membangun antarmuka pengguna. Pada intinya, terdapat mekanisme kinerja tinggi yang disebut Virtual DOM yang mengoptimalkan rendering dan meningkatkan kinerja aplikasi. Dalam artikel ini, saya akan mencoba menjelaskan DOM Virtual, mengilustrasikan kelebihannya, memeriksa potensi kerugiannya, dan memperkirakan masa depannya. Namun, artikel ini akan memberi Anda pedoman tingkat tinggi, untuk pemahaman mendetail, cobalah mencari kursus pelatihan yang baik.

Apa itu Bereaksi Virtual DOM?

Virtual DOM (VDOM) adalah konsep pemrograman di mana representasi virtual UI disimpan dalam memori dan disinkronkan dengan DOM “nyata” melalui proses yang disebut rekonsiliasi. Ini adalah abstraksi dari HTML DOM, dan lebih ringan karena tidak melibatkan interaksi langsung dengan DOM API browser.

Berikut rincian cara kerjanya:

  1. JSX ke Virtual DOM: Saat Anda menulis JSX, JSX akan diubah menjadi panggilan React.createElement, yang merepresentasikan elemen secara virtual, membuat pohon objek JavaScript yang secara internal mewakili struktur UI Anda.
  2. Rekonsiliasi: Setiap kali terjadi perubahan, seperti interaksi pengguna dengan aplikasi atau perubahan data, pohon DOM Virtual baru akan dibuat. React kemudian membandingkan pohon baru ini dengan pohon sebelumnya untuk mengetahui perubahan yang sebenarnya (sebuah proses yang dikenal sebagai “diffing”).
  3. Pembaruan Berkelompok: Daripada langsung menerapkan perubahan pada DOM, React mengelompokkannya bersama-sama untuk meminimalkan manipulasi langsung terhadap DOM, sehingga mengoptimalkan kinerja.
  4. Perbarui DOM Asli: Setelah mengidentifikasi perubahan, React hanya memperbarui node yang terpengaruh di DOM asli, memastikan waktu pembaruan minimum dan meningkatkan kinerja.
import React from "react";

function App_medium() {
  return (
    <div>
      <h1>Hello, Medium Virtual DOM!</h1>
    </div>
  );
}

export default App_medium;

Dalam komponen React ini:

  • BEJ diubah menjadi React.createElement panggilan, sehingga menginisialisasi representasi Virtual DOM.
  • Jika ada perubahan status pada komponen ini, React akan membuat pohon Virtual DOM baru dan membandingkannya dengan yang sudah ada untuk mengetahui perbedaannya.