Що таке fragment у React
<Fragment> — це компонент, наданий React, який дозволяє групувати кілька дочірніх елементів без додавання додаткового вузла до DOM.
Він не рендериться в HTML, але дозволяє повертати кілька елементів з компонент.
Чому Fragment?
У React кожен компонент повинен повертати один кореневий елемент. Раніше JSX потрібно було обгортати в <div>, що захаращувало DOM:
tsx
// Поганий приклад
return (
<div>
<h1>Заголовок</h1>
<p>Опис</p>
</div>
);З фрагментом:
tsx
// Гарний приклад
return (
<Fragment>
<h1>Заголовок</h1>
<p>Опис</p>
</Fragment>
);*Або навіть коротше:
tsx
// Короткий синтаксис
return (
<>
<h1>Заголовок</h1>
<p>Опис</p>
</>
);Порівняння: div vs Fragment
| Характеристика | ||
|---|---|---|
| Рендер в DOM | Так | Ні |
| Стиль | Може впливати | Нейтральний |
| Семантика | Може порушувати | Чиста |
| Висновок: |
React.Fragment — це корисний інструмент для групування JSX без додавання зайвого HTML. Він допомагає зробити DOM чистішим, код — акуратнішим, і уникнути несподіваних стилів від додаткових обгорток.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.