React Rendering: Virtual DOM, Reconciliation, Batching — To'liq qo'llanma

Mavzu bo‘limlari:

1. Umumiy tushuncha: React nima uchun shunday ishlaydi
2. Virtual DOM: nima, nega kerak, ichki ko‘rinishi
3. Reconciliation (diffing): algoritm, keyning roli, komponent o‘zgarishlari
4. Fiber arxitekturasi: units of work, render vs commit fazalari, prioritet (lanes)
5. Batching: avvalgi model va React 18 avtomatik batching, flushSync, startTransition
6. Concurrent / Concurrent-like konseptlar: Suspense, transition, interaktivlik
7. Praktik kod-misollar: optimallashtirish, common pitfalls
8. Prezentatsiya uchun slayd outline va speaker-notes
9. Qo‘shimcha manbalar va tavsiyalar

1. Umumiy tushuncha

React — deklarativ UI kutubxonasi. Siz komponentlarni funksiyalar yoki klasslar ko‘rinishida yozasiz, ular props va state dan foydalanib UI tasvirini (React elementlar daraxti) qaytaradi. Har safar state yoki props o‘zgarganda, React yangi element daraxtini (virtual representation) hosil qiladi va mavjud UI bilan solishtirib, minimal DOM o‘zgarishlarini qo‘llaydi.

Maqsadlar:

• Ishlashni yaxshilash (minimum real DOM manipulyatsiyasi)
• Kodni oddiyroq qilish (declarative — nima ko‘rinishi kerakligini bildiradi)
• Samarali yangilashlar qilish uchun diffing imkoniyati

2. Virtual DOM (VDOM)

Nima?

Virtual DOM — brauzerning haqiqiy DOM’idan mustaqil, xotirada saqlanadigan yengil JavaScript ob’ektlar daraxti. Har bir React elementi (element node) — bu oddiy JS ob’ekti: type, props, children.

Nega kerak?

• Re-renderlar paytida real DOM bilan bevosita ishlash sekin bo‘ladi. VDOM yordamida React o‘zgargan joylarni aniqlab, minimal real DOM o‘zgarishlarini amalga oshiradi.
• Oson diffing: ikki VDOM daraxtini solishtirish va farq bo‘yicha patch yaratish.

Ichki jihat (soddalashtirilgan):

1. Component render bo‘ladi → yangi VDOM (element tree) qaytariladi.
2. React eski VDOM bilan yangi VDOMni solishtiradi — bu yerda reconciler ishlaydi.
3. Farq topilganda, React minimal DOM patchlarini hisoblab chiqaradi va commit fazasida real DOM yangilanadi.

3. Reconciliation (Diffing)

Maqsad

Ikki VDOM daraxtini tez va ishonchli solishtirish: qaysi element o‘zgargan, o‘chirildi yoki ko‘chirildi.

Asosiy qoidalar (React diffing algorithm – soddalashtirilgan):

1. Tur mos emas → butun komponentni qayta yaratish (unmount + mount).
2. Tur mos va elementlar list bo‘lsa → index asosida tekshiriladi, lekin key bo‘lsa, React key ni ishlatib farqlaydi.
3. Key muhimligi: list elementlariga barqaror va noyob key berish kerak (odatda id). index ni faqat static, o‘zgarmaydigan listlar uchun ishlatish tavsiya etiladi.

Nega komponentni ichida komponent e'lon qilish yomon? (masalan const A = () => { const B = () => ... })

Har renderda yangi komponent funksiya obyekti yaratiladi va reconciliation qiyinlashadi — React uchun to‘g‘ri elementni aniqlash mushkul bo‘ladi.

Conditional rendering va elementning turi

Agar rendering shart bo‘yicha bir turdan boshqa turga o‘tsa (<div> → <span> yoki ComponentA → ComponentB), React eski elementni o‘chiradi va yangi elementni joylashtiradi.

4. Fiber arxitekturasi (React 16+)

Nima uchun Fiber?

Oldingi (stack) reconciler barcha o‘zgarishlarni sinxron tarzda, bitta chuqur pass orqali qayta ishlardi. Bu katta daraxtlarda bloklanishlarga olib kelardi. Fiber — ishlarni kichik "unit of work"larga bo‘lib, prioritetlar (lanes) bo‘yicha asenkron yoki qismlarga bo‘lingan tarzda bajarishga imkon beradi.

Asosiy tushunchalar

• Fiber node: har bir React element uchun ichki ob’ekt (aloqa, state, pointers — child/sibling/return).
• Work loop: React bir nechta "unit"larni bajarib, zarur vaqtda ishlashni to‘xtatib, brauzerga boshqaruvni qaytaradi (ya'ni interaktivlikni saqlaydi).
• Render fazasi (Reconciliation): virtual hisob-kitoblar (work in progress) — bu faza interruptible (to‘xtatilishi mumkin).
• Commit fazasi: DOM o‘zgarishlari aslida qo‘llanadigan, atomik va sinxron bosqich.

Lanes & Priorities

React 18+ bilan priority lanes qo‘shildi — yangilanishlar turlicha prioritetlarda bo‘lishi mumkin (user input — yuqori; background fetch — past). Bu React’ga muhim ishlarni avval bajarish imkonini beradi.

5. Batching (Yangilanishlarni guruhlash)

Nima?

Bir nechta setState chaqiriqlari bitta renderga guruhlanadi — bu renderinglarni kamaytiradi.

Tarixiy kontekst

• Oldin: React faqat event handlers ichida (React-controlled events) batch qilardi.
• React 18: automatic batching joriy etildi — mikrotask/async callback ichida ham bir nechta state yangilanishlari bitta renderga guruhlanadi.

Misol

function Comp(){

const [a, setA] = useState(0);

const [b, setB] = useState(0);

const onClick = () => {

setA(x => x + 1);

setB(x => x + 1);

// React buni bittagina renderga yig‘adi (automatic batching)

}

}

Opt-out: flushSync

Agar darhol DOM yangilanishini xohlasangiz (masalan, third-party integratsiya), flushSync bilan batchingni buzishingiz mumkin:

import { flushSync } from 'react-dom';

flushSync(()=>{

setState(...);

});

// DOM shu satrdan keyin yangilanadi

Eslatma: Keraksiz ishlatilsa, performans pasayishi mumkin.

Concurrent-ish API: startTransition

Agar yangilanish past prioritetli bo‘lsa (masalan, inputga bog‘liq katta list filteri), startTransition ichida qilinsa, React uni background ga o‘tkazadi va UI interaktiv qoladi:

import { startTransition } from 'react';

startTransition(()=>{

setHugeListFilter(...);

});

6. Render va Commit fazalari — nimaga e'tibor berish kerak

1. Render (Reconciliation) fazasi — hisob-kitob (virtual), interruptible. Bu yerda React markaziy ishlarni (fiber work) bajaradi.
2. Commit fazasi — real DOM yangilanishlari, refs yangilanadi, effectlar (useLayoutEffect) shu bosqichda bajarilishi kerak.

Qoida: DOM manipulyatsiyalar va layout-dependent work useLayoutEffect ichida yoki commit bosqichida bajarilsin; useEffect esa commitdan keyin async bo‘lib ishlaydi.