Фрагменты React были представлены в ноябре 2017 года в React 16.2.0. Хотя они существуют уже некоторое время, многие разработчики React избегают их использования или используют их, не зная, что они из себя представляют. Фрагменты React — это функция начального уровня, но ключевая, и каждый разработчик React должен освоить их, независимо от уровня своих навыков. Кроме того, учитывая, как долго они были частью React, их больше нельзя игнорировать.
Итак, давайте посмотрим все, что вам нужно, чтобы освоить фрагменты React, углубившись в почему, что, как и когда.
Почему существуют фрагменты React
Как указано в официальной документации React, возврат более одного
Например, предположим, что у вас есть Tableкомпонент, отображающий
function Table () {
return (
) ;
}
function Columns () {
return (
// the wrapper div used to return two tags
Hello
World
) ;
}
Это приведет к отображению следующего
| Hello | World |
React Fragments были введены именно для решения этой проблемы.
Что такое
Фрагменты React используют специальный синтаксис, который позволяет группировать список элементов HTML без добавления дополнительных узлов в DOM. Другими словами, фрагменты React позволяют группировать несколько дочерних компонентов без добавления ненужной разметки в отображаемый HTML, предлагая решение проблемы, рассмотренной ранее, и многие другие.
Как их использовать
Вы можете использовать фрагменты React, обернув дочерние элементы, которые будут возвращены вашим компонентом,
function Columns () {
return (
Hello
World
) ;
}
Это приведет к тому, что Tableкомпонент будет переведен в следующий HTML:
| Hello | World |
Как видите, в отображаемом HTML нет тега переноса. В отличие от того, что происходило раньше, это не приведет к недопустимому HTML.
Фрагменты React также можно использовать с коротким синтаксисом, который выглядит как пустой тег:
function Columns () {
return (
// using <> is just like using
<>
Hello
World
</>
// using </> is just like using
) ;
}
Это приводит к тому же результату, что и пример выше. Итак, имейте в виду, что пустой тег является сокращением для
Когда их использовать
По сути, вы должны использовать React Fragments каждый раз, когда в противном случае вы ввели бы ненужную оболочку
Есть три варианта использования, в которых обычно используются фрагменты React. Давайте посмотрим их все.
1. Обтекание нескольких
Как вы могли догадаться, перенос нескольких
Давайте посмотрим на них в действии при определении компонента, возвращающего четыре
2. Ключевые фрагменты
Как сказано в документации React, Фрагменты, объявленные с явным
Например, предположим, что у вас есть массив объектов, каждый элемент которого представляет автора. Ваша цель — отобразить всех авторов, используя данные из этого массива. Этого можно достичь, сопоставив каждый элемент массива с соответствующим элементом HTML, который требуется React, чтобы иметь уникальный ключ. Так как React Fragments поддерживает ключевые реквизиты, вы можете использовать их для достижения этой цели, не вводя никакой дополнительной разметки. Давайте посмотрим на это на живом примере:
3. Условный рендеринг
Когда дело доходит до условного рендеринга, React требует, чтобы вы возвращали один элемент в обеих ветвях. Именно здесь могут вступить в игру React Fragments, упрощающие визуализацию групп элементов и избегающие добавления ненужных дополнительных тегов, как в следующем примере:
Заключение
В этой статье мы рассмотрели фрагменты React и почему они являются неизбежной функцией, которую должен освоить каждый разработчик React. Фрагменты позволяют создавать лучшую структуру DOM, избегая вставки ненужных
Спасибо за прочтение! Я надеюсь, что вы нашли эту статью полезной. Не стесняйтесь обращаться ко мне с любыми вопросами, комментариями или предложениями.
