Фрагменты React: простой синтаксис для повышения производительности

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

Итак, давайте рассмотрим все, что вам нужно для освоения фрагментов React.

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

Как указано в официальной документации React, возврат более чем одного элемента HTML - это часто желаемое поведение для компонентов React. Чтобы добиться этого, вы должны обернуть все эти элементы тегом HTML. Это связано с тем, что React требует, чтобы компоненты возвращали только один элемент HTML. Самым простым решением было бы использовать тег <div>. С логической точки зрения этот дополнительный <div> обычно можно считать неуместным, но он имеет последствия.

Во-первых, постоянно используя такой подход, вы делаете DOM более вложенным и, следовательно, более медленным для рендеринга. Во-вторых, такой подход может привести к некорректному HTML, как вы вскоре увидите.

Например, допустим, у вас есть компонент Table, который отображает таблицу HTML, колонки которой отображаются с помощью другого компонента под названием Columns. Вот код, который вы можете использовать для этого:

function Table() {
  return (
    <table>
      <tr>
        <Columns />
      </tr>
    </table>
  );
}

// обертка div, используемая для возврата двух тегов <td>
function Columns() {
  return (
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}

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

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

React-фрагменты были введены именно для решения этой проблемы.

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

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

Как их использовать

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

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

Это приведет к тому, что компонент Table будет переведен в следующий HTML:

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

Как вы можете видеть, в отображаемом HTML нет тега обертки. В отличие от того, что было раньше, это не приведет к некорректному HTML.

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

// использование <> - это то же самое, что использование <React.Fragment>
// использование </> - это то же самое, что использование </React.Fragment>
function Columns() {
  return (
    <>
      <td>Hello</td>
      <td>World</td>
    </>
  );
}

Это приводит к тому же результату, что и в примере выше. Поэтому помните, что пустой тег - это сокращение для <React.Fragment>.

Когда их использовать

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

Поэтому не думайте о фрагментах Reаct как о замене <div> в вашем HTML. Напротив, рассматривайте их как способ избежать ненужных тегов и получить в результате лучшую структуру разметки.

Существует три варианта использования фрагментов React. Давайте рассмотрим их все.

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

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

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

// возвращение 4 <div> без добавление дополнительной обертки <div>
function FragmentExample () {  
  return (
    <>
      <div>
        First div
      </div>
      <div>
        Second div
      </div>
      <div>
        Third div
      </div>
      <div>
        Fourth div
      </div>
    </>
  );  
}
ReactDOM.render(
  <FragmentExample/>,
  document.getElementById('container')
);

Ссылка на Codepen

2. Фрагменты с ключом

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

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

Ссылка на Codepen

3. Условный рендеринг

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

Ссылка на Codepen

Заключение

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

Источник: https://www.sitepoint.com/react-fragments-introduction/