Чому ми не повинні використовувати в React JS

Як ми знаємо, ми зазвичай використовуємо DIV, щоб створити контейнер або загорнути кілька елементів в один елемент, а потім можемо застосувати до них стиль одночасно.

У React JSx ми зазвичай використовуємо div, щоб помістити в нього кілька компонентів, які повертаються як єдиний компонент.
Як ви можете бачити нижче:

return (
<div> <Home /> <Main /> <Blogs /> <footer />
</div>
)

Хоча ми можемо видалити DIV і звільнити додатковий простір у DOM.
Ось кілька альтернатив, які ми можемо використовувати замість DIV навколо компонентів.

React Js версії 16.2 представляє нову функцію Фрагментація концепція. Давайте розглянемо це глибше.

Тепер React Fragment працює так само, як DIV, як оболонка навколо компонентів.
Дивіться цей приклад:

return (
<React.Fragment> <Home /> <Main /> <Blogs /> <footer />
<React.Fragment />
)

АБО ми можемо використати тег Shothand Fragment (< > < />) замість

це точно так само, як

return (
<> <Home /> <Main /> <Blogs /> <footer />
< />
)

Переваги використання фрагмента:

1. ШВИДКО
Як ми знаємо, тег DIV створює вузол у DOM і займає деякий простір у DOM, але React. Фрагмент не створює вузол у DOM, тому він не займатиме місця в DOM
що робить програму трохи швидшою, ніж зазвичай.

2. Менше захаращений DOM
Наявність багатьох нерелевантних вузлів робить код безладним і його важко читати, коли програма зростає. оскільки ми могли б мати кілька батьківських компонентів із вкладеними дочірніми компонентами, що ускладнює наш код і стає перешкодою для належного налагодження коду. Але з фрагментом код виглядає більш зрозумілим і легким для розуміння та налагодження.

Висновок:
Використання Fragment в останній версії React буде вважатися хорошою практикою, якої слід дотримуватися. Більшість розробників не звертають уваги на подібні дрібниці, які можуть допомогти знищити архітектуру програми, коли вона розростається в майбутньому.

За винятком того, що для цього немає виняткових критеріїв, ми повинні використовувати DIV, щоб додати деякі класи та додати йому стиль.

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

Залишатися в безпеці! Будьте щасливі!

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
• джерело: https://www.codementor.io/rizatech/why-we-shouldn-t-use-div-in-react-js-23a34159bv