1. REACT.JS da Virtual DOM qanday ishlaydi?

Virtual DOM, React-da ishlatiladigan HTML-elementlarining yuzaga keltirilishi uchun foydalaniladigan oddiy strukturadir. Virtual DOM, asl DOM (Document Object Model) ni ko'rsatadigan yoritg'ich ko'rinishidagi yengil tavsifdir.

React-da o'zgarishlar ro'y berayotganda, React virtual DOM ni avval yangilaydi. Keyin React yangilangan virtual DOM ni avvalgi holati bilan solishtirib, yuzaga keltirilishi kerak bo'lgan asl DOM ni yangilash uchun minimal o'zgarishlar sonini aniqlaydi. Oxirida, React bu o'zgarishlarni asl DOM ga qo'llab-quvvatlash orqali amalga oshiradi, bu esa samarali va tezroq rendering jarayonini natijasida chiqadi.

Virtual DOM ning asosiy rolida, performansni yaxshilash va rendering jarayonini optimallashtirish bor. Asl DOM ga qilingan o'zgarishlar sonini minimalga tushirish orqali, React asl DOM operatsiyalari va yangilashlar sonini kamaytiradi, bu esa sahifani tezkor va samarali chiqarish imkonini beradi.

Qo'shimcha ravishda, React-dagi virtual DOM o'zgaruvchilar yig'indisini yozish va boshqarish uchun abstraksiya sahifasi o'z ichiga oladi. Virtual DOM dasturchilarga oddiyroq UI komponentlarini yozish va saqlashga yordam beradi. Virtual DOM dasturchilarga oddiyroq va taxmin qilinishi oson bo'lgan DOM ning ishlab chiqarishini qulaylashtiradi.

2. REACT.JS hodisani boshqarishni qanday boshqaradi?

React, hodisalarni boshqarishni "Synthetic Events" tizimi orqali amalga oshiradi. Bunda, React komponentlari hodisalarni qabul qilish uchun "on" attributlarini qo'llaydi. Misol uchun, "onClick", "onChange", "onSubmit" kabi.

Hodisalar ushbu "on" attributlari orqali beriladi va hodisalar tufayli bajariladigan funksiyalar komponentning ochilish xolatida yaratiladi. Bu funksiyalar komponent holatida hodisalar yuz berishini kuzatib borish uchun "event" argumentini qabul qiladi.

Misol uchun, quyidagi kodda, "onClick" hodisasini qabul qilish uchun funksiya yaratilgan:

function handleClick() {
  console.log('Button clicked');
}

function App() {
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Bu kodda "onClick" hodisasini qabul qilish uchun "handleClick" funksiyasi yaratilgan. Funksiyada bir nechta imkoniyatlar mavjud bo'lishi mumkin, masalan, komponent holatidagi xolatni o'zgartirish yoki boshqa komponentlarga o'zgartirish kiritish.

Jamiyatda, React hodisalarini qabul qilish va uni boshqarish juda oddiy va qulay. "Synthetic Events" tizimi yordamida, hodisalar kuchli va samarali komponentlar yaratishni osonlashtiradi.

3. SERVER-SIDE rendering va CLIENT-SIDE rendering nima va qanday farqlari bor?

Server-side rendering (SSR) va client-side rendering (CSR) - bu ikki ajoyib qurilmalar ishlatish usuli, masalan React yoki Angular frameworklari kabi.

Server-side rendering da, brauzerga chiqarilayotgan HTML va CSS kodlari server tomonidan yaratiladi va brauzerga yuboriladi. Oynani yuklab olish shart emas, chunklar va boshqa resurslar server tomonidan ishlatiladi. Bu usul, brauzerda kod yuklanishi va harakatlanishi uchun minimal vaqt sarflanadi, shuningdek, saytni SEO-optimizatsiya qilish imkonini beradi. Ammalarda SSR ishlatiladigan saytlar yuzlab milyonlar o'qiladi va o'ylanganidan ko'proq foydali bo'ladi.

Client-side rendering da, boshqa tarafdan boshqa HTML va JavaScript fayllar yuklab olinadi. Brauzerda saytni ishga tushirish uchun server tomonidan asosiy HTML sahifasi beriladi. Endi, brauzer tomonidan sayt ishga tushirilishi uchun JavaScript-kodlar ishlatiladi. Bu usul, asosan, yuqori darajali interaktivlikning yuzaga kelishi, chunki sayt muqim foydalanuvchilarga shirin, dinamik tajriba taqdim etadi. Lekin, SEO optimizatsiyasi yo'qolishi va sahifani yuklash uchun vaqt sarflash imkoniyati yuzasidan SSR-niki kamroq.

Farq SSR va CSR o'rtasida shundayki, SSR-da sahifa yagona marta server tomonidan yaratiladi va qayta ishlash jarayoni yo'q. CSR-da, saytni to'xtatish yoki boshqa harakatlar kabi ilovalarning tomonidan bazarga murojaat qilinishi zarur.