React o’zgarishlarni qanday paint qiladi? Render va Commit jarayonlari haqida

React’da komponentalar ekranda ko’rinishidan oldin “render” va “commit” bosqichlaridan o’tadi. Bu jarayonni bilish, kodingiz qanday ishlashini anglashga yordam beradi.

React rendering jarayonini restorandagi xizmatga analogiya qilsa bo‘ladi: mijoz buyurtma beradi, oshpaz tayyorlaydi va keyin buyurtma stolga olib kelinadi. Bu yerda:

1. Trigger: Tizimni ishga tushirish / Buyurtma berish
2. Render: Komponentni tayyorlash / Oshpaz ovqatni tayyorlashi
3. Commit: DOMga qo‘llash / Stolga yetkazish

1. Trigger - renderni tayyorlash

Komponent quyidagi hollarda render qilinadi:

App ishga tushganda

Bu holatda React createRoot funksiyasi orqali DOM elementga connect qilgan holatda root komponentni render qiladi. Misol uchun:

import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root"));
root.render(<Image />);

Agar root.render() kod blokini olib tashlasangiz, komponent render bo’lmaydi va ko‘rinmaydi.

State o‘zgarishi sababli re-render

Komponent renderingdan keyin, agar state setState yoki React Hooks’dagi setX orqali yangilansa, React yangi renderni queue’ga (navbatga) qo‘yadi.

2. React komponentlarni render qilishi

React komponentani trigger bo’lganidan keyin, komponentani chaqirib, ekranda nima ko’rinishi kerakligini aniqlaydi. Manashu jarayonga “Render” deyiladi.

• Dastlabki renderda root komponent chaqiriladi.
• Keyingi renderlarda faqatgina state yangilanishiga sabab bo’lgan komponent chaqiriladi.
• Agar bu komponent boshqa child yoki nested komponentlarni return qilsa, ular ham rekursiv tarzda render qilinadi.

Masalan Gallery() komponenti ichida bir nechta Image() komponenti bo’lsa, React barcha kerakli komponentlarni render qiladi. React rendering jarayonida “virtual” tasvirni yaratadi. Bu orqali ekranda nima ko’rinishi yoki ko’rinmasligini belgilaydi.

3. Commit — o’zgarishlarni DOM’ga qo’llash

Rendering bosqichi yakunlangach, React DOM’ni yangilaydi:

• Initial render’da appendChild() kabi methodlar bilan yangi DOM elementlar qo’shiladi.
• Qayta render bo’lganida, React faqatgina o’zgargan joylarni aniqlaydi va DOM’ga qo’shadi.

React DOM’ni faqat yangi render bilan avvalgi render farq qilsagina o’zgartiradi. Masalan:

function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

Agar time har sekund yangilansa, React faqat <h1> elementini yangilaydi, lekin <input> elementini o‘chirib qayta yaratmaydi.

Browser paint

React DOM’ni yangilaganidan keyin, brauzer sahifadagi ko‘rinadigan qismlarni qayta chizib, foydalanuvchiga yangilangan ko‘rinishni ko‘rsatadi.

Xulosa

React har qanday o’zgarishlarni ko’rsatish uchun uch bosqichli ishni amalga oshiradi: Trigger → Render → Commit

React.dev Ingiliz tilida o'qish