React fragment что это
Фрагменты в React
Feb 19, 2019 · 4 min read
При работе с React лучше использовать многоразовые компоненты с помощью таких инструментов, как Bit, чтобы избежать необходимости переписывать их каждый раз. К тому же, приятно использовать компоненты, организованные в визуальной галерее, не так ли?
Постановка задачи
Попробуйте визуализировать несколько компонентов React подобным образом:
или создать подобный список узлов:
При использовании VS Code с расширениями поддержки JSX, появится предупреждение: “Родительские выражения JSX должны иметь один родительский элемент”.
Чтобы предупреждение исчезло, нужно добавить дополнительный тег div в качестве родительского элемента в разметку JSX.
Проблема заключается в том, что использовать теги div немного неудобно. В HTML встречаются случаи, когда дополнительный div может деструктурировать DOM. Например, при использовании таблицы в компонентах.
Нам нужно визуализировать данные пользователей в табличной форме с помощью HTML-элемента table. Нужно визуализировать следующий код в React:
Создадим компоненты для визуализации каждого аспекта элемента table. HeaderComponent отобразит заголовок таблицы, BodyComponent — тело таблицы. TableComponent визуализирует каркас таблицы с HeaderComponent и BodyComponent таким образом:
HeaderComponent должен выглядеть так:
А BodyComponent выглядит вот так:
Проблема с HeaderComponent и BodyComponent заключается в том, что они выполняют возврат нескольких узлов. React предупредит о необходимости вложить разметку во вложенный тег.
Затем выполняем подобные действия, чтобы устранить предупреждение:
Разметка вложена в тег div. Теперь на выходе компонент Table будет выглядеть так:
Выше приведен неправильный вывод элемента table. Элемент div не должен быть отображен. Компоненты React предназначены для возврата элементов, но они должны быть заключены в родительский тег, несколько элементов не могут быть возвращены. Однако добавление дополнительного узла иногда приводит к неправильному форматированию html-элемента output, как показано выше.
Как решить эту проблему? Каким образом можно возвратить заключенные элементы JSX, не влияя на визуализированный вывод в DOM?
Фрагменты React способны решить эту проблему!
Решение — Фрагменты
С помощью фрагментов можно сгруппировать список дочерних элементов без добавления дополнительных узлов в DOM.
Приступим к решению первой проблемы:
Теперь выполним вложение:
Перейдем ко второму примеру:
Удаляем теги div и добавляем React.Fragment вместо них:
Переходим к третьему примеру и заменяем дополнительные теги div в BodyComponent и HeaderComponent на React.Fragment:
Таблица будет отображена следующим образом:
Фрагменты в React
При работе с React лучше использовать многоразовые компоненты с помощью таких инструментов, как Bit, чтобы избежать необходимости переписывать их каждый раз. К тому же, приятно использовать компоненты, организованные в визуальной галерее, не так ли?
Постановка задачи
Попробуйте визуализировать несколько компонентов React подобным образом:
или создать подобный список узлов:
При использовании VS Code с расширениями поддержки JSX, появится предупреждение: “Родительские выражения JSX должны иметь один родительский элемент”.
Чтобы предупреждение исчезло, нужно добавить дополнительный тег div в качестве родительского элемента в разметку JSX.
Проблема заключается в том, что использовать теги div немного неудобно. В HTML встречаются случаи, когда дополнительный div может деструктурировать DOM. Например, при использовании таблицы в компонентах.
Нам нужно визуализировать данные пользователей в табличной форме с помощью HTML-элемента table. Нужно визуализировать следующий код в React:
Создадим компоненты для визуализации каждого аспекта элемента table. HeaderComponent отобразит заголовок таблицы, BodyComponent — тело таблицы. TableComponent визуализирует каркас таблицы с HeaderComponent и BodyComponent таким образом:
HeaderComponent должен выглядеть так:
А BodyComponent выглядит вот так:
Проблема с HeaderComponent и BodyComponent заключается в том, что они выполняют возврат нескольких узлов. React предупредит о необходимости вложить разметку во вложенный тег.
Затем выполняем подобные действия, чтобы устранить предупреждение:
Разметка вложена в тег div. Теперь на выходе компонент Table будет выглядеть так:
Выше приведен неправильный вывод элемента table. Элемент div не должен быть отображен. Компоненты React предназначены для возврата элементов, но они должны быть заключены в родительский тег, несколько элементов не могут быть возвращены. Однако добавление дополнительного узла иногда приводит к неправильному форматированию html-элемента output, как показано выше.
Как решить эту проблему? Каким образом можно возвратить заключенные элементы JSX, не влияя на визуализированный вывод в DOM?
Фрагменты React способны решить эту проблему!
Решение — Фрагменты
С помощью фрагментов можно сгруппировать список дочерних элементов без добавления дополнительных узлов в DOM.
Приступим к решению первой проблемы:
Теперь выполним вложение:
Перейдем ко второму примеру:
Удаляем теги div и добавляем React.Fragment вместо них:
Переходим к третьему примеру и заменяем дополнительные теги div в BodyComponent и HeaderComponent на React.Fragment:
Таблица будет отображена следующим образом:
3.10 Фрагменты
Общим примером в React является компонент, возвращающий несколько элементов. Фрагменты позволяют группировать список потомков без добавления дополнительных узлов в DOM:
Существует и короткий синтаксис, но пока что его поддерживают не все популярные инструменты
3.10.1 Мотивация
Общим примером является компонент, который возвращает список дочерних элементов. Рассмотрим пример куска кода на React:
должен возвращать несколько элементов
Результирующий вывод компонента
И тут на помощь приходят фрагменты.
3.10.2 Использование
В следующем примере мы объявляем фрагмент:
который приводит к валидному выводу компонента
3.10.2.1 Короткий синтаксис
Существует новый, более короткий синтаксис, который можно использовать для объявления фрагментов. Он выглядит как пустые теги:
Вы можете использовать синтаксис <> таким же образом, как и любой другой элемент, за исключением того, что он не поддерживает ключи и атрибуты.
Обратите внимание, что многие инструменты его еще не поддерживают, поэтому вам пока остается явно писать и ожидать обновлений.
3.10.2.2 Фрагменты с ключами
3.10.3 Демо
Вы можете попробовать новый JSX синтаксис фрагментов с помощью данного CodePen.
React v16.2.0: улучшенная поддержка фрагментов
Ноябрь 28, 2017 Клемент Хонг
React 16.2 теперь доступен! Самым большим дополнением является улучшенная поддержка возврата нескольких дочерних элементов из метода отрисовки(рендеринга) компонента. Мы называем эту возможность фрагментами.
Фрагменты выглядят как пустые теги JSX. Они позволяют группировать список дочерних элементов без добавления дополнительных узлов в DOM:
Эта потрясающая новая функция стала возможной благодаря дополнениям как к React, так и к JSX.
Что такое фрагменты?
Общим примером является компонент, который возвращает список дочерних элементов. Рассмотрим данный пример HTML:
До версии 16 единственным способом достичь этого в React было обертывание потомков в дополнительный элемент, обычно div или span :
Чтобы устранить это ограничение, в React 16.0 была добавлена поддержка возврата массива элементов из метода отрисовки компонента. Вместо того, чтобы обертывать дочерние элементы в элемент DOM, вы можете поместить их в массив:
Однако такой подход имеет некоторые значительные отличия от обычного JSX:
Вы можете использовать так же, как используете любой другой элемент, не изменяя способ написания JSX. Никаких запятых, никаких ключей, никаких кавычек.
Компонент Fragment доступен в главном объекте React :
JSX синтаксис фрагментов
В React это является синтаксическим сахаром для элемента из примера в предыдущем разделе. (Не-React фреймворки, которые используют JSX, могут компилировать во что-то другое).
Синтаксис фрагментов в JSX был вдохновлен изящным предшественником, таким как конструктор XMLList() <> в E4X. Использование пары пустых тегов предназначено для того, чтобы обозначить, что в DOM не будет добавлено реального элемента.
Фрагменты с ключами
Поддержка синтаксиса фрагментов
Поддержка синтаксиса фрагментов в JSX будет зависеть от инструментов, которые вы используете для построения своего приложения. Пожалуйста, будьте терпеливы, поскольку сообщество JSX работает над принятием нового синтаксиса. Мы тесно сотрудничаем с разработчиками самых популярных проектов:
Create React App
Экспериментальная поддержка синтаксиса фрагментов будет добавлена в приложение Create React. Устойчивый выпуск может занять немного больше времени, так как мы ожидаем одобрения другими проектами.
Babel
Поддержка фрагментов JSX доступна в Babel v7.0.0-beta и выше! Если вы уже на Babel 7, просто обновите последнюю версию Babel и плагина преобразования:
Или, если вы используете react-present :
Обратите внимание, что Babel 7 технически все еще в бета-версии, но стабильный релиз уже скоро.
К сожалению отсутствует поддержка для Babel 6.x, и в настоящее время нет планов по обратной совместимости.
Babel с Webpack
Если вы используете Babel с Webpack, дополнительных шагов не требуется, потому что babel-loader будет использовать установленную вами версию Babel.
Babel c другими фреймворками
TypeScript
TypeScript имеет полную поддержку синтаксиса фрагментов! Обновитесь до версии 2.6.2. (Обратите внимание, что это важно, даже если вы уже на версии 2.6.1, так как поддержка была добавлена как релиз патча в 2.6.2.)
Проведите апгрейд до последнего TypeScript с помощью команды:
чтобы обновить Flow до последней версии.
Prettier
ESLint
JSX фрагменты поддерживаются ESLint 3.x, когда он используются вместе с babel-eslint :
или если он у вас уже есть, то сделайте апгрейд:
Обратите внимание, что babel-eslint официально не поддерживается ESLint. Мы рассмотрим возможность добавления фрагментов к ESLint 4.x в ближайшие недели (см. issue #9662 ).
Поддержка редактором
Может потребоваться некоторое время для поддержки синтаксиса фрагментов в текстовом редакторе. Будьте терпеливы, поскольку сообщество работает над принятием последних изменений. Тем временем вы можете увидеть ошибки или некорректную подсветку, если ваш редактор еще не поддерживает синтаксис фрагментов. Как правило, эти ошибки можно безопасно игнорировать.
Поддержка синтаксиса TypeScript редактором
Другие инструменты
Для других инструментов ознакомьтесь с соответствующей документацией, чтобы проверить наличие поддержки. Однако, если вы заблокированы своей инструментальной базой, вы всегда можете начать с использования компонента и позже выполнить codemod, чтобы заменить его сокращенным синтаксисом, когда соответствующая поддержка будет доступна.
Установка
React v16.2.0 доступен в реестре npm.
Чтобы установить React 16, запустите:
Мы также предоставляем сборки UMD React-а через CDN:
Лог изменений
React
React-DOM
React Test Renderer
React Reconciler
Внутренние изменения
Многие тесты были переписаны в отличие от публичного API. Большое спасибо всем, кто внес свой вклад!
Благодарности
Этот выпуск стал возможным благодаря нашим open source участникам. Большое спасибо всем, кто создавал issue, внес свой вклад в обсуждениях синтаксиса, проверял PR-ы, добавил поддержку фрагментов JSX в сторонние библиотеки и многое другое!
Особая благодарность командам TypeScript и Flow, а также команде сопровождения Babel, которые помогли реализовать инструментальную поддержку нового синтаксиса.
Благодарим Gajus Kuizinas и других участников, которые прототипировали компонент Fragment в open source.
React Fragments: An overview
March 17, 2021 5 min read 1473
React Fragments are a simple yet elegant feature that was released with React v16.2.0. Just comprehending its existence will enable you to write better React components and save a ton of time when creating and styling layouts.
This tutorial is designed to help you understand React Fragments and various use cases where it would come in handy.
Here’s what we’ll cover:
What are React Fragments?
Fragments are a modern syntax for adding multiple elements to a React Component without wrapping them in an extra DOM node.
React Fragments do not produce any extra elements in the DOM, which means that a Fragment’s child components will be rendered without any wrapping DOM node. React Fragments enable you to group multiple sibling components without introducing any unnecessary markup in the rendered HTML.
Fragments in React layouts
React Fragments serve as a cleaner alternative to using unnecessary div s in your code.
Consider the following example to create a simple layout of rows and columns using Flexbox:
The above code renders three columns in a single row, as shown below:
The expected result should be the same as before, but it isn’t. Decoupling the first two columns in a separate component ChildComponent breaks the layout:
The ChildCompoent has a div wrapping all its JSX elements to group them together. However, that extra div causes a break in the layout because the browser thinks it’s a part of the layout. Your browser doesn’t know that you’ve added that div to avoid running into an error and it is used as merely a wrapper for your enclosing HTML.
As the component tree nests deeper, it can be difficult to debug and trace where the extra nodes are coming from. Similarly, if you’re using CSS Grids to style and design your layouts, unnecessary div s could cause your layout to break. An easy fix is to wrap your component’s JSX in a React Fragment instead.
There are many ways to create and render Fragments. You can create a Fragment by using the Fragment property on the imported React object, as shown above. You can also import a Fragment from React as a React component and use it in a similar fashion.
Finally, you can create a React Fragment on the fly using the shorthand syntax to wrap components using an empty HTML element like syntax. This is the cleanest and easiest way to use Fragments; it almost feels like you’re using a regular HTML element.
Using any of the above three methods brings back the original layout because it eliminates any pointless div in your DOM.
Rendering lists with React Fragments
Let’s look at another common use case for Fragments. Let’s say you want to render a list of items on the page. This list could be static, generated from a local JSON file, or retrieved from an API.
For brevity’s sake, we’ll use a static list:
Here you’re simply looping through the items array and passing each item as props to the ItemRenderer component, which renders every single item on the page. If you inspect the above code on a browser, you’ll have the following DOM structure:
The DOM structure looks much cleaner now:
This is a very simplified use case where you might be rendering an extra div on your DOM. The larger your lists are, the more significant the impact.
As your application becomes larger in size and complex in architecture, you might find yourself rendering a significant amount of unnecessary div s to render large lists in your application. This could bloat your HTML, causing performance issues on older devices.
It may not be that significant at all, but rendering unnecessary HTML elements is always a bad practice. If you have a generic list component for your application, consider using Fragments as wrappers to avoid abstracting away from clean code and semantics.
Finally, Fragments enable you to pass a key property as props, but note that it’s the only prop it can accept:
You can only pass props to your Fragment if you’re rendering it as shown above. Props can’t be passed to your Fragments if you’re using the shorthand notation. A good practice is to use React.Fragment or Fragment syntax when you need to pass keys, especially when rendering using a loop.
Conclusion
Fragments allow you to write cleaner, readable and maintainable code. They are not a replacement for div s in your HTML, but they offer a better approach to structuring and rendering your markup if you’re using unnecessary div s in your code.
You can avoid issues that break your layouts or potentially optimize your markup rendering time using Fragments. However, you should only use them when needed. If you need a wrapper to your JSX for styling, use a div instead.
Full visibility into production React apps
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.