С выпуском реакции 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
.