React Fragment против <div>: почему вы должны использовать первый

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

Когда я начал изучать React, я часто использовал ‹div› в качестве родителя или оболочки для переноса нескольких элементов перед возвратом, но это приводило к ненужному увеличению размера дерева DOM, поэтому, когда я узнал о фрагментах React, которые похожи на ‹div › но не увеличивать DOM-дерево, я обрадовался.

Использование ‹div›

<div>
   Hello world
</div>

Элемент ‹div› имеет цепочку прототипов HTMLDivElement =›HTMLElement =›Element =›Node =›EventTarget, тогда как фрагмент документа имеет DocumentFragment =›Node=›EventTarget. Это означает, что ‹div› имеет больше методов и свойств, которые могут привести к избыточному использованию памяти.

Каждый раз, когда мы используем ‹div› для переноса содержимого, когда хотим вернуть несколько элементов из оператора return, мы создаем дополнительный узел, и этот дополнительный div может разрушить DOM в HTML.

Проблемы с использованием ‹div›

Увеличивает размер HTML DOM. В результате браузер пользователя потребляет дополнительную мощность для обработки вашего веб-сайта в браузере.
Слишком большие DOM вызывают высокий расход памяти, задержку обработки стилей и медленную загрузку страниц.
На старых устройствах это может вызвать проблемы с производительностью из-за загромождения HTML-кода.
Из-за большего и более вложенного DOM отладка и отслеживание происхождения дополнительных узлов становятся более сложными.
С помощью Flexbox и Grid сложно поддерживать желаемый макет, поскольку они имеют уникальные отношения родитель-потомок, а добавление div нарушает разметку.

Использование ‹React.Fragment›

<React.Fragment>
   Hello world
</React.Fragment>

Или вы даже можете использовать короткий синтаксис, как показано ниже:

<>
   Hello world
</>

Фрагменты React — это современный и лучший способ добавления нескольких элементов в компонент React без включения их в дополнительные узлы DOM, такие как ‹div› и т. д.

Это устраняет оболочку ‹div›, которая может вызвать проблемы с недопустимым HTML и многое другое, как упоминалось выше.

Преимущества использования ‹React.Fragment›

Лучшая читаемость кода.
Добавлены функции, недоступные ранее для JSX.
Улучшенная семантическая разметка JSX. Элементы-оболочки, такие как ‹div›, используются по мере необходимости, а не потому, что вы вынуждены возвращать один элемент-оболочку.
Меньшая общая разметка dom приводит к повышению производительности рендеринга и снижению затрат памяти.

Заключение

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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.

React Fragment против : почему вы должны использовать первый