Nagu me teame, kasutame tavaliselt DIV-i konteineri tegemiseks või mitme elemendi mähkimiseks ühe elemendi sisse ja seejärel saame neile korraga stiili rakendada.
React JSx-is kasutame me tavaliselt div, et lisada sellesse mitu komponenti, et naasta ühe komponendina.
Nagu näete allpool:
return (
<div> <Home /> <Main /> <Blogs /> <footer />
</div>
)
Kuigi saame DIV-i kõrvaldada ja vabastada DOM-is lisaruumi.
Siin on mõned alternatiivid, mida saame komponentide ümber kasutada DIV asemel.
React Js versioon 16.2 tutvustab uut funktsiooni Killustatus kontseptsioon. Vaatame seda sügavamalt.
Nüüd töötab React Fragment komponentide ümber ümbrisena täpselt samamoodi nagu DIV.
Vaadake seda näidet:
return (
<React.Fragment> <Home /> <Main /> <Blogs /> <footer />
<React.Fragment />
)
VÕI saame selle asemel kasutada fragmendi shothand tag (< > < />) fragmenti
see on täpselt sama mis
return (
<> <Home /> <Main /> <Blogs /> <footer />
< />
)
Fragmendi kasutamise eelised:
1. KIIRE
Nagu me teame, loob DIV silt DOM-is sõlme ja võtab DOM-is ruumi, kuid React. Fragment ei loo DOM-is sõlme, seega ei võta see DOM-is ruumi
mis muudab rakenduse tavapärasest kiiremaks.
2. Vähem segane DOM
Paljud ebaolulised sõlmed muudavad koodi segaseks ja rakenduse kasvades raskesti loetavaks. kuna meil võib olla mitu ülemkomponenti koos pesastatud alamkomponendiga, mis muudab meie koodi segasemaks ja takistab koodi õiget silumist. Fragmenti puhul näeb kood aga selgem välja ning hõlpsamini mõistetav ja silutav.
Järeldus:
Fragmenti kasutamist Reacti uusimas versioonis peetakse heaks tavaks, mida järgida. Enamik arendajaid ei pööra tähelepanu sellistele pisiasjadele, mis võivad tulevikus kasvades rakenduse arhitektuuri hävitada.
Välja arvatud juhul, kui selleks pole erandlikke kriteeriume, peame mõne klassi lisamiseks ja sellele stiili lisamiseks kasutama DIV-i.
Tänan teid väga toetuse eest. Jälgige ja jagage oma kolleegidega.
Olge kursis selliste tulevaste artiklitega.
Olge turvalised! Jää õnnelikuks!
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
- Allikas: https://www.codementor.io/rizatech/why-we-shouldn-t-use-div-in-react-js-23a34159bv