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

Итак, что же такого особенного во фрагментах и ​​в чем причина их огромной популярности. Посмотрим….

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

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

Вот простой пример, который поможет вам лучше понять концепцию: –

Hello BlueEast
<h2>MEVRIS Platform</h2>
Making home automation easier and comfortable.
<h2>Some other text</h2>
Even more text.

До выпуска React 16 единственным способом сгруппировать дочерние компоненты было заключить дочерние элементы в div или span.

render() {
  return (
    // Extraneous div element :(
    <div>
      Hello BlueEast
      <h2>MEVRIS Platform</h2>
      Making home automation easier and comfortable.
      <h2>Some other text</h2>
      Even more text.
    </div>
  );
}

Чтобы избежать этого подхода, в React 16 разрешено возвращать массив компонентов из возврата метода рендеринга, как показано ниже:

render() {
 return [
  "Hello BlueEast",
   <h2>MEVRIS Platform</h2>,
   "Making home automation easier and comfortable.",
   <h2>Some other text</h2>,
   "Even more text."
 ];
}

Приведенный выше подход представил некоторые новые стили кодирования, которые не очень соответствовали jsx. Например:-

  • Каждый компонент должен быть разделен запятой.
  • Строки должны быть заключены в кавычки.
  • Все дочерние элементы должны иметь ключевую опору, чтобы избежать предупреждения о ключе React.

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

const Fragment = React.Fragment;

<Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</Fragment>

// This also works
<React.Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</React.Fragment>

Синтаксис фрагмента JSX

Для разработчиков, чтобы сделать работу более удобной, была добавлена ​​синтаксическая поддержка фрагментов в JSX:

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.
    </>
  );
}

В React это вычисляет элемент <React.Fragment/>, как в примере из предыдущего раздела.

ПРИМЕЧАНИЕ. Нереактивные фреймворки, использующие JSX, могут компилироваться во что-то другое.

Вуаля !! Он не добавит какой-либо фактический элемент в DOM

Поддержка «ключевых фрагментов»

Синтаксис пустых тегов JSX <></> не принимает атрибуты, включая ключи.

Если вам нужно предоставить ключи, вы можете использовать <Fragment /> напрямую. Примером использования для этого может быть сопоставление коллекции с массивом фрагментов — например, для создания списка описаний:

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

key — единственный атрибут, который можно передать Fragment.