1. september 2025Eesti

Saage aru Reacti portaalide sündmuste mullitamisest, puudevahelisest sündmuste levikust ja sellest, kuidas sündmusi keerukates Reacti rakendustes tõhusalt hallata. Õppige praktiliste näidete abil globaalsetele arendajatele.

Reacti portaalide sündmuste mullitamine: puudevahelise sündmuste leviku lahtimõtestamine

Reacti portaalid pakuvad võimsat viisi komponentide renderdamiseks väljaspool nende vanemkomponendi DOM-i hierarhiat. See on uskumatult kasulik modaalakende, kohtspikrite ja muude kasutajaliidese elementide jaoks, mis peavad oma vanema piirangutest välja murdma. See aga tekitab põneva väljakutse: kuidas levivad sündmused, kui renderdatud komponent asub DOM-puu teises osas? See blogipostitus süveneb Reacti portaalide sündmuste mullitamisse, puudevahelisse sündmuste levikusse ja sellesse, kuidas oma Reacti rakendustes sündmusi tõhusalt käsitleda.

Reacti portaalide mõistmine

Enne sündmuste mullitamisse süvenemist teeme lühikokkuvõtte Reacti portaalidest. Portaal võimaldab teil renderdada komponendi lapsi DOM-i sõlme, mis asub väljaspool vanemkomponendi DOM-i hierarhiat. See on eriti kasulik stsenaariumide puhul, kus peate komponendi paigutama põisisualast väljapoole, näiteks modaalakna, mis peab katma kõik muu, või kohtspikri, mis peaks renderduma elemendi lähedal, isegi kui see on sügavalt pesastatud.

Siin on lihtne näide, kuidas portaali luua:

            import React from 'react';
import ReactDOM from 'react-dom/client';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    
      
        {children}
        
      
    ,
    document.getElementById('modal-root') // Render the modal into this element
  );
}

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

  return (
    
      My App
      
       setIsModalOpen(false)}>
        Modal Content
        This is the modal's content.
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

Selles näites renderdab komponent `Modal` oma sisu DOM-i elementi ID-ga `modal-root`. See `modal-root` element (mille te tavaliselt paigutaksite oma `<body>` sildi lõppu) on teie ülejäänud Reacti komponentide puust sõltumatu. See eraldatus on sündmuste mullitamise mõistmise võti.

Puudevahelise sündmuste leviku väljakutse

Põhiprobleem, mida me käsitleme, on järgmine: kui portaalis toimub sündmus (nt klikk modaalaknas), siis kuidas see sündmus levib ülespoole DOM-puud oma lõplike käsitlejateni? Seda tuntakse sündmuste mullitamisena. Tavalises Reacti rakenduses mullitavad sündmused üles läbi komponentide hierarhia. Kuid kuna portaal renderdatakse DOM-i teise ossa, muutub tavapärane mullitamiskäitumine.

Mõelge sellisele stsenaariumile: teil on modaalaknas nupp ja te soovite, et sellele nupule klõpsamine käivitaks funktsiooni, mis on määratletud teie `App` komponendis (vanem). Kuidas te seda saavutate? Ilma sündmuste mullitamise nõuetekohase mõistmiseta võib see tunduda keeruline.

Kuidas sündmuste mullitamine portaalides töötab

React käsitleb sündmuste mullitamist portaalides viisil, mis püüab peegeldada sündmuste käitumist tavalises Reacti rakenduses. Sündmus *tõepoolest* mullitab üles, kuid teeb seda viisil, mis austab Reacti komponentide puud, mitte füüsilist DOM-puud. See toimib järgmiselt:

Sündmuse püüdmine: Kui portaali DOM-elemendis toimub sündmus (nagu klikk), püüab React sündmuse kinni.
Virtuaalse DOM-i mullitamine: Seejärel simuleerib React sündmuse mullitamist läbi *Reacti komponentide puu*. See tähendab, et see kontrollib sündmuste käsitlejaid portaali komponendis ja seejärel „mullitab” sündmuse üles vanemkomponentidele *teie* Reacti rakenduses.
Käsitleja käivitamine: Seejärel käivitatakse vanemkomponentides määratletud sündmuste käsitlejad, justkui oleks sündmus pärinenud otse komponendipuu seest.

See käitumine on loodud pakkuma järjepidevat kogemust. Saate määratleda sündmuste käsitlejad vanemkomponendis ja need reageerivad portaalis käivitatud sündmustele, *kuni* olete sündmuste käsitlemise korrektselt ühendanud.

Praktilised näited ja koodi läbikäigud

Illustreerime seda üksikasjalikuma näitega. Ehitame lihtsa modaalakna, millel on nupp ja mis demonstreerib sündmuste käsitlemist portaali seest.

            import React from 'react';
import ReactDOM from 'react-dom/client';

function Modal({ children, isOpen, onClose, onButtonClick }) {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    
      
        {children}
        
        
      
    ,
    document.getElementById('modal-root')
  );
}

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

  const handleButtonClick = () => {
    console.log('Button clicked from inside the modal, handled by App!');
    // You can perform actions here based on the button click.
  };

  return (
    
      React Portal Event Bubbling Example
      
       setIsModalOpen(false)}
        onButtonClick={handleButtonClick}
      >
        Modal Content
        This is the modal's content.
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

Selgitus:

Komponent Modal: Komponent `Modal` kasutab `ReactDOM.createPortal`, et renderdada oma sisu `modal-root` elementi.
Sündmuse käsitleja (onButtonClick): Me edastame funktsiooni `handleButtonClick` komponendist `App` komponendile `Modal` rekvisiidina (`onButtonClick`).
Nupp modaalaknas: Komponent `Modal` renderdab nupu, mis klõpsamisel kutsub välja rekvisiidi `onButtonClick`.
Komponent App: Komponent `App` määratleb funktsiooni `handleButtonClick` ja edastab selle rekvisiidina komponendile `Modal`. Kui modaalaknas olevat nuppu klõpsatakse, käivitatakse funktsioon `handleButtonClick` komponendis `App`. `console.log` lause demonstreerib seda.

See demonstreerib selgelt sündmuste mullitamist üle portaali. Klõpsamissündmus pärineb modaalaknast (DOM-puus), kuid React tagab, et sündmust käsitletakse `App` komponendis (Reacti komponendipuus), tuginedes sellele, kuidas olete oma rekvisiidid ja käsitlejad ühendanud.

Täpsemad kaalutlused ja parimad praktikad

1. Sündmuste leviku kontroll: stopPropagation() ja preventDefault()

Nagu tavalistes Reacti komponentides, saate ka oma portaali sündmuste käsitlejates kasutada `stopPropagation()` ja `preventDefault()`, et kontrollida sündmuste levikut.

stopPropagation(): See meetod takistab sündmuse edasist mullitamist vanemkomponentidele. Kui kutsute `stopPropagation()` välja oma `Modal` komponendi `onButtonClick` käsitlejas, ei jõua sündmus `App` komponendi `handleButtonClick` käsitlejani.
preventDefault(): See meetod takistab sündmusega seotud brauseri vaikekäitumist (nt vormi esitamise takistamine).

Siin on näide `stopPropagation()` kasutamisest:

            function Modal({ children, isOpen, onClose, onButtonClick }) {
  if (!isOpen) return null;

  const handleButtonClick = (event) => {
    event.stopPropagation(); // Prevent the event from bubbling up
    onButtonClick();
  };

  return ReactDOM.createPortal(
    
      
        {children}
        
        
      
    ,
    document.getElementById('modal-root')
  );
}

Selle muudatusega käivitab nupule klõpsamine ainult `Modal` komponendis määratletud funktsiooni `handleButtonClick` ja *ei* käivita `App` komponendis määratletud funktsiooni `handleButtonClick`.

2. Vältige ainult sündmuste mullitamisele lootmist

Kuigi sündmuste mullitamine töötab tõhusalt, kaaluge alternatiivseid mustreid, eriti keerukates rakendustes. Liigne tuginemine sündmuste mullitamisele võib muuta teie koodi raskemini mõistetavaks ja silutavaks. Kaaluge neid alternatiive:

Otsene rekvisiitide edastamine: Nagu näidetes näitasime, on sündmuste käsitleja funktsioonide edastamine rekvisiitidena vanemalt lapsele sageli kõige puhtam ja selgesõnalisem lähenemine.
Context API: Keerukamate suhtlusvajaduste jaoks komponentide vahel võib Reacti Context API pakkuda tsentraliseeritud viisi oleku ja sündmuste käsitlejate haldamiseks. See on eriti kasulik stsenaariumide puhul, kus peate jagama andmeid või funktsioone olulise osa oma rakenduse puu ulatuses, isegi kui need on eraldatud portaaliga.
Kohandatud sündmused: Saate luua oma kohandatud sündmusi, mida komponendid saavad saata ja kuulata. Kuigi tehniliselt teostatav, on üldiselt parem jääda Reacti sisseehitatud sündmuste käsitlemise mehhanismide juurde, kui see pole absoluutselt vajalik, kuna need integreeruvad hästi Reacti virtuaalse DOM-i ja komponentide elutsükliga.

3. Jõudlusega seotud kaalutlused

Sündmuste mullitamisel endal on minimaalne mõju jõudlusele. Kui teil on aga väga sügavalt pesastatud komponendid ja palju sündmuste käsitlejaid, võib sündmuste levitamise kulu suureneda. Profiilige oma rakendust, et tuvastada ja lahendada jõudluse kitsaskohad. Minimeerige ebavajalikud sündmuste käsitlejad ja optimeerige oma komponentide renderdamist, kus see on võimalik, olenemata sellest, kas kasutate portaale või mitte.

4. Portaalide ja sündmuste mullitamise testimine

Portaalides sündmuste mullitamise testimine nõuab veidi teistsugust lähenemist kui tavaliste komponentide interaktsioonide testimine. Kasutage sobivaid testimisraamatukogusid (nagu Jest ja React Testing Library), et kontrollida, kas sündmuste käsitlejad käivitatakse korrektselt ja kas `stopPropagation()` ja `preventDefault()` toimivad ootuspäraselt. Veenduge, et teie testid kataksid stsenaariume nii sündmuste leviku kontrolliga kui ka ilma.

Siin on kontseptuaalne näide, kuidas võiksite testida sündmuste mullitamise näidet:

            import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';

// Mock ReactDOM.createPortal to prevent it from rendering a real portal
jest.mock('react-dom/client', () => ({
  ...jest.requireActual('react-dom/client'),
  createPortal: (element) => element, // Return the element directly
}));

test('Modal button click triggers parent handler', () => {
  render();
  const openModalButton = screen.getByText('Open Modal');
  fireEvent.click(openModalButton);
  const modalButtonClick = screen.getByText('Click Me in Modal');
  fireEvent.click(modalButtonClick);
  // Assert that the console.log from handleButtonClick was called.
  // You'll need to adjust this based on how you assert your logs in your test environment
  // (e.g., mock console.log or use a library like jest-console)
  // expect(console.log).toHaveBeenCalledWith('Button clicked from inside the modal, handled by App!');
});

Ärge unustage `ReactDOM.createPortal` funktsiooni mockida. See on oluline, sest tavaliselt ei soovi te, et teie testid renderdaksid komponente reaalselt eraldi DOM-sõlme. See võimaldab teil testida oma komponentide käitumist eraldiseisvalt, muutes nende omavahelise suhtluse mõistmise lihtsamaks.

Globaalsed kaalutlused ja ligipääsetavus

Sündmuste mullitamine ja Reacti portaalid on universaalsed kontseptsioonid, mis kehtivad erinevates kultuurides ja riikides. Siiski pidage meeles neid punkte tõeliselt globaalsete ja ligipääsetavate veebirakenduste ehitamisel:

Ligipääsetavus (WCAG): Veenduge, et teie modaalaknad ja muud portaalipõhised komponendid oleksid puuetega kasutajatele ligipääsetavad. See hõlmab õigete ARIA atribuutide kasutamist (nt `aria-modal`, `aria-labelledby`), fookuse korrektset haldamist (eriti modaalakende avamisel ja sulgemisel) ning selgete visuaalsete vihjete pakkumist. Teie implementatsiooni testimine ekraanilugejatega on ülioluline.
Rahvusvahelistamine (i18n) ja lokaliseerimine (l10n): Teie rakendus peaks suutma toetada mitut keelt ja piirkondlikke seadeid. Modaalakende ja muude kasutajaliidese elementidega töötades veenduge, et tekst oleks korralikult tõlgitud ja paigutus kohanduks erinevate teksti suundadega (nt paremalt vasakule kirjutatavad keeled nagu araabia või heebrea keel). Kaaluge lokaliseerimise haldamiseks raamatukogude nagu `i18next` või Reacti sisseehitatud Context API kasutamist.
Jõudlus erinevates võrgutingimustes: Optimeerige oma rakendus kasutajatele piirkondades, kus on aeglasem internetiühendus. Minimeerige oma pakettide suurust, kasutage koodi tükeldamist ja kaaluge komponentide, eriti suurte või keerukate modaalakende, laisa laadimise kasutamist. Testige oma rakendust erinevates võrgutingimustes, kasutades tööriistu nagu Chrome DevTools'i võrgu vahekaart.
Kultuuriline tundlikkus: Kuigi sündmuste mullitamise põhimõtted on universaalsed, olge teadlik kultuurilistest nüanssidest kasutajaliidese disainis. Vältige kujutiste või disainielementide kasutamist, mis võivad teatud kultuurides olla solvavad või sobimatud. Konsulteerige oma rakenduste globaalsele publikule kujundamisel rahvusvahelistamise ja lokaliseerimise ekspertidega.
Testimine erinevates seadmetes ja brauserites: Veenduge, et teie rakendus on testitud erinevates seadmetes (lauaarvutid, tahvelarvutid, mobiiltelefonid) ja brauserites. Brauserite ühilduvus võib varieeruda ja te soovite tagada kasutajatele järjepideva kogemuse olenemata nende platvormist. Kasutage brauseriteüleseks testimiseks tööriistu nagu BrowserStack või Sauce Labs.

Levinud probleemide tõrkeotsing

Reacti portaalide ja sündmuste mullitamisega töötades võite kokku puutuda mõne levinud probleemiga. Siin on mõned tõrkeotsingu näpunäited:

Sündmuste käsitlejad ei käivitu: Kontrollige hoolikalt, kas olete sündmuste käsitlejad korrektselt rekvisiitidena portaali komponendile edastanud. Veenduge, et sündmuse käsitleja on määratletud vanemkomponendis, kus te eeldate, et seda käsitletakse. Kontrollige, kas teie komponent renderdab tegelikult nupu õige `onClick` käsitlejaga. Samuti kontrollige, et portaali juurelement eksisteeriks DOM-is ajal, mil teie komponent üritab portaali renderdada.
Sündmuste leviku probleemid: Kui sündmus ei mullita ootuspäraselt, kontrollige, et te ei kasutaks kogemata `stopPropagation()` või `preventDefault()` vales kohas. Vaadake hoolikalt üle sündmuste käsitlejate käivitamise järjekord ja veenduge, et haldate sündmuste püüdmise ja mullitamise faase korrektselt.
Fookuse haldamine: Modaalakende avamisel ja sulgemisel on oluline fookust korrektselt hallata. Kui modaalaken avaneb, peaks fookus ideaalis liikuma modaali sisule. Kui modaalaken sulgub, peaks fookus naasma elemendile, mis modaali käivitas. Ebaõige fookuse haldamine võib negatiivselt mõjutada ligipääsetavust ja kasutajatel võib olla raske teie liidesega suhelda. Kasutage Reactis `useRef` konksu, et seada fookus programmiliselt soovitud elementidele.
Z-indeksi probleemid: Portaalid nõuavad sageli CSS `z-index`, et tagada nende renderdamine muu sisu kohal. Määrake oma modaalkonteineritele ja muudele kattuvatele kasutajaliidese elementidele sobivad `z-index` väärtused, et saavutada soovitud visuaalne kihistus. Kasutage kõrget väärtust ja vältige vastandlikke väärtusi. Kaaluge CSS-i lähtestamise ja järjepideva stiilimisviisi kasutamist kogu oma rakenduses, et minimeerida `z-index` probleeme.
Jõudluse kitsaskohad: Kui teie modaalaken või portaal põhjustab jõudlusprobleeme, tuvastage renderdamise keerukus ja potentsiaalselt kulukad toimingud. Proovige optimeerida portaali sees olevaid komponente jõudluse osas. Kasutage React.memo ja muid jõudluse optimeerimise tehnikaid. Kaaluge memoiseerimise või `useMemo` kasutamist, kui teete oma sündmuste käsitlejates keerulisi arvutusi.

Kokkuvõte

Reacti portaalide sündmuste mullitamine on kriitiline kontseptsioon keerukate ja dünaamiliste kasutajaliideste ehitamiseks. Mõistmine, kuidas sündmused levivad üle DOM-i piiride, võimaldab teil luua elegantseid ja funktsionaalseid komponente nagu modaalaknad, kohtspikrid ja teated. Hoolikalt arvestades sündmuste käsitlemise nüansse ja järgides parimaid praktikaid, saate ehitada vastupidavaid ja ligipääsetavaid Reacti rakendusi, mis pakuvad suurepärast kasutajakogemust, olenemata kasutaja asukohast või taustast. Võtke omaks portaalide jõud, et luua keerukaid kasutajaliideseid! Pidage meeles, et esmatähtis on ligipääsetavus, põhjalik testimine ja alati oma kasutajate erinevate vajaduste arvestamine.