Waarom we niet zouden moeten gebruiken in React JS

Zoals we weten, gebruiken we meestal DIV om een ​​container te maken of meerdere elementen in één element te wikkelen en er vervolgens tegelijkertijd styling op toe te passen.

In React JSx gebruiken we gewoonlijk div om meerdere componenten erin te plaatsen om als een enkele component terug te keren.
Zoals je hieronder kunt zien:

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

Hoewel, we kunnen de DIV verwijderen en wat extra ruimte vrijmaken in DOM.
Hier zijn enkele alternatieven die we kunnen gebruiken in plaats van DIV rond de componenten.

React Js versie 16.2 introduceert een nieuwe functie de Fragmentatie concept. Laten we er dieper op ingaan.

Nu werkt React Fragment precies hetzelfde als DIV als een wikkel rond componenten.
Zie dit voorbeeld:

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

OF we kunnen het Fragment shothand tag (< > < />) fragment gebruiken in plaats van

dit is precies hetzelfde als

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

Voordelen van het gebruik van Fragment:

1. SNEL
Zoals we weten, creëert de DIV-tag een knooppunt in DOM en neemt het wat ruimte in DOM in beslag, maar React. Het fragment maakt geen node in DOM, dus het neemt geen ruimte in DOM in beslag
waardoor de applicatie iets sneller is dan normaal.

2. Minder rommelige DOM
Het hebben van veel irrelevante knooppunten maakt code rommelig en moeilijk te lezen wanneer de applicatie groeit. omdat we meerdere bovenliggende componenten zouden kunnen hebben met geneste onderliggende componenten, waardoor onze code rommeliger wordt en een belemmering wordt voor het op de juiste manier debuggen van de code. Maar met Fragment ziet de code er duidelijker en gemakkelijker uit om te begrijpen en te debuggen.

Conclusie:
Het gebruik van Fragment in de nieuwste versie van React wordt beschouwd als een goede gewoonte om te volgen. De meeste ontwikkelaars besteden geen aandacht aan dit soort kleine dingen, die kunnen helpen de applicatie-architectuur te vernietigen wanneer deze in de toekomst groeit.

Behalve dat er geen uitzonderlijke criteria zijn, moeten we de DIV gebruiken om enkele klassen toe te voegen en er stijl aan toe te voegen.

Heel erg bedankt voor je steun. Volg en deel met je collega's.
Houd ons in de gaten voor aankomende artikelen zoals deze.

Let op je veiligheid! Blijf gelukkig!

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://www.codementor.io/rizatech/why-we-shouldn-t-use-div-in-react-js-23a34159bv