React Portallarini o'zlashtirish: DOM iyerarxiyasidan tashqarida komponentlarni render qilish

Zamonaviy veb-dasturlashning keng olamida React butun dunyo bo'ylab son-sanoqsiz dasturchilarga dinamik va yuqori interaktiv foydalanuvchi interfeyslarini yaratish imkoniyatini berdi. Uning komponentlarga asoslangan arxitekturasi murakkab UI tuzilmalarini soddalashtirib, qayta foydalanish va qo'llab-quvvatlash qulayligini oshiradi. Biroq, Reactning nafis dizayniga qaramay, dasturchilar ba'zan standart komponentlarni render qilish yondashuvi – komponentlar o'zlarining chiqish ma'lumotlarini ota-komponentning DOM elementi ichida bola element sifatida render qilishi – jiddiy cheklovlarga olib keladigan holatlarga duch kelishadi.

Barcha boshqa tarkibdan yuqorida paydo bo'lishi kerak bo'lgan modal dialog, global suzuvchi bildirishnoma banneri yoki ota-konteyner chegaralaridan chiqib ketishi kerak bo'lgan kontekst menyusini ko'rib chiqing. Bunday vaziyatlarda, komponentlarni to'g'ridan-to'g'ri ota-komponentning DOM iyerarxiyasi ichida render qilishning an'anaviy usuli uslublar bilan bog'liq qiyinchiliklarga (masalan, z-index ziddiyatlari), joylashuv muammolariga va hodisalarning tarqalishidagi murakkabliklarga olib kelishi mumkin. Aynan shu yerda React Portallari React dasturchisining arsenalida kuchli va ajralmas vosita sifatida maydonga chiqadi.

Ushbu keng qamrovli qo'llanma React Portal andozasini chuqur o'rganib, uning asosiy tushunchalari, amaliy qo'llanilishi, ilg'or jihatlari va eng yaxshi amaliyotlarini ko'rib chiqadi. Siz tajribali React dasturchisi bo'lasizmi yoki endigina yo'lingizni boshlayapsizmi, portallarni tushunish sizga haqiqatan ham mustahkam va global miqyosda qulay foydalanuvchi tajribalarini yaratish uchun yangi imkoniyatlarni ochib beradi.

Asosiy muammoni tushunish: DOM iyerarxiyasining cheklovlari

React komponentlari, sukut bo'yicha, o'z chiqish ma'lumotlarini ota-komponentining DOM tuguniga render qiladi. Bu React komponentlari daraxti va brauzerning DOM daraxti o'rtasida to'g'ridan-to'g'ri bog'liqlikni yaratadi. Ushbu munosabat intuitiv va odatda foydali bo'lsa-da, komponentning vizual ko'rinishi ota-komponent cheklovlaridan ozod bo'lishi kerak bo'lganda, bu to'siqqa aylanishi mumkin.

Keng tarqalgan stsenariylar va ularning og'riqli nuqtalari:

• Modal oynalar, dialoglar va laytbokslar: Bu elementlar odatda komponentlar daraxtida qayerda aniqlanganligidan qat'i nazar, butun ilovani qoplashi kerak. Agar modal oyna chuqur joylashgan bo'lsa, uning CSS `z-index` qiymati ota-elementlar tomonidan cheklanishi mumkin, bu esa uning har doim yuqorida paydo bo'lishini ta'minlashni qiyinlashtiradi. Bundan tashqari, ota-elementdagi `overflow: hidden` xususiyati modalning bir qismini kesib qo'yishi mumkin.
• Maslahatlar va qalqib chiquvchi oynalar: Modal oynalarga o'xshab, maslahatlar yoki qalqib chiquvchi oynalar ko'pincha elementga nisbatan joylashishi, ammo uning cheklangan ota-konteyner chegaralaridan tashqarida paydo bo'lishi kerak. Ota-elementdagi `overflow: hidden` xususiyati maslahatni kesib qo'yishi mumkin.
• Bildirishnomalar va "Toast" xabarlari: Ushbu global xabarlar ko'pincha ko'rish oynasining yuqori yoki pastki qismida paydo bo'lib, ularni ishga tushirgan komponentdan mustaqil ravishda render qilinishini talab qiladi.
• Kontekst menyulari: Sichqonchaning o'ng tugmasi bosilganda paydo bo'ladigan menyular yoki maxsus kontekst menyulari foydalanuvchi bosgan joyda aniq paydo bo'lishi va to'liq ko'rinishni ta'minlash uchun cheklangan ota-konteynerlardan chiqib ketishi kerak.
• Uchinchi tomon integratsiyalari: Ba'zan siz React komponentini React ildizidan tashqarida, tashqi kutubxona yoki eski kod tomonidan boshqariladigan DOM tuguniga render qilishingiz kerak bo'lishi mumkin.

Ushbu stsenariylarning har birida, faqat standart React render qilish usulidan foydalanib kerakli vizual natijaga erishishga urinish, odatda, murakkab CSS, haddan tashqari ko'p `z-index` qiymatlari yoki saqlash va kengaytirish qiyin bo'lgan murakkab joylashuv mantig'iga olib keladi. Aynan shu yerda React Portallari toza va idiomatik yechimni taklif qiladi.

React Portal o'zi nima?

React Portal bola elementlarni ota-komponentning DOM iyerarxiyasidan tashqarida mavjud bo'lgan DOM tuguniga render qilishning birinchi darajali usulini ta'minlaydi. Boshqa jismoniy DOM elementiga render qilinishiga qaramay, portal tarkibi hali ham React komponentlari daraxtida to'g'ridan-to'g'ri bola elementdek harakat qiladi. Bu shuni anglatadiki, u bir xil React kontekstini (masalan, Context API qiymatlarini) saqlaydi va Reactning hodisalarning tarqalishi tizimida ishtirok etadi.

React Portallarining asosi `ReactDOM.createPortal()` metodida yotadi. Uning imzosi sodda:

ReactDOM.createPortal(child, container)

• child: Element, satr yoki fragment kabi har qanday render qilinadigan React bola elementi.
• container: Hujjatda allaqachon mavjud bo'lgan DOM elementi. Bu `child` render qilinadigan maqsadli DOM tugunidir.

Siz `ReactDOM.createPortal()` dan foydalanganingizda, React belgilangan `container` DOM tuguni ostida yangi virtual DOM quyi daraxtini yaratadi. Biroq, bu yangi quyi daraxt mantiqan portalni yaratgan komponent bilan bog'liq bo'lib qoladi. Ushbu "mantiqiy bog'liqlik" hodisalarning tarqalishi va kontekstning nima uchun kutilganidek ishlashini tushunishning kalitidir.

Birinchi React Portalingizni sozlash: Oddiy modal oyna misoli

Keling, keng tarqalgan holatni ko'rib chiqaylik: modal dialog yaratish. Portalni amalga oshirish uchun avvalo sizning `index.html` faylingizda (yoki ilovangizning ildiz HTML fayli joylashgan joyda) portal tarkibi render qilinadigan maqsadli DOM elementiga ehtiyoj bor.

1-qadam: Maqsadli DOM tugunini tayyorlash

O'zingizning `public/index.html` faylingizni (yoki unga tengdosh faylni) oching va yangi `div` elementini qo'shing. Buni yopiluvchi `body` tegidan oldin, asosiy React ilovangiz ildizidan tashqarida qo'shish keng tarqalgan amaliyotdir.

            
<body>
  <!-- Sizning asosiy React ilovangizning ildizi -->
  <div id="root"></div>

  <!-- Portal tarkibimiz shu yerda render qilinadi -->
  <div id="modal-root"></div>
</body>

            

              
                Copy
              
            
          

2-qadam: Portal komponentini yaratish

Endi, portaldan foydalanadigan oddiy modal komponentini yaratamiz.

            
// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // Komponent o'rnatilganda divni modal ildiziga qo'shing
    modalRoot.appendChild(el.current);

    // Tozalash: komponent o'chirilganda divni olib tashlang
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // Bo'sh bog'liqliklar massivi bu kodning o'rnatilganda bir marta va o'chirilganda bir marta ishlashini anglatadi

  if (!isOpen) {
    return null; // Agar modal oyna ochiq bo'lmasa, hech narsa render qilmang
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // U yuqorida turishini ta'minlang
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>Modalni yopish</button>
      </div>
    </div>,
    el.current // Modal tarkibini biz yaratgan, modalRoot ichidagi divga render qiling
  );
};

export default Modal;

            

              
                Copy
              
            
          

Ushbu misolda biz har bir modal nusxasi uchun yangi `div` elementi (`el.current`) yaratamiz va uni `modal-root`ga qo'shamiz. Bu bizga, agar kerak bo'lsa, bir nechta modal oynalarni bir-birining hayot aylanishi yoki tarkibiga xalaqit bermasdan boshqarish imkonini beradi. Haqiqiy modal tarkibi (orqa fon va oq quti) keyin `ReactDOM.createPortal` yordamida ushbu `el.current` ichiga render qilinadi.

3-qadam: Modal komponentidan foydalanish

            
// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Modal.js shu katalogda deb taxmin qilinadi

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>React Portal misoli</h1>
      <p>Ushbu tarkib asosiy ilova daraxtining bir qismidir.</p>
      <button onClick={handleOpenModal}>Global modalni ochish</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>Portaldan salom!</h3>
        <p>Ushbu modal tarkibi 'root' div dan tashqarida render qilingan, ammo hali ham React tomonidan boshqariladi.</p>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

`Modal` komponenti `App` komponenti ichida (`root` divi ichida) render qilingan bo'lsa-da, uning haqiqiy DOM chiqishi `modal-root` divi ichida paydo bo'ladi. Bu modalning `z-index` yoki `overflow` muammolarisiz hamma narsani qoplashini ta'minlaydi, shu bilan birga Reactning holat boshqaruvi va komponent hayot aylanishidan foyda oladi.

React Portallarining asosiy qo'llanilish holatlari va ilg'or ilovalari

Modal oynalar eng yaxshi misol bo'lsa-da, React Portallarining foydaliligi oddiy qalqib chiquvchi oynalardan ancha kengroqdir. Keling, portallar nafis yechimlarni taqdim etadigan murakkabroq stsenariylarni o'rganamiz.

1. Mustahkam modal oynalar va dialog tizimlari

Ko'rib turganingizdek, portallar modalni amalga oshirishni soddalashtiradi. Asosiy afzalliklar quyidagilarni o'z ichiga oladi:

• Kafolatlangan Z-Index: `body` darajasida (yoki maxsus yuqori darajali konteynerda) render qilish orqali, modal oynalar har doim chuqur joylashgan CSS kontekstlari bilan kurashmasdan eng yuqori `z-index`ga erisha oladi. Bu ularning qaysi komponent tomonidan ishga tushirilganligidan qat'i nazar, doimo barcha boshqa tarkibdan yuqorida paydo bo'lishini ta'minlaydi.
• Overflow'dan qochish: `overflow: hidden` yoki `overflow: auto` xususiyatiga ega ota-elementlar endi modal tarkibini kesib qo'ymaydi. Bu katta yoki dinamik tarkibga ega modal oynalar uchun juda muhimdir.
• Qulay foydalanish imkoniyati (A11y): Portallar qulay modal oynalar yaratish uchun asosiy hisoblanadi. DOM tuzilmasi alohida bo'lishiga qaramay, mantiqiy React daraxti aloqasi fokusni to'g'ri boshqarish (fokusni modal ichida ushlab turish) va ARIA atributlarini (masalan, `aria-modal`) to'g'ri qo'llash imkonini beradi. `react-focus-lock` yoki `@reach/dialog` kabi kutubxonalar bu maqsadda portallardan keng foydalanadi.

2. Dinamik maslahatlar, qalqib chiquvchi oynalar va ochiladigan menyular

Modal oynalarga o'xshab, bu elementlar ko'pincha trigger elementi yonida paydo bo'lishi, ammo cheklangan ota-komponent joylashuvidan chiqib ketishi kerak.

• Aniq joylashuv: Siz trigger elementining ko'rish oynasiga nisbatan pozitsiyasini hisoblashingiz va keyin JavaScript yordamida maslahatni mutlaq joylashtirishingiz mumkin. Uni portal orqali render qilish, u oraliq ota-elementdagi `overflow` xususiyati tomonidan kesilmasligini ta'minlaydi.
• Joylashuv siljishlaridan qochish: Agar maslahat ichki (inline) render qilinsa, uning mavjudligi ota-elementida joylashuv siljishlariga sabab bo'lishi mumkin edi. Portallar uning render qilinishini izolyatsiya qilib, kutilmagan qayta oqimlarning (reflows) oldini oladi.

3. Global bildirishnomalar va "Toast" xabarlari

Ilovalar ko'pincha bloklanmaydigan, vaqtinchalik xabarlarni (masalan, "Mahsulot savatga qo'shildi!", "Tarmoq ulanishi yo'qoldi") ko'rsatish tizimini talab qiladi.

• Markazlashtirilgan boshqaruv: Bitta "ToastProvider" komponenti "toast" xabarlari navbatini boshqarishi mumkin. Bu provayder portal yordamida barcha xabarlarni `body` ning yuqori yoki pastki qismidagi maxsus `div`ga render qilishi mumkin, bu esa ularning qayerda ishga tushirilganligidan qat'i nazar, doimo ko'rinadigan va bir xil uslubda bo'lishini ta'minlaydi.
• Izchillik: Murakkab ilovadagi barcha bildirishnomalarning bir xil ko'rinishga va xatti-harakatga ega bo'lishini ta'minlaydi.

4. Maxsus kontekst menyulari

Foydalanuvchi elementni sichqonchaning o'ng tugmasi bilan bosganda, ko'pincha kontekst menyusi paydo bo'ladi. Ushbu menyu kursor joylashuvida aniq joylashishi va boshqa barcha tarkibni qoplashi kerak. Portallar bu yerda idealdir:

• Menyu komponenti portal orqali render qilinishi mumkin, bunda bosish koordinatalari qabul qilinadi.
• U bosilgan elementning ota-komponent iyerarxiyasi bilan cheklanmagan holda, kerakli joyda aniq paydo bo'ladi.

5. Uchinchi tomon kutubxonalari yoki React bo'lmagan DOM elementlari bilan integratsiya

Tasavvur qiling, sizda mavjud ilova bor, uning UI qismi eski JavaScript kutubxonasi yoki o'z DOM tugunlaridan foydalanadigan maxsus xaritalash yechimi tomonidan boshqariladi. Agar siz bunday tashqi DOM tuguni ichida kichik, interaktiv React komponentini render qilmoqchi bo'lsangiz, `ReactDOM.createPortal` sizning ko'prigingiz bo'ladi.

• Siz uchinchi tomon tomonidan boshqariladigan hududda maqsadli DOM tugunini yaratishingiz mumkin.
• So'ngra, React UI ni o'sha maxsus DOM tuguniga kiritish uchun portal bilan React komponentidan foydalaning, bu esa Reactning deklarativ kuchini ilovangizning React bo'lmagan qismlarini yaxshilashga imkon beradi.

React Portallaridan foydalanishda ilg'or mulohazalar

Portallar murakkab renderlash muammolarini hal qilsa-da, ulardan samarali foydalanish va keng tarqalgan xatolardan qochish uchun ularning boshqa React xususiyatlari va DOM bilan qanday o'zaro ta'sir qilishini tushunish juda muhimdir.

1. Hodisalarning tarqalishi: Muhim farq

React Portallarining eng kuchli va ko'pincha noto'g'ri tushuniladigan jihatlaridan biri bu ularning hodisalarning tarqalishiga oid xatti-harakatidir. Mutlaqo boshqa DOM tuguniga render qilingan bo'lishiga qaramay, portal ichidagi elementlardan kelib chiqqan hodisalar, go'yo portal yo'qdek, React komponentlari daraxti orqali yuqoriga tarqaladi. Buning sababi, Reactning hodisalar tizimi sintetik bo'lib, ko'p hollarda mahalliy DOM hodisalarining tarqalishidan mustaqil ishlaydi.

• Bu nimani anglatadi: Agar sizda portal ichida tugma bo'lsa va bu tugmaning bosish hodisasi yuqoriga tarqalsa, u DOM ota-elementida emas, balki React daraxtidagi mantiqiy ota-komponentlaridagi har qanday `onClick` ishlovchilarini ishga tushiradi.
• Misol: Agar sizning `Modal` komponentingiz `App` tomonidan render qilinsa, `Modal` ichidagi bosish hodisasi, agar sozlanagan bo'lsa, `App`ning hodisa ishlovchilariga tarqaladi. Bu juda foydalidir, chunki u Reactda kutgan intuitiv hodisalar oqimini saqlab qoladi.
• Mahalliy DOM hodisalari: Agar siz mahalliy DOM hodisa tinglovchilarini to'g'ridan-to'g'ri biriktirsangiz (masalan, `document.body`da `addEventListener` yordamida), ular mahalliy DOM daraxtiga ergashadi. Biroq, standart React sintetik hodisalari (`onClick`, `onChange` va hokazo) uchun Reactning mantiqiy daraxti ustunlik qiladi.

2. Context API va Portallar

Context API — bu Reactning qiymatlarni (masalan, mavzular, foydalanuvchi autentifikatsiyasi holati) prop-drilling qilmasdan komponentlar daraxti bo'ylab almashish mexanizmi. Yaxshiyamki, Kontekst portallar bilan muammosiz ishlaydi.

• Portal orqali render qilingan komponent hali ham o'zining mantiqiy React komponentlari daraxtidagi ota-bobolari bo'lgan kontekst provayderlariga kirish huquqiga ega bo'ladi.
• Bu shuni anglatadiki, siz `App` komponentingizning yuqori qismida `ThemeProvider`ga ega bo'lishingiz mumkin va portal orqali render qilingan modal oyna hali ham o'sha mavzu kontekstini meros qilib oladi, bu esa portal tarkibi uchun global uslublash va holat boshqaruvini soddalashtiradi.

3. Portallar bilan qulay foydalanish imkoniyati (A11y)

Qulay foydalanuvchi interfeyslarini yaratish global auditoriya uchun juda muhimdir va portallar, ayniqsa modal oynalar va dialoglar uchun maxsus A11y mulohazalarini keltirib chiqaradi.

• Fokusni boshqarish: Modal oyna ochilganda, foydalanuvchilarning (ayniqsa klaviatura va ekran o'qish vositalaridan foydalanuvchilarning) uning orqasidagi elementlar bilan o'zaro ta'sir qilishining oldini olish uchun fokus modal ichida ushlanib qolishi kerak. Modal yopilganda, fokus uni ishga tushirgan elementga qaytishi kerak. Bu ko'pincha ehtiyotkorlik bilan JavaScript boshqaruvini talab qiladi (masalan, fokuslanadigan elementlarni boshqarish uchun `useRef`dan foydalanish yoki `react-focus-lock` kabi maxsus kutubxonadan foydalanish).
• Klaviatura navigatsiyasi: `Esc` tugmasi modalni yopishini va `Tab` tugmasi fokusni faqat modal ichida aylantirishini ta'minlang.
• ARIA atributlari: Portal tarkibingizning maqsadi va tuzilishini yordamchi texnologiyalarga yetkazish uchun `role="dialog"`, `aria-modal="true"`, `aria-labelledby` va `aria-describedby` kabi ARIA rollari va xususiyatlaridan to'g'ri foydalaning.

4. Uslublash muammolari va yechimlari

Portallar DOM iyerarxiyasi muammolarini hal qilsa-da, ular barcha uslublash murakkabliklarini sehrli tarzda hal qilmaydi.

• Global va chegaralangan uslublar: Portal tarkibi global kirish mumkin bo'lgan DOM tuguniga (masalan, `body` yoki `modal-root`) render qilinganligi sababli, har qanday global CSS qoidalari unga ta'sir qilishi mumkin.
• CSS-in-JS va CSS Modullari: Ushbu yechimlar uslublarni inkapsulyatsiya qilishga va kutilmagan sizib chiqishlarning oldini olishga yordam beradi, bu ularni portal tarkibini uslublashda ayniqsa foydali qiladi. Styled Components, Emotion yoki CSS Modullari noyob sinf nomlarini yaratishi mumkin, bu esa sizning modal uslublaringiz ilovangizning boshqa qismlari bilan ziddiyatga kirmasligini ta'minlaydi, garchi ular global render qilinsa ham.
• Mavzulashtirish: Context API bilan aytib o'tilganidek, mavzulashtirish yechimingiz (bu CSS o'zgaruvchilari, CSS-in-JS mavzulari yoki kontekstga asoslangan mavzulashtirish bo'lsin) portal bola elementlariga to'g'ri tarqalishini ta'minlang.

5. Server Tomonida Render qilish (SSR) mulohazalari

Agar ilovangiz Server Tomonida Render qilishdan (SSR) foydalansa, portallarning qanday ishlashiga e'tiborli bo'lishingiz kerak.

• `ReactDOM.createPortal` `container` argumenti sifatida DOM elementini talab qiladi. SSR muhitida dastlabki render serverda sodir bo'ladi, u yerda brauzer DOM mavjud emas.
• Bu shuni anglatadiki, portallar odatda serverda render qilinmaydi. Ular faqat JavaScript mijoz tomonida bajarilgandan keyin "gidratlanadi" yoki render qilinadi.
• Dastlabki server renderida mutlaqo mavjud bo'lishi kerak bo'lgan tarkib uchun (masalan, SEO yoki muhim birinchi bo'yash ishlashi uchun), portallar mos emas. Biroq, odatda biror harakat ularni ishga tushirmaguncha yashirin bo'lgan modal oynalar kabi interaktiv elementlar uchun bu kamdan-kam muammo tug'diradi. Komponentlaringizning serverda portal `container`ning yo'qligini uning mavjudligini tekshirish orqali (masalan, `document.getElementById('modal-root')`) osonlik bilan qabul qilishini ta'minlang.

6. Portallardan foydalanuvchi komponentlarni testlash

Portal orqali render qilinadigan komponentlarni testlash biroz farq qilishi mumkin, ammo bu React Testing Library kabi mashhur testlash kutubxonalari tomonidan yaxshi qo'llab-quvvatlanadi.

• React Testing Library: Bu kutubxona sukut bo'yicha `document.body`ni so'raydi, bu yerda sizning portal tarkibingiz katta ehtimol bilan joylashgan bo'ladi. Shunday qilib, modal yoki maslahat ichidagi elementlarni qidirish ko'pincha "shunchaki ishlaydi".
• Mocking (Soxtalashtirish): Ba'zi murakkab stsenariylarda yoki agar portal mantig'ingiz ma'lum DOM tuzilmalariga qattiq bog'liq bo'lsa, siz test muhitingizda maqsadli `container` elementini soxtalashtirishingiz yoki ehtiyotkorlik bilan sozlashingiz kerak bo'lishi mumkin.

React Portallarining keng tarqalgan xatolari va eng yaxshi amaliyotlari

React Portallaridan foydalanishingiz samarali, qo'llab-quvvatlanadigan va yaxshi ishlashini ta'minlash uchun ushbu eng yaxshi amaliyotlarni ko'rib chiqing va keng tarqalgan xatolardan qoching:

1. Portallarni haddan tashqari ko'p ishlatmang

Portallar kuchli, ammo ulardan oqilona foydalanish kerak. Agar komponentning vizual chiqishiga DOM iyerarxiyasini buzmasdan erishish mumkin bo'lsa (masalan, `overflow` bo'lmagan ota-komponent ichida nisbiy yoki mutlaq joylashuvdan foydalanish), shunday qiling. Portallarga haddan tashqari bog'liqlik, agar ehtiyotkorlik bilan boshqarilmasa, ba'zan DOM tuzilmasini disk raskadrovka qilishni murakkablashtirishi mumkin.

2. To'g'ri tozalashni (o'chirishni) ta'minlang

Agar siz portalingiz uchun dinamik ravishda DOM tugunini yaratsangiz (bizning `Modal` misolimizdagi `el.current` kabi), portalni ishlatadigan komponent o'chirilganda uni tozalaganingizga ishonch hosil qiling. `useEffect` tozalash funksiyasi buning uchun mukammaldir, bu xotira sizib chiqishining oldini oladi va DOMni yetim qolgan elementlar bilan to'ldirib yubormaydi.

            
useEffect(() => {
  // ... el.current ni qo'shish
  return () => {
    // ... el.current ni olib tashlash;
  };
}, []);

            

              
                Copy
              
            
          

Agar siz har doim oldindan mavjud bo'lgan, qat'iy DOM tuguniga (yagona `modal-root` kabi) render qilsangiz, *tugunning o'zini* tozalash kerak emas, ammo ota-komponent o'chirilganda *portal tarkibi* to'g'ri o'chirilishini React avtomatik ravishda boshqaradi.

3. Ishlash samaradorligi mulohazalari

Ko'pgina foydalanish holatlari (modal oynalar, maslahatlar) uchun portallarning ishlash samaradorligiga ta'siri sezilarsizdir. Biroq, agar siz portal orqali juda katta yoki tez-tez yangilanadigan komponentni render qilayotgan bo'lsangiz, har qanday boshqa murakkab komponent uchun qilganingiz kabi, odatdagi React ishlash optimallashtirishlarini (`React.memo`, `useCallback`, `useMemo` kabi) ko'rib chiqing.

4. Har doim qulay foydalanish imkoniyatiga ustuvorlik bering

Ta'kidlanganidek, qulay foydalanish imkoniyati juda muhimdir. Portal orqali render qilingan tarkibingiz ARIA yo'riqnomalariga amal qilishini va barcha foydalanuvchilar, ayniqsa klaviatura navigatsiyasi yoki ekran o'qish vositalariga tayanadiganlar uchun silliq tajribani ta'minlashini tekshiring.

• Modal fokusini ushlab turish: Klaviatura fokusini ochiq modal ichida ushlab turadigan kutubxonani amalga oshiring yoki foydalaning.
• Tavsiflovchi ARIA atributlari: Modal tarkibini uning sarlavhasi va tavsifiga bog'lash uchun `aria-labelledby`, `aria-describedby` dan foydalaning.
• Klaviatura bilan yopish: `Esc` tugmasi bilan yopishga ruxsat bering.
• Fokusni tiklash: Modal yopilganda, fokusni uni ochgan elementga qaytaring.

5. Portallar ichida semantik HTMLdan foydalaning

Portal sizga tarkibni vizual jihatdan istalgan joyda render qilish imkonini bersa-da, portalning bola elementlari ichida semantik HTML elementlaridan foydalanishni unutmang. Masalan, dialog `

            
// Oddiy PortalWrapper misoli
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // agar wrapperId ga ega element mavjud bo'lmasa, uni yaratib body ga qo'shing
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Dasturiy ravishda yaratilgan elementni o'chirish
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;

            

              
                Copy