React Reconciler API: Global auditoriya uchun maxsus renderlar yaratish

React o'zining komponentlarga asoslangan arxitekturasi va samarali DOM manipulyatsiyasi bilan mashhur bo'lib, zamonaviy veb-ishlab chiqishning asosiy toshiga aylandi. Ammo uning imkoniyatlari brauzerdan ancha kengroqdir. React Reconciler API maxsus renderlar yaratish uchun kuchli mexanizmni taqdim etadi, bu esa dasturchilarga React'ning asosiy tamoyillarini deyarli har qanday maqsadli platformaga moslashtirish imkonini beradi. Ushbu blog posti React Reconciler API'ga chuqur kirib boradi, uning ichki ishlarini o'rganadi va global auditoriyaga xizmat qiladigan maxsus renderlar yaratish bo'yicha amaliy qo'llanmalarni taklif etadi.

React Reconciler API'ni tushunish

Aslida, React bu muvofiqlashtirish mexanizmi. U UI komponentlarining tavsiflarini (odatda JSX'da yozilgan) oladi va asosiy tasvirni (masalan, veb-brauzerdagi DOM) samarali ravishda yangilaydi. React Reconciler API sizga ushbu muvofiqlashtirish jarayoniga kirish va React'ning ma'lum bir platforma bilan qanday ishlashini belgilash imkonini beradi. Bu shuni anglatadiki, siz quyidagilarga mo'ljallangan renderlar yaratishingiz mumkin:

• Mahalliy mobil platformalar (React Native kabi)
• Server tomonida renderlash muhitlari
• WebGL asosidagi ilovalar
• Buyruq qatori interfeyslari
• Va yana ko'p narsalar…

Reconciler API, asosan, React o'zining ichki UI tasvirini platformaga xos operatsiyalarga qanday o'girishini nazorat qilish imkonini beradi. React'ni "miya", rendererni esa UI o'zgarishlarini bajaradigan "mushaklar" deb tasavvur qiling.

Asosiy tushunchalar va komponentlar

Amalga oshirishga kirishishdan oldin, ba'zi muhim tushunchalarni o'rganib chiqaylik:

1. Muvofiqlashtirish jarayoni

React'ning muvofiqlashtirish jarayoni ikkita asosiy bosqichni o'z ichiga oladi:

• Render bosqichi: Bu yerda React UI'da nima o'zgarishi kerakligini aniqlaydi. Bu komponentlar daraxtini aylanib chiqish va joriy holatni oldingi holat bilan solishtirishni o'z ichiga oladi. Bu bosqich maqsadli platforma bilan bevosita o'zaro aloqani o'z ichiga olmaydi.
• Commit bosqichi: Bu yerda React o'zgarishlarni UI'ga amalda tatbiq etadi. Aynan shu yerda sizning maxsus renderingiz ishga tushadi. U render bosqichida yaratilgan ko'rsatmalarni oladi va ularni platformaga xos operatsiyalarga o'giradi.

2. `Reconciler` obyekti

`Reconciler` API'ning yadrosidir. Siz `react-reconciler` paketidan `createReconciler()` funksiyasini chaqirib, reconciler nusxasini yaratasiz. Bu funksiya sizning renderingiz maqsadli platforma bilan qanday ishlashini belgilaydigan bir nechta konfiguratsiya parametrlarini talab qiladi. Ushbu parametrlar aslida React va sizning renderingiz o'rtasidagi shartnomani belgilaydi.

3. Host Konfiguratsiyasi

`hostConfig` obyekti sizning maxsus renderingizning yuragidir. Bu React reconciler elementlarni yaratish, xususiyatlarni yangilash, bolalarni qo'shish va matn tugunlarini boshqarish kabi operatsiyalarni bajarish uchun chaqiradigan usullarni o'z ichiga olgan katta obyektdir. `hostConfig` - bu siz React'ning maqsadli muhitingiz bilan qanday ishlashini belgilaydigan joy. Ushbu obyekt renderlash jarayonining turli jihatlarini boshqaradigan usullarni o'z ichiga oladi.

4. Fiber tugunlari

React komponentlarni ifodalash va muvofiqlashtirish jarayonida o'zgarishlarni kuzatib borish uchun Fiber tugunlari deb ataladigan ma'lumotlar strukturasidan foydalanadi. Sizning renderingiz `hostConfig` obyektida taqdim etilgan usullar orqali Fiber tugunlari bilan ishlaydi.

Oddiy maxsus render yaratish: Veb misoli

Asosiy tamoyillarni tushunish uchun juda oddiy misol yarataylik. Bu misol komponentlarni brauzer DOM'iga render qiladi, bu React'ning standart ishlashiga o'xshaydi, lekin Reconciler API'ning soddalashtirilgan namoyishini taqdim etadi.

            import React from 'react';
import ReactDOM from 'react-dom';
import Reconciler from 'react-reconciler';

// 1. Host konfiguratsiyasini aniqlash
const hostConfig = {
  // Host konfiguratsiya obyektini yaratish.
  createInstance(type, props, rootContainerInstance, internalInstanceHandle) {
    // Element yaratilganda chaqiriladi (masalan, <div>).
    const element = document.createElement(type);
    // Props'larni qo'llash
    Object.keys(props).forEach(prop => {
      if (prop !== 'children') {
        element[prop] = props[prop];
      }
    });
    return element;
  },

  createTextInstance(text, rootContainerInstance, internalInstanceHandle) {
    // Matn tugunlari uchun chaqiriladi.
    return document.createTextNode(text);
  },

  appendInitialChild(parentInstance, child) {
    // Boshlang'ich bola element qo'shilganda chaqiriladi.
    parentInstance.appendChild(child);
  },

  appendChild(parentInstance, child) {
    // Dastlabki o'rnatishdan keyin bola element qo'shilganda chaqiriladi.
    parentInstance.appendChild(child);
  },

  removeChild(parentInstance, child) {
    // Bola element o'chirilganda chaqiriladi.
    parentInstance.removeChild(child);
  },

  finalizeInitialChildren(instance, type, props, rootContainerInstance, internalInstanceHandle) {
    // Boshlang'ich bola elementlar qo'shilgandan so'ng chaqiriladi.
    return false;
  },

  prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, internalInstanceHandle) {
    // Yangilashdan oldin chaqiriladi. Yangilanish yukini qaytaring.
    const payload = [];
    for (const prop in oldProps) {
      if (prop !== 'children' && newProps[prop] !== oldProps[prop]) {
        payload.push(prop);
      }
    }
    for (const prop in newProps) {
      if (prop !== 'children' && !oldProps.hasOwnProperty(prop)) {
        payload.push(prop);
      }
    }
    return payload.length ? payload : null;
  },

  commitUpdate(instance, updatePayload, type, oldProps, newProps, rootContainerInstance, internalInstanceHandle) {
    // Yangilanishlarni qo'llash uchun chaqiriladi.
    updatePayload.forEach(prop => {
      instance[prop] = newProps[prop];
    });
  },

  commitTextUpdate(textInstance, oldText, newText) {
    // Matn tugunlarini yangilash
    textInstance.nodeValue = newText;
  },

  getRootHostContext() {
    // Ildiz kontekstini qaytaradi
    return {};
  },

  getChildContext() {
    // Bola elementlar kontekstini qaytaradi
    return {};
  },

  shouldSetTextContent(type, props) {
    // Bola elementlar matn bo'lishi kerakligini aniqlash.
    return false;
  },

  getPublicInstance(instance) {
    // Ref'lar uchun ommaviy nusxani qaytaradi.
    return instance;
  },

  prepareForCommit(containerInfo) {
    // Commit'dan oldin tayyorgarlik ishlarini bajaradi.
  },

  resetAfterCommit(containerInfo) {
    // Commit'dan keyin tozalash ishlarini bajaradi.
  },

  // ... ko'proq usullar (pastga qarang) ...
};

// 2. Reconciler'ni yaratish
const reconciler = Reconciler(hostConfig);

// 3. Maxsus ildiz yaratish
const CustomRenderer = {
  render(element, container, callback) {
    // Maxsus rendererimiz uchun konteyner yaratish
    const containerInstance = {
      type: 'root',
      children: [],
      node: container // Render qilinadigan DOM tuguni
    };
    const root = reconciler.createContainer(containerInstance, false, false);
    reconciler.updateContainer(element, root, null, callback);
    return root;
  },
  unmount(container, callback) {
    // Ilovani o'chirish
    const containerInstance = {
        type: 'root',
        children: [],
        node: container // Render qilinadigan DOM tuguni
      };
    const root = reconciler.createContainer(containerInstance, false, false);
    reconciler.updateContainer(null, root, null, callback);
  }
};

// 4. Maxsus rendererdan foydalanish
const element = <div style={{ color: 'blue' }}>Hello, World!</div>;
const container = document.getElementById('root');

CustomRenderer.render(element, container);

// Ilovani o'chirish uchun
// CustomRenderer.unmount(container);

            

              
                Copy
              
            
          

Tushuntirish:

1. Host Konfiguratsiyasi (`hostConfig`): Bu obyekt React'ning DOM bilan qanday ishlashini belgilaydi. Asosiy usullarga quyidagilar kiradi:
• `createInstance`: DOM elementlarini yaratadi (masalan, `document.createElement`).
• `createTextInstance`: Matn tugunlarini yaratadi.
• `appendChild`/`appendInitialChild`: Bola elementlarni qo'shadi.
• `removeChild`: Bola elementlarni o'chiradi.
• `commitUpdate`: Element xususiyatlarini yangilaydi.
2. Reconciler Yaratish (`Reconciler(hostConfig)`): Bu qator host konfiguratsiyamizni uzatib, reconciler nusxasini yaratadi.
3. Maxsus Ildiz (`CustomRenderer`): Bu obyekt renderlash jarayonini o'z ichiga oladi. U konteyner yaratadi, ildiz yaratadi va React elementini render qilish uchun `updateContainer`'ni chaqiradi.
4. Ilovani Renderlash: Keyin kod "Hello, World!" matniga ega oddiy `div` elementini 'root' ID'li DOM elementiga render qiladi.

Bu soddalashtirilgan misol, funksional jihatdan ReactDOM'ga o'xshash bo'lsa-da, React Reconciler API sizga renderlash jarayonini qanday boshqarish imkonini berishini aniq ko'rsatib beradi. Bu siz yanada rivojlangan renderlar yaratadigan asosiy freymvorkdir.

Batafsilroq Host Konfiguratsiya Usullari

`hostConfig` obyekti boy usullar to'plamini o'z ichiga oladi. Keling, React renderingizni sozlash uchun muhim bo'lgan ba'zi asosiy usullarni va ularning maqsadini ko'rib chiqaylik.

• `createInstance(type, props, rootContainerInstance, internalInstanceHandle)`: Bu yerda siz platformaga xos elementni yaratasiz (masalan, DOM'dagi `div` yoki React Native'dagi View). `type` DOM asosidagi renderlar uchun HTML teg nomi yoki React Native uchun 'View' kabi narsadir. `props` elementning atributlaridir (masalan, `style`, `className`). `rootContainerInstance` rendererning ildiz konteyneriga havola bo'lib, global resurslar yoki umumiy holatga kirish imkonini beradi. `internalInstanceHandle` - bu React tomonidan ishlatiladigan ichki dastak bo'lib, siz odatda u bilan bevosita ishlashingiz shart bo'lmaydi. Bu komponentni platformaning element yaratish funksionalligiga moslashtirish usulidir.
• `createTextInstance(text, rootContainerInstance, internalInstanceHandle)`: Matn tugunini yaratadi. Bu platformaning matn tuguni ekvivalentini yaratish uchun ishlatiladi (masalan, `document.createTextNode`). Argumentlar `createInstance`'ga o'xshaydi.
• `appendInitialChild(parentInstance, child)`: Dastlabki o'rnatish bosqichida bola elementni ota-ona elementga qo'shadi. Bu komponent birinchi marta render qilinganda chaqiriladi. Bola yangi yaratilgan bo'ladi va ota-ona bolani o'rnatish kerak bo'lgan joydir.
• `appendChild(parentInstance, child)`: Dastlabki o'rnatishdan keyin bola elementni ota-ona elementga qo'shadi. O'zgarishlar kiritilganda chaqiriladi.
• `removeChild(parentInstance, child)`: Bola elementni ota-ona elementdan olib tashlaydi. Bola komponentni olib tashlash uchun ishlatiladi.
• `finalizeInitialChildren(instance, type, props, rootContainerInstance, internalInstanceHandle)`: Bu usul komponentning dastlabki bola elementlari qo'shilgandan so'ng chaqiriladi. Bu bolalar qo'shilgandan keyin elementda har qanday yakuniy sozlash yoki tuzatishlarni amalga oshirish imkonini beradi. Siz odatda ko'pchilik renderlar uchun bu usuldan `false` (yoki `null`) qaytarasiz.
• `prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, internalInstanceHandle)`: Elementning eski va yangi xususiyatlarini solishtiradi va yangilanish yukini (o'zgargan xususiyat nomlari massivi) qaytaradi. Bu nima yangilanishi kerakligini aniqlashga yordam beradi.
• `commitUpdate(instance, updatePayload, type, oldProps, newProps, rootContainerInstance, internalInstanceHandle)`: Yangilanishlarni elementga qo'llaydi. Bu usul `prepareUpdate` tomonidan yaratilgan `updatePayload` asosida elementning xususiyatlarini amalda o'zgartirish uchun mas'uldir.
• `commitTextUpdate(textInstance, oldText, newText)`: Matn tugunining matn tarkibini yangilaydi.
• `getRootHostContext()`: Ilovaning ildizi uchun kontekst obyektini qaytaradi. Bu ma'lumotni bola elementlarga uzatish uchun ishlatiladi.
• `getChildContext()`: Bola element uchun kontekst obyektini qaytaradi.
• `shouldSetTextContent(type, props)`: Ma'lum bir element matn tarkibini o'z ichiga olishi kerakligini aniqlaydi.
• `getPublicInstance(instance)`: Elementning ommaviy nusxasini qaytaradi. Bu komponentni tashqi dunyoga ochish, uning usullari va xususiyatlariga kirish imkonini berish uchun ishlatiladi.
• `prepareForCommit(containerInfo)`: Rendererga commit bosqichidan oldin har qanday tayyorgarlik ishlarini bajarishga imkon beradi. Masalan, siz animatsiyalarni vaqtincha o'chirib qo'yishni xohlashingiz mumkin.
• `resetAfterCommit(containerInfo)`: Commit bosqichidan keyin tozalash vazifalarini bajaradi. Masalan, siz animatsiyalarni qayta yoqishingiz mumkin.
• `supportsMutation`: Renderer mutatsiya operatsiyalarini qo'llab-quvvatlashini bildiradi. Bu ko'pchilik renderlar uchun `true` qilib o'rnatiladi, bu esa renderer elementlarni yaratishi, yangilashi va o'chirishi mumkinligini ko'rsatadi.
• `supportsPersistence`: Renderer doimiylik operatsiyalarini qo'llab-quvvatlashini bildiradi. Bu ko'plab renderlar uchun `false` bo'ladi, lekin agar renderlash muhiti keshiranje va rehidratsiya kabi xususiyatlarni qo'llab-quvvatlasa, `true` bo'lishi mumkin.
• `supportsHydration`: Renderer hidratsiya operatsiyalarini qo'llab-quvvatlashini bildiradi, ya'ni u butun elementlar daraxtini qayta yaratmasdan mavjud elementlarga voqea tinglovchilarini biriktirishi mumkin.

Ushbu usullarning har birini amalga oshirish React'ni maqsadli platformangizga moslashtirish uchun juda muhimdir. Bu yerdagi tanlovlar sizning React komponentlaringiz platformaning elementlariga qanday o'girilishini va shunga mos ravishda yangilanishini belgilaydi.

Amaliy misollar va global qo'llanmalar

Keling, React Reconciler API'ning global kontekstdagi ba'zi amaliy qo'llanmalarini ko'rib chiqaylik:

1. React Native: Kross-platformali mobil ilovalar yaratish

React Native eng mashhur misoldir. U React komponentlarini iOS va Android uchun mahalliy UI komponentlariga aylantirish uchun maxsus rendererdan foydalanadi. Bu dasturchilarga bitta kod bazasini yozish va ikkala platformaga ham joylashtirish imkonini beradi. Ushbu kross-platforma qobiliyati, ayniqsa, xalqaro bozorlarga mo'ljallangan kompaniyalar uchun juda qimmatlidir. Ishlab chiqish va texnik xizmat ko'rsatish xarajatlari kamayadi, bu esa tezroq joylashtirish va global qamrovga olib keladi.

2. Server tomonida renderlash (SSR) va Statik sayt generatsiyasi (SSG)

Next.js va Gatsby kabi freymvorklar SSR va SSG uchun React'dan foydalanadi, bu esa SEO'ni yaxshilash va sahifaning dastlabki yuklanishini tezlashtirish imkonini beradi. Ushbu freymvorklar ko'pincha server tomonida React komponentlarini HTML'ga render qilish uchun maxsus renderlardan foydalanadi, so'ngra bu HTML mijozga yuboriladi. Bu global SEO va qulaylik uchun foydalidir, chunki dastlabki kontent server tomonida renderlanadi, bu esa uni qidiruv tizimlari tomonidan skanerlanadigan qiladi. Yaxshilangan SEO'ning foydasi barcha mamlakatlardan organik trafikni oshirishi mumkin.

3. Maxsus UI to'plamlari va dizayn tizimlari

Tashkilotlar o'zlarining UI to'plamlari yoki dizayn tizimlari uchun maxsus renderlar yaratish uchun Reconciler API'dan foydalanishlari mumkin. Bu ularga turli platformalar yoki ilovalarda izchil bo'lgan komponentlar yaratish imkonini beradi. Bu brendning izchilligini ta'minlaydi, bu esa kuchli global brend identifikatorini saqlab qolish uchun juda muhimdir.

4. O'rnatilgan tizimlar va IoT

Reconciler API React'dan o'rnatilgan tizimlar va IoT qurilmalarida foydalanish imkoniyatlarini ochadi. Aqlli uy qurilmasi yoki sanoat boshqaruv paneli uchun UI'ni React ekotizimidan foydalanib yaratishni tasavvur qiling. Bu hali rivojlanayotgan soha, ammo kelajakdagi ilovalar uchun katta salohiyatga ega. Bu UI ishlab chiqishda yanada deklarativ va komponentlarga asoslangan yondashuvni ta'minlaydi, bu esa ishlab chiqish samaradorligini oshiradi.

5. Buyruq qatori interfeysi (CLI) ilovalari

Kamroq tarqalgan bo'lsa-da, React komponentlarini CLI ichida ko'rsatish uchun maxsus renderlar yaratilishi mumkin. Bu interaktiv CLI vositalarini yaratish yoki terminalda vizual natijalarni taqdim etish uchun ishlatilishi mumkin. Masalan, loyihada dunyoning turli burchaklarida joylashgan ko'plab turli ishlab chiquvchilar jamoalari tomonidan ishlatiladigan global CLI vositasi bo'lishi mumkin.

Qiyinchiliklar va e'tiborga olinadigan jihatlar

Maxsus renderlarni ishlab chiqish o'zining qiyinchiliklari bilan birga keladi:

• Murakkablik: React Reconciler API kuchli, lekin murakkab. U React'ning ichki ishlashini va maqsadli platformani chuqur tushunishni talab qiladi.
• Ishlash samaradorligi: Ishlash samaradorligini optimallashtirish juda muhim. Siz React operatsiyalarini samarali platformaga xos kodga qanday aylantirishni diqqat bilan ko'rib chiqishingiz kerak.
• Texnik xizmat ko'rsatish: Maxsus rendererni React yangilanishlari bilan doimo yangilab borish qiyin bo'lishi mumkin. React doimiy ravishda rivojlanmoqda, shuning uchun siz renderingizni yangi xususiyatlar va o'zgarishlarga moslashtirishga tayyor bo'lishingiz kerak.
• Nosozliklarni tuzatish: Maxsus renderlarni tuzatish standart React ilovalarini tuzatishdan ko'ra qiyinroq bo'lishi mumkin.

Global auditoriya uchun maxsus render yaratayotganda, quyidagi omillarni hisobga oling:

• Lokalizatsiya va internatsionalizatsiya (i18n): Renderingiz turli tillar, belgilar to'plamlari va sana/vaqt formatlarini qo'llab-quvvatlay olishiga ishonch hosil qiling.
• Qulaylik (a11y): Xalqaro qulaylik standartlariga rioya qilgan holda, UI'ngizni nogironligi bo'lgan odamlar uchun foydalanishga yaroqli qilish uchun qulaylik xususiyatlarini joriy eting.
• Turli qurilmalar uchun ishlash samaradorligini optimallashtirish: Dunyo bo'ylab qurilmalarning turli xil ishlash imkoniyatlarini hisobga oling. Renderingizni kam quvvatli qurilmalar uchun, ayniqsa yuqori darajadagi uskunalar bilan ta'minlanmagan hududlarda optimallashtiring.
• Tarmoq sharoitlari: Sekin va ishonchsiz tarmoq ulanishlari uchun optimallashtiring. Bu keshiranje, progressiv yuklash va boshqa texnikalarni joriy etishni o'z ichiga olishi mumkin.
• Madaniy jihatlar: Dizayn va kontentdagi madaniy farqlarga e'tiborli bo'ling. Ba'zi madaniyatlarda haqoratli yoki noto'g'ri talqin qilinishi mumkin bo'lgan vizual yoki tildan foydalanishdan saqlaning.

Eng yaxshi amaliyotlar va amaliy tushunchalar

Maxsus render yaratish va unga xizmat ko'rsatish bo'yicha ba'zi eng yaxshi amaliyotlar:

• Oddiydan boshlang: Minimal rendererdan boshlang va asta-sekin xususiyatlarni qo'shing.
• Puxta sinovdan o'tkazish: Renderingiz turli stsenariylarda kutilganidek ishlashini ta'minlash uchun keng qamrovli testlar yozing.
• Hujjatlashtirish: Renderingizni puxta hujjatlashtiring. Bu boshqalarga uni tushunish va ishlatishda yordam beradi.
• Ishlash samaradorligini profillash: Ishlash samaradorligidagi to'siqlarni aniqlash va bartaraf etish uchun ishlash samaradorligini profillash vositalaridan foydalaning.
• Jamiyat bilan hamkorlik: React hamjamiyati bilan aloqada bo'ling. Ishingizni baham ko'ring, savollar bering va boshqalardan o'rganing.
• TypeScript'dan foydalaning: TypeScript xatolarni erta aniqlashga va renderingizning texnik xizmat ko'rsatish qulayligini yaxshilashga yordam beradi.
• Modulli dizayn: Renderingizni modulli tarzda loyihalashtiring, bu esa xususiyatlarni qo'shish, olib tashlash va yangilashni osonlashtiradi.
• Xatolarni qayta ishlash: Kutilmagan vaziyatlarni chiroyli tarzda hal qilish uchun mustahkam xatolarni qayta ishlashni joriy eting.

Amaliy tushunchalar:

• `react-reconciler` paketi va `hostConfig` parametrlari bilan tanishing. Tushunchalarga ega bo'lish uchun mavjud renderlarning (masalan, React Native rendereri) manba kodini o'rganing.
• Oddiy platforma yoki UI to'plami uchun kontseptsiya isbotini (proof-of-concept) yarating. Bu sizga asosiy tushunchalar va ish jarayonlarini tushunishga yordam beradi.
• Ishlab chiqish jarayonining boshida ishlash samaradorligini optimallashtirishga ustuvor ahamiyat bering. Bu keyinchalik vaqt va kuchingizni tejashga yordam beradi.
• Maqsadli muhitingiz uchun maxsus platformadan foydalanishni o'ylab ko'ring. Masalan, React Native uchun ko'plab kross-platforma sozlash va konfiguratsiya ehtiyojlarini hal qilish uchun Expo platformasidan foydalaning.
• Progressiv takomillashtirish kontseptsiyasini qabul qiling va turli tarmoq sharoitlarida izchil tajribani ta'minlang.

Xulosa

React Reconciler API React'ni turli platformalarga moslashtirish uchun kuchli va moslashuvchan yondashuvni taqdim etadi, bu esa dasturchilarga haqiqatan ham global auditoriyaga erishish imkonini beradi. Tushunchalarni anglab, renderingizni diqqat bilan loyihalashtirib va eng yaxshi amaliyotlarga rioya qilib, siz React ekotizimining to'liq salohiyatini ochishingiz mumkin. React'ning renderlash jarayonini sozlash qobiliyati sizga UI'ni veb-brauzerlardan tortib mahalliy mobil ilovalar, o'rnatilgan tizimlar va undan tashqaridagi turli xil muhitlarga moslashtirish imkonini beradi. Dunyo sizning tuvilingiz; har qanday ekranda o'z tasavvuringizni chizish uchun React Reconciler API'dan foydalaning.