Упростите свой код и повысьте производительность с помощью React Fragments.

Фрагменты React — это мощная функция React, которую многие разработчики игнорируют или используют, не полностью понимая ее преимущества. Тем не менее, освоение фрагментов React необходимо каждому разработчику React, независимо от уровня его навыков.

Почему существуют фрагменты React

Фрагменты React были введены для удовлетворения общего требования к компонентам React: необходимости возвращать несколько элементов HTML. По умолчанию компоненты React могут возвращать только один элемент HTML, поэтому разработчики часто прибегают к заключению нескольких элементов в тег оболочки <div>. Хотя этот подход может показаться безобидным, он имеет несколько последствий. Во-первых, это увеличивает уровень вложенности DOM, что может снизить производительность рендеринга. Во-вторых, это может привести к неправильной структуре HTML.

Рассмотрим сценарий, в котором у вас есть компонент Table, отображающий HTML-таблицу, причем каждый столбец обрабатывается компонентом Columns. Без использования React Fragments вы бы обернули столбцы в <div>, чтобы вернуть несколько тегов <td>:

function Table() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}
function Columns() {
  return (
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

Однако это приводит к недопустимому HTML:

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Фрагменты React были представлены как решение этой проблемы.

Что такое React-фрагменты

Фрагменты React предоставляют специальный синтаксис, который позволяет группировать несколько элементов HTML без добавления дополнительных узлов в DOM. Они позволяют группировать дочерние компоненты без добавления ненужной разметки в отображаемый HTML. Это приводит к более чистому и эффективному коду.

Чтобы использовать фрагменты React, вы заключаете свои дочерние элементы в тег <React.Fragment>. В предыдущем примере компонент Columns можно переписать с помощью React Fragments следующим образом:

function Columns() {
  return (
    <React.Fragment>
      <td>Hello</td>
      <td>World</td>
    </React.Fragment>
  );
}

Результирующий HTML-код не будет содержать тега-обертки:

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

В качестве альтернативы вы можете использовать сокращенный синтаксис, который выглядит как пустой тег:

function Columns() {
  return (
    <>
      <td>Hello</td>
      <td>World</td>
    </>
  );
}

Оба подхода дают один и тот же результат, а пустой тег служит сокращением для <React.Fragment>.

Когда использовать React-фрагменты

Фрагменты React следует использовать всякий раз, когда вы в противном случае вводили бы ненужную оболочку <div> для возврата нескольких элементов HTML. Цель состоит в том, чтобы избежать ненужных тегов и улучшить общую структуру разметки.

Давайте рассмотрим три распространенных случая использования React Fragments.

1. Обтекание нескольких HTML-элементов

Наиболее распространенный вариант использования React Fragments — это упаковка нескольких элементов HTML. Всякий раз, когда вам нужно, чтобы компонент возвращал несколько элементов, вы можете обернуть их тегом <React.Fragment> или <>. Этот подход рекомендуется, поскольку использование любого другого тега-оболочки может привести к недопустимому HTML-коду.

Давайте рассмотрим пример, в котором мы определяем компонент, возвращающий четыре HTML-элемента:

function MultipleElements() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <button>Submit</button>
    </React.Fragment>
  );
}

При использовании React Fragments результирующий HTML не будет содержать никаких дополнительных тегов обертки:

<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<button>Submit</button>

Это улучшает структуру отображаемого HTML и позволяет избежать ненужной вложенности.

2. Ключевые фрагменты

Фрагменты, объявленные с явным синтаксисом <React.Fragment>, могут иметь ключи. Ключи полезны при работе с коллекциями JavaScript, такими как массивы. Обратите внимание, что короткий синтаксис (<>) не поддерживает ключи.

Давайте рассмотрим сценарий, в котором у нас есть массив объектов, представляющих авторов, и мы хотим отобразить имя каждого автора как элемент списка. С помощью фрагментов React мы можем отображать массив и использовать ключи для обеспечения эффективного рендеринга:

function AuthorList({ authors }) {
  return (
    <ul>
      {authors.map((author) => (
        <React.Fragment key={author.id}>
          <li>{author.name}</li>
        </React.Fragment>
      ))}
    </ul>
  );
}

Предоставляя уникальный реквизит key для каждого фрагмента, React может оптимизировать процесс рендеринга. Это особенно важно, когда список может динамически меняться, поскольку React может эффективно обновлять и согласовывать элементы.

Заключение

В этой статье мы рассмотрели фрагменты React и их значение в разработке React. Фрагменты React предоставляют простой синтаксис для группировки нескольких элементов HTML без добавления ненужной разметки. Освоив React Fragments, вы сможете улучшить структуру DOM, повысить производительность и написать более чистый код.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу