React-те фрагменттер мен порталдар туралы айтыңыз.

Фрагменттер (Fragments) React-те бірнеше элементті артық DOM түйінін қоспай топтастырудың тәсілі. Бұл компоненттен бірнеше көрші элементті қайтару қажет болғанда пайдалы, бірақ қосымша <div> жасағысы келмегенде.

Қолдану мысалы:

return (
  <>
    <h1>Тақырып</h1>
    <p>Мәтін параграфы</p>
  </>
);

Порталдар (Portals) компоненттің баламалы элементтерін DOM-да орналасқан, бірақ ата-аналық компоненттің иерархиясынан тыс орналасқан түйінге рендерлеуге мүмкіндік береді. Бұл модаль терезелер, тултиптер және басқа да элементтер үшін ыңғайлы, олар визуалды түрде ағымдағы контейнерден шығып кетуі керек.

Портал құру мысалы:

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

Осылайша, фрагменттер DOM-да артық орауыштарды болдырмайды, ал порталдар компоненттерді ағымдағы DOM иерархиясынан тыс рендерлеуге мүмкіндік береді.