React nima? Nima uchun kerak, Virtual DOM qanday ishlaydi

~15 daq · React · Kirish va Asoslar

Muammodan boshlaylik

Siz HTML, CSS, JavaScript bilan veb sahifa yozdingiz. Kichik loyiha uchun bu yetarli. Lekin loyiha o'sib boradi — foydalanuvchilar ro'yxati, qidiruv, filtrlar, real-time yangilanishlar paydo bo'ladi.

Tasavvur qiling: foydalanuvchilar ro'yxati bor, qidiruv maydoni bor. Foydalanuvchi qidiruv maydoniga yozganda — ro'yxat filtrlangan holda ko'rsatilishi kerak.

Vanilla JavaScript da bu shunday yoziladi:

let users = [];
let searchQuery = '';

function renderUsers() {
  const list = document.getElementById('user-list');
  list.innerHTML = '';  // eski ro'yxatni o'chiramiz

  const filtered = users.filter(u =>
    u.name.toLowerCase().includes(searchQuery)
  );

  filtered.forEach(user => {
    const li = document.createElement('li');
    li.textContent = user.name;
    list.appendChild(li);
  });
}

document.getElementById('search').addEventListener('input', e => {
  searchQuery = e.target.value.toLowerCase();
  renderUsers();  // har safar butun ro'yxatni qayta chizamiz
});

fetch('/api/users')
  .then(r => r.json())
  .then(data => {
    users = data;
    renderUsers();
  });

Bu ishlaydi. Lekin uchta muammo bor.

Birinchi muammo — DOM ni qo'lda boshqarish. Har safar innerHTML = '' qilib, butun ro'yxatni o'chirasiz va qayta yaratasiz. Agar 1000 ta element bo'lsa — barchasi o'chiriladi va qayta chiziladi. Bu sekin va isrofgarchilik.

Ikkinchi muammo — ma'lumot va ko'rinish sinxronizatsiyasi. users va searchQuery — bu ma'lumotlar. renderUsers() — bu ko'rinish. Siz ularni qo'lda sinxronlashtirasiz. Biror joyda renderUsers() ni chaqirishni unutsangiz — ekranda eski ma'lumot qoladi. Loyiha o'sganda bunday joylar ko'payib ketadi.

Uchinchi muammo — loyiha o'sganda kod chigallashadi. 10 ta bunday komponent bo'lsa — qaysi renderUsers() qaysi users ni ishlatayotganini kuzatish qiyinlashadi. Bir joyda o'zgartirish boshqa joyni buzishi mumkin.

React aynan shu uchta muammoni hal qilish uchun yaratilgan.

React nima?

React — Facebook (hozir Meta) tomonidan 2013-yilda ochiq manbaga chiqarilgan JavaScript kutubxonasi. U faqat bitta narsani qiladi: UI qurishni osonlashtiradi.

React ning asosiy g'oyasi oddiy:

Ma'lumot o'zgarganda, UI avtomatik yangilansin. Siz faqat "ma'lumot bunday bo'lsa, UI shunday ko'rinsin" deb yozasiz.

Yuqoridagi misol React da:

function UserList() {
  const [users, setUsers] = useState([]);
  const [search, setSearch] = useState('');

  useEffect(() => {
    fetch('/api/users').then(r => r.json()).then(setUsers);
  }, []);

  const filtered = users.filter(u =>
    u.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <input
        value={search}
        onChange={e => setSearch(e.target.value)}
        placeholder="Qidirish..."
      />
      <ul>
        {filtered.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

search o'zgarganda React avtomatik qayta chizadi. Siz renderUsers() ni chaqirmaysiz, innerHTML = '' qilmaysiz. React o'zi biladi — ma'lumot o'zgardi, demak UI yangilanishi kerak.

Hozircha bu kodni to'liq tushunmasangiz ham bo'ladi — keyingi darslarda har bir qismni alohida o'rganamiz. Asosiy g'oyani tushunish muhim.

Virtual DOM — nima uchun kerak?

React ma'lumot o'zgarganda UI ni qayta chizadi. Lekin muammo bor — haqiqiy DOM ni o'zgartirish qimmat operatsiya.

Nima uchun DOM sekin?

Brauzerda bitta element o'zgarganda ham brauzer ko'p ish qiladi: elementlarning joylashuvini qayta hisoblaydi, ekranda qayta chizadi. Bu operatsiyalar sekin.

Agar React har safar butun sahifani qayta chizsa — juda sekin bo'lardi.

React ning yechimi

React haqiqiy DOM bilan to'g'ridan-to'g'ri ishlamaydi. U avval Virtual DOM yaratadi — bu xotiradagi oddiy JavaScript ob'ekti, haqiqiy DOM ning "nusxasi".

Haqiqiy DOM (brauzerda):    Virtual DOM (React xotirasida):
<ul>                         { type: 'ul', children: [
  <li>Ali</li>       →         { type: 'li', text: 'Ali' },
  <li>Vali</li>                { type: 'li', text: 'Vali' },
</ul>                        ]}

Virtual DOM — oddiy JavaScript ob'ekti. Uni o'zgartirish juda tez, chunki brauzer hisob-kitob qilmaydi.

Qanday ishlaydi?

Ma'lumot o'zgarganda React uch qadam bajaradi:

1-qadam: Yangi Virtual DOM yaratadi (yangi ma'lumot asosida).

2-qadam: Eski Virtual DOM bilan taqqoslaydi. Bu jarayon diffing deyiladi. React ikki "nusxa"ni solishtiradi va qayerda farq borligini topadi.

3-qadam: Faqat farq qilgan joylarni haqiqiy DOM da o'zgartiradi. Bu reconciliation deyiladi.

Eski Virtual DOM:     Yangi Virtual DOM:     Haqiqiy DOM da:
<ul>                  <ul>
  <li>Ali</li>          <li>Ali</li>    →    o'zgarmadi
  <li>Vali</li>         <li>Vali</li>  →    o'zgarmadi
</ul>                   <li>Soli</li>  →    faqat shu qo'shildi
                      </ul>

1000 ta elementdan 1 tasi o'zgarganda — React faqat o'sha 1 ta elementni yangilaydi. Qolgan 999 tasiga tegmaydi.

Kichik loyihada bu farq sezilmaydi. Lekin tez-tez yangilanadigan katta ilova bo'lsa — bu katta tezlik farqi.

React — kutubxona, framework emas

Bu muhim farq. React faqat UI qurishga yordam beradi. Routing, server bilan ishlash, forma validatsiya — bular React da yo'q. Buning uchun alohida kutubxonalar kerak:

Bu yaxshi narsa — siz faqat kerakli narsani olasiz. Angular kabi hamma narsani o'z ichiga olgan framework emas. Kichik loyihada kichik to'plam, katta loyihada katta to'plam.

React qachon kerak emas?

React hamma loyiha uchun emas.

Agar oddiy statik sahifa yozsangiz — blog, portfolio, landing page — HTML va CSS yetarli. JavaScript ham minimal kerak bo'ladi.

Agar bir-ikki joyda interaktivlik kerak bo'lsa — bir nechta qator vanilla JavaScript yetarli. React ni o'rnatish va o'rganish bu holda ortiqcha.

Agar SEO juda muhim bo'lsa va server rendering kerak bo'lsa — Next.js (React ustida qurilgan framework) yaxshiroq tanlov.

React kerak bo'lgan holat:

• Ko'p interaktiv UI — dashboard, admin panel, sozlamalar sahifasi
• Real-time ma'lumotlar — chat, bildirishnomalar, live grafik
• Katta jamoa — komponent arxitekturasi tartib beradi, bir kishi yozgan komponentni boshqasi ishlatadi

Xulosa

React uchta muammoni hal qiladi:

1. DOM ni qo'lda boshqarish — React o'zi boshqaradi
2. Ma'lumot va UI sinxronizatsiyasi — ma'lumot o'zgarganda UI avtomatik yangilanadi
3. Katta loyihada tartib — komponentlarga bo'lish

Virtual DOM — React ning tezlik siri. Haqiqiy DOM ni to'g'ridan-to'g'ri o'zgartirish o'rniga, avval xotirada taqqoslaydi, keyin faqat zarur o'zgarishlarni qiladi.

Keyingi dars

2-dars: Loyiha yaratish — Vite + React, tuzilishi, package.json