Virtual DOM nima? (ReactJS)

Virtual DOM — bu real DOM’ning yengil, xotirada saqlanadigan nusxasi. React komponentlari ishlaganda birinchi navbatda real DOMga emas, virtual DOMga yoziladi. Keyin esa faqatgina o‘zgargan qismlar real DOMga minimum harakat bilan qo‘llaniladi.

DOM – brauzerdagi HTML sahifaning daraxt ko‘rinishidagi modeli. Uni o‘zgartirish sekin va resurs talab qiladi.

Virtual DOM qanday ishlaydi? (Step-by-step)

• React komponentlari virtual DOM daraxtini yaratadi.
• Komponent ichida state yoki props o‘zgarsa, React yangi virtual DOM daraxtini qayta yaratadi.
• React eski virtual DOM va yangi virtual DOM’ni taqqoslaydi (diffing).
• Taqqoslash natijasida aniqlangan o‘zgarishlar (patch) real DOM’da qo‘llaniladi.

Misol: Oddiy Counter

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Sanoq: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

• Dastlab count = 0 — virtual DOM: <p>Sanoq: 0</p>
• Tugma bosiladi → count = 1
• React yangi virtual DOM yaratadi: <p>Sanoq: 1</p>
• React eski va yangi DOM’ni taqqoslab, faqat <p> element ichidagi matnni yangilaydi

Real DOM bo‘yicha butun <div> qayta yaratilardi.
Virtual DOM bilan faqat o‘zgargan <p> element yangilanadi.

Nima uchun bu samaraliroq?

• Real DOM bilan ishlash sekin (browser repaint, reflow, layout sababli)
• Virtual DOM esa tezroq: xotirada hisob-kitoblar qiladi
• React batch update qilgani uchun ko‘plab o‘zgarishlarni bir joyda amalga oshiradi
• React minimal DOM operatsiyasi bilan interfeysni yangilaydi

React’dagi reconciliation nima?

Bu — eski va yangi virtual DOM’larni solishtirish va sinxronlashtirish jarayoni. React bu jarayonni heuristics (mantiqiy qoidalar) asosida qiladi:

• Bir xil komponent turlari — qayta ishlatiladi
• Har xil komponentlar — yangidan yaratiladi
• Ro‘yxatlar bilan ishlaganda key atributi muhim rol o‘ynaydi

Visual diagram uchun (tavsif)

• Component render → VDOM v1
• state o‘zgardi → VDOM v2
• Diffing: VDOM v1 vs VDOM v2
• Patch: faqat kerakli DOM elementlar yangilanadi

Yakuniy xulosa

• Virtual DOM — bu React’ning tezlik siri.
• U real DOM’dan ko‘ra tez ishlaydi, chunki xotirada ishlaydi.
• React virtual DOM orqali real DOM’ga minimal o‘zgarish kiritadi.
• Bu esa foydalanuvchi interfeysini juda tez va samarali yangilash imkonini beradi.