De ce nu ar trebui să folosim în React JS

De ce nu ar trebui să folosim în React JS

Nodul sursă: 2035537

După cum știm, folosim de obicei DIV pentru a face un container sau pentru a înfășura mai multe elemente în interiorul unui element și apoi le putem aplica un stil deodată.

În React JSx, folosim de obicei div pentru a pune mai multe componente în interiorul acestuia pentru a reveni ca o singură componentă.
După cum puteți vedea mai jos:

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

Deși, putem elimina DIV și eliberam spațiu suplimentar în DOM.
Iată câteva alternative pe care le putem folosi în loc de DIV în jurul componentelor.

React Js versiunea 16.2, introduce o nouă caracteristică Fragmentarea concept. Să ne uităm mai profund.

Acum React Fragment funcționează exact la fel ca DIV ca un înveliș în jurul componentelor.
Vezi acest exemplu:

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

SAU putem folosi fragmentul eticheta Fragment shothand (< > < />) în loc de

aceasta este exact la fel ca

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

Beneficiile utilizării Fragmentului:

1. RAPID
După cum știm, eticheta DIV creează un nod în DOM și ocupă ceva spațiu în DOM, dar React. Fragmentul nu creează un nod în DOM, deci nu va ocupa spațiu în DOM
ceea ce face ca aplicația să fie puțin mai rapidă decât de obicei.

2. DOM mai puțin aglomerat
Având multe noduri irelevante, codul este dezordonat și greu de citit atunci când aplicația crește. deoarece am putea avea mai multe componente părinte cu componentă copil imbricată, ceea ce face codul nostru mai dezordonat și devine o barieră în calea depanării codului într-un mod corect. Dar cu Fragment, codul pare mai clar și ușor de înțeles și de depanat.

Concluzie:
Utilizarea Fragment în cea mai recentă versiune de React va fi considerată o practică bună de urmat. Majoritatea dezvoltatorilor nu acordă atenție lucrurilor mărunte de genul acesta, care ar putea ajuta la distrugerea arhitecturii aplicației atunci când aceasta va crește în viitor.

Cu excepția faptului că nu există criterii excepționale pentru asta, trebuie să folosim DIV pentru a adăuga niște clase și pentru a-i adăuga stil.

Mulțumesc foarte mult pentru sprijinul tău. Urmărește și împărtășește cu colegii tăi.
Rămâneți pe fază pentru articolele viitoare ca acesta.

Stai in siguranta! Rămâi fericit!

Timestamp-ul:

Mai mult de la Codementor React Fapt