Що повинен повертати компонент?
Коротка відповідь
Компонент у React повинен повертати JSX - тобто опис того, як має виглядати інтерфейс (UI).
Або, точніше:
Компонент повинен повертати React-елемент - об'єкт, який React потім перетворює на реальні DOM-елементи.
Приклад:
function Greeting() {
return <h1>Hello, world!</h1>;
}Тут компонент Greeting повертає JSX,
який React під капотом перетворює у виклик:
React.createElement("h1", null, "Hello, world!");А цей виклик повертає React-елемент, наприклад:
{
type: "h1",
props: { children: "Hello, world!" }
}React потім рендерить цей об'єкт у реальний <h1> у DOM.
Що саме можна повертати
Компонент може повертати:
| Тип значення, що повертається | Приклад | Опис |
|---|---|---|
| JSX | <div>Hello</div> | Стандартний випадок |
| React-елемент | React.createElement('h1', null, 'Hello') | Те саме, що й JSX |
| Масив елементів | [<li>A</li>, <li>B</li>] | Кілька елементів підряд |
| null | return null; | Компонент нічого не рендерить |
| false / undefined | return false; | Аналогічно - нічого не виводить |
| Фрагмент | return <>...</> | Повернення кількох елементів без обгортки |
| Портал | return createPortal(<Modal />, domNode) | Рендер поза кореневим DOM |
| Текст або число | return 'Hello' | React відрендерить як текстовий вузол |
Не можна повертати
Кілька елементів без спільного батька:
// Помилка!
return (
<h1>Heading</h1>
<p>Text</p>
);Потрібно обгорнути:
return (
<>
<h1>Heading</h1>
<p>Text</p>
</>
);Чому саме JSX / React-елемент?
React працює не напряму з DOM, а з Virtual DOM - віртуальним представленням інтерфейсу в пам'яті. Коли компонент повертає JSX, React:
- Перетворює JSX -> об'єкт (React-елемент);
- Будує з таких об'єктів Virtual DOM;
- Порівнює його з попередньою версією (diffing);
- Вносить мінімальні зміни в реальний DOM.
Приклад: компонент, що повертає нічого
function HiddenMessage({ show }) {
if (!show) return null;
return <p>Secret message!</p>;
}Це нормальна практика - повертати
null, якщо компонент тимчасово не повинен нічого відображати.
Підсумок
| Повертає | Що робить |
|---|---|
| JSX / React-елемент | Описує, що потрібно відрендерити |
| null / false | Не відображає нічого |
| Масив елементів | Відображає кілька вузлів підряд |
| Фрагмент | Групує елементи без зайвого DOM |
| createPortal | Рендерить поза батьком |
Головна думка:
Компонент у React повинен повертати опис інтерфейсу, а не змінювати DOM напряму. React сам вирішує, як саме це відобразити.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.