Varför vi inte ska använda i React JS

Som vi vet använder vi vanligtvis DIV för att göra en behållare eller slå in flera element inuti ett element och sedan kan applicera styling på dem på en gång.

I React JSx använder vi vanligtvis div för att placera flera komponenter inuti den för att återgå som en enda komponent.
Som du kan se nedan:

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

Även om vi kan eliminera DIV och frigöra lite extra utrymme i DOM.
Här är några alternativ som vi kan använda istället för DIV runt komponenterna.

React Js version 16.2, introducerar en ny funktion Fragmentering begrepp. Låt oss titta närmare på det.

Nu fungerar React Fragment exakt likadant som DIV som ett omslag runt komponenter.
Se detta exempel:

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

ELLER vi kan använda fragmentet Fragment shothand-taggen (< > < />) istället för

detta är exakt samma som

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

Fördelar med att använda Fragment:

1. SNABB
Som vi vet skapar DIV-taggen en nod i DOM och tar upp lite utrymme i DOM, men React. Fragmentet skapar inte en nod i DOM, så det tar inget utrymme i DOM
vilket gör applikationen lite snabbare än vanligt.

2. Mindre rörig DOM
Att ha många irrelevanta noder gör koden rörig och svår att läsa när applikationen växer. eftersom vi skulle kunna ha flera föräldrakomponenter med kapslad underordnad komponent, vilket gör vår kod stökigare och blir en barriär för att felsöka koden på ett korrekt sätt. Men med Fragment ser koden mer tydlig och lätt att förstå och felsöka.

Slutsats:
Att använda Fragment i den senaste versionen av React kommer att anses vara en bra praxis att följa. De flesta utvecklare uppmärksammar inte små saker som detta, vilket kan hjälpa till att förstöra applikationsarkitekturen när den växer i framtiden.

Förutom att det inte finns några exceptionella kriterier för det måste vi behöva använda DIV för att lägga till några klasser och lägga till stil till det.

Tack så mycket för ditt stöd. Följ och dela med dina kollegor.
Håll utkik efter kommande artiklar som denna.

Var försiktig! Var glad!

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://www.codementor.io/rizatech/why-we-shouldn-t-use-div-in-react-js-23a34159bv