Фрагменты

Фрагменты (fragments) в Atomico представляют собой механизм для группировки нескольких элементов без добавления лишнего DOM-узла. Это особенно важно при работе с компонентами, где требуется вернуть несколько элементов из функции компонента без оборачивания их в контейнерный <div> или другой тег.

import { h, Fragment } from "atomico";

function Example() {
    return (
        <Fragment>
            <h1>Заголовок</h1>
            <p>Описание фрагмента.</p>
        </Fragment>
    );
}

В данном примере <Fragment> позволяет вернуть сразу два элемента — <h1> и <p> — как единое целое, не создавая дополнительного узла в DOM.

Ключевые особенности

  • Лёгкость и производительность: фрагменты не создают реальных DOM-узлов, поэтому не влияют на структуру документа и не увеличивают его глубину.
  • Поддержка вложенных компонентов: можно использовать фрагменты внутри других компонентов и возвращать сложные структуры элементов.
  • Совместимость с JSX/TSX: синтаксис <Fragment> полностью совместим с JSX, что упрощает перенос компонентов между проектами Atomico и React.

Короткая запись фрагмента

Atomico позволяет использовать сокращённую форму записи фрагмента без явного указания <Fragment>:

function Example() {
    return (
        <>
            <h2>Подзаголовок</h2>
            <p>Дополнительный текст</p>
        </>
    );
}

Синтаксис <>...</> идентичен <Fragment>...</Fragment>, что делает код более компактным и читаемым.

Фрагменты с ключами

При рендеринге списков элементов важно использовать ключи для фрагментов, чтобы библиотека могла отслеживать изменения и оптимизировать обновления DOM:

function ItemList({ items }) {
    return items.map(item => (
        <Fragment key={item.id}>
            <h3>{item.title}</h3>
            <p>{item.description}</p>
        </Fragment>
    ));
}

Без ключей фрагменты ведут себя корректно, но при динамическом изменении списка производительность может ухудшаться, а поведение компонентов становиться менее предсказуемым.

Использование фрагментов с условиями

Фрагменты удобно комбинировать с условной логикой, когда необходимо возвращать несколько элементов только при выполнении определённого условия:

function Conditional({ show }) {
    return show ? (
        <Fragment>
            <p>Элемент 1</p>
            <p>Элемент 2</p>
        </Fragment>
    ) : null;
}

Такой подход позволяет сохранять структуру кода чистой, избегая лишних обёрток.

Практические рекомендации

  • Использовать фрагменты при возврате нескольких элементов из функции компонента, чтобы не создавать лишние DOM-узлы.
  • Для списков элементов всегда назначать ключи (key), даже если используется фрагмент.
  • Применять сокращённый синтаксис <>...</> для улучшения читаемости кода, если не требуется явное имя фрагмента.
  • Комбинировать с условным рендерингом и вложенными компонентами для гибкого управления структурой DOM.

Фрагменты в Atomico помогают строить чистую и оптимизированную структуру компонентов, облегчая управление вложенными элементами и списками, сохраняя при этом производительность и удобство работы с JSX.

Оглавление