Bo’limni qisqacha takrorlash

Ushbu bob davomida biz veb dasturlashda real DOM va virtual DOM o’rtasidagi farqlar hamda React’da virtual DOM’dan foydalanishning afzalliklarini o’rganib chiqdik.

Dastlab, real DOM haqida gaplashdik va uning sekin renderlash va turli brauzerlararo o’zaro mos kelishi kabi cheklovlari borligini muhokama qildik. Bu holat dasturchilarga turli platformalarda bir xil ishlaydigan veb ilovalarni yaratishda qiyinchilik tug’dirishi mumkin. Buni tasvirlash uchun biz real DOM API’laridan foydalanib oddiy veb sahifa yaratish misolini ko’rib chiqdik va sahifaning murakkabligi oshgani sayin bu API’larni boshqarish qiyinlashib borishini ko’rdik.

Keyinchalik, virtual DOM’ga o’tib, uning qanday qilib real DOM cheklovlarini hal qilishi haqida so’z yuritdik. React virtual DOM’dan foydalanib, real DOM’ga kerakli yangilanishlar sonini minimallashtirib, renderlash vaqti tomonidan qimmatli bo’lgan, performance muammosini qanday kamaytirishi haqida tushuntirdik. React elementlardan foydalanib, virtual DOM’ni oldingi versiyasi bilan solishtirishi va real DOM’ni yangilashning eng samarali usulini hisoblash jarayonini ko’rib chiqdik.

Virtual DOM afzalliklarini ko’rsatish uchun biz React komponentlaridan foydalanib xuddi shu oddiy veb sahifani yaratish misolini ko’rib chiqdik. Ushbu yondashuvni real DOM yondashuvi bilan taqqoslab, sahifa murakkabligi oshgani sari React komponentlarining yanada ixcham va boshqarishga osonroq ekanligini ko’rdik.

Shuningdek, React.createElement va document.createElement o’rtasidagi farqlarni ko’rib chiqdik va JSX yordamida komponentlarni qanday yaratish mumkinligini o’rgandik. JSX HTML’ga o’xshash sintaksisni taqdim etib, virtual DOM strukturasini tushunishni osonlashtiradi.

Oxirgi qismda esa React “diffing” algoritmining keraksiz qayta render qilishlarga olib kelishi mumkinligi haqida gapirdik. Bu ayniqsa katta va murakkab foydalanuvchi interfeyslarida jiddiy performance muammolariga olib kelishi mumkin. Biz bu masalani 5-bobda React’ning memo va useMemo xususiyatlaridan foydalanib qanday optimizatsiya qilish mumkinligini o’rganamiz.

Umuman olganda, bu bobda veb dasturlashda virtual DOM’dan foydalanishning afzalliklari haqida va React bu konsepsiyadan foydalanib veb ilovalarni yaratishni qanday oson va samarali qilishini o’rgandik.

Takrorlash uchun savollar

Quyidagi savollarga javob berib, mavzularni yaxshiroq tushunganingizni tekshirib ko’ring:

1. DOM nima va u virtual DOM bilan qanday taqqoslanadi?
2. Document fragmentlar nima va ular React’ning virtual DOM’iga o’xshash va farqli jihatlari qanday?
3. DOM bilan bog’liq muammolar qanday?
4. Virtual DOM foydalanuvchi interfeys yangilanishlarini qanday tezroq bajaradi?
5. React renderlash qanday ishlaydi? Ushbu jarayondan qanday potensial muammolar kelib chiqishi mumkin?

Keyingi bo’lim

Kelasi 4-bobda React reconciliation va uning Fiber arxitekturasi haqida chuqurroq o’rganamiz.