Dlaczego nie powinniśmy używać w React JS

Jak wiemy, zazwyczaj używamy DIV do tworzenia kontenerów lub umieszczania wielu elementów w jednym elemencie, a następnie możemy zastosować do nich stylizację jednocześnie.

W React JSx często używamy elementu div, aby umieścić w nim wiele komponentów, które zostaną zwrócone jako pojedynczy komponent.
Jak widać poniżej:

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

Chociaż możemy wyeliminować DIV i zwolnić trochę dodatkowego miejsca w DOM.
Oto kilka alternatyw, których możemy użyć zamiast DIV wokół komponentów.

React Js w wersji 16.2, wprowadza nową funkcję Podział pojęcie. Przyjrzyjmy się temu głębiej.

Teraz React Fragment działa dokładnie tak samo jak DIV jako opakowanie wokół komponentów.
Zobacz ten przykład:

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

LUB możemy zamiast tego użyć fragmentu kodu Fragment shothand (< > < />).

to jest dokładnie to samo co

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

Korzyści z używania fragmentu:

1. SZYBKO
Jak wiemy znacznik DIV tworzy węzeł w DOM i zajmuje trochę miejsca w DOM, ale React. Fragment nie tworzy węzła w DOM, więc nie zajmie miejsca w DOM
co sprawia, że ​​aplikacja jest nieco szybsza niż zwykle.

2. Mniej zaśmiecony DOM
Posiadanie wielu nieistotnych węzłów sprawia, że ​​kod jest bałaganiarski i trudny do odczytania, gdy aplikacja się rozrasta. ponieważ moglibyśmy mieć wiele komponentów nadrzędnych z zagnieżdżonymi komponentami podrzędnymi, co powoduje, że nasz kod jest bardziej bałaganiarski i staje się barierą we właściwym debugowaniu kodu.

Wnioski:
Używanie fragmentu w najnowszej wersji Reacta będzie uważane za dobrą praktykę do naśladowania. Większość programistów nie zwraca uwagi na takie drobiazgi, które mogłyby zniszczyć architekturę aplikacji, gdy ta rozrośnie się w przyszłości.

Z wyjątkiem tego, że nie ma żadnych wyjątkowych kryteriów, musimy użyć DIV, aby dodać kilka klas i dodać do niego styl.

Bardzo dziękuję za wsparcie. Śledź i udostępniaj swoim współpracownikom.
Bądź na bieżąco z nadchodzącymi artykułami, takimi jak ten.

Bądź bezpieczny! Pozostań szczęśliwy!

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://www.codementor.io/rizatech/why-we-shouldn-t-use-div-in-react-js-23a34159bv