Perché non dovremmo usare in React JS

Come sappiamo, in genere utilizziamo DIV per creare un contenitore o avvolgere più elementi all'interno di un elemento e quindi applicare lo stile su di essi contemporaneamente.

In React JSx, usiamo comunemente div per inserire più componenti al suo interno da restituire come un singolo componente.
Come puoi vedere di seguito:

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

Tuttavia, possiamo eliminare il DIV e liberare spazio extra nel DOM.
Ecco alcune alternative che possiamo usare al posto di DIV intorno ai componenti.

React Js versione 16.2, introduce una nuova funzionalità il Frammentazione concetto. Esaminiamolo più a fondo.

Ora React Fragment funziona esattamente come DIV come wrapper attorno ai componenti.
Vedi questo esempio:

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

OPPURE possiamo usare lo snippet del tag Fragment shothand (< > < />) invece di

questo è esattamente lo stesso di

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

Vantaggi dell'utilizzo del frammento:

1. VELOCE
Come sappiamo il tag DIV crea un nodo nel DOM e occupa uno spazio nel DOM, ma React. Il frammento non crea un nodo in DOM, quindi non occuperà spazio in DOM
che rende l'applicazione un po' più veloce del solito.

2. DOM meno ingombrante
Avere molti nodi irrilevanti rende il codice disordinato e difficile da leggere quando l'applicazione cresce. poiché potremmo avere più componenti padre con componenti figlio nidificati, che rendono il nostro codice più disordinato e diventano una barriera per il debug del codice in modo corretto. Ma con Fragment, il codice sembra più chiaro e facile da capire e da eseguire il debug.

Conclusione:
L'utilizzo di Fragment nell'ultima versione di React sarà considerato una buona pratica da seguire. La maggior parte degli sviluppatori non presta attenzione a piccole cose come questa, che potrebbero aiutare a distruggere l'architettura dell'applicazione quando crescerà in futuro.

Tranne che non ci sono criteri eccezionali per questo, dobbiamo usare il DIV per aggiungere alcune classi e aggiungere stile ad esso.

Grazie mille per il vostro sostegno. Segui e condividi con i tuoi colleghi.
Resta sintonizzato per i prossimi articoli come questo.

Rimani al sicuro! Sii felice!

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://www.codementor.io/rizatech/why-we-shouldn-t-use-div-in-react-js-23a34159bv