Όπως γνωρίζουμε, συνήθως χρησιμοποιούμε το DIV για να φτιάξουμε ένα δοχείο ή να τυλίξουμε πολλά στοιχεία μέσα σε ένα στοιχείο και στη συνέχεια να εφαρμόσουμε στυλ σε αυτά ταυτόχρονα.
Στο React JSx, χρησιμοποιούμε συνήθως το div για να βάλουμε πολλά στοιχεία μέσα σε αυτό για να επιστρέψουν ως ένα μόνο στοιχείο.
Όπως μπορείτε να δείτε παρακάτω:
return (
<div> <Home /> <Main /> <Blogs /> <footer />
</div>
)
Ωστόσο, μπορούμε να εξαλείψουμε το DIV και να ελευθερώσουμε λίγο επιπλέον χώρο στο DOM.
Εδώ είναι μερικές εναλλακτικές που μπορούμε να χρησιμοποιήσουμε αντί για DIV γύρω από τα εξαρτήματα.
Το React Js έκδοση 16.2, εισάγει μια νέα δυνατότητα το Θρυμματισμός έννοια. Ας το δούμε πιο βαθιά.
Τώρα το React Fragment λειτουργεί ακριβώς όπως το DIV ως περιτύλιγμα γύρω από εξαρτήματα.
Δείτε αυτό το παράδειγμα:
return (
<React.Fragment> <Home /> <Main /> <Blogs /> <footer />
<React.Fragment />
)
Ή μπορούμε να χρησιμοποιήσουμε το απόσπασμα της ετικέτας Fragment Shothand (< > < />) αντί για
αυτό είναι ακριβώς το ίδιο με
return (
<> <Home /> <Main /> <Blogs /> <footer />
< />
)
Οφέλη από τη χρήση Fragment:
1. ΓΡΗΓΟΡΑ
Όπως γνωρίζουμε η ετικέτα DIV δημιουργεί έναν κόμβο στο DOM και καταλαμβάνει χώρο στο DOM, αλλά το React. Το τμήμα δεν δημιουργεί κόμβο στο DOM, επομένως δεν θα πάρει χώρο στο DOM
που κάνει την εφαρμογή λίγο πιο γρήγορη από το συνηθισμένο.
2. Λιγότερο ακατάστατο DOM
Η ύπαρξη πολλών άσχετων κόμβων κάνει τον κώδικα ακατάστατο και δυσανάγνωστο όταν μεγαλώνει η εφαρμογή. καθώς θα μπορούσαμε να έχουμε πολλαπλό γονικό στοιχείο με ένθετο θυγατρικό στοιχείο, το οποίο κάνει τον κώδικά μας πιο βρώμικο και γίνεται εμπόδιο για τον εντοπισμό σφαλμάτων του κώδικα με τον σωστό τρόπο Αλλά με το Fragment, ο κώδικας φαίνεται πιο ξεκάθαρος και εύκολος στην κατανόηση και τον εντοπισμό σφαλμάτων.
Συμπέρασμα:
Η χρήση του Fragment στην πιο πρόσφατη έκδοση του React θα θεωρείται καλή πρακτική που πρέπει να ακολουθήσετε. Οι περισσότεροι προγραμματιστές δεν δίνουν προσοχή σε μικρά πράγματα όπως αυτό, κάτι που θα μπορούσε να βοηθήσει στην καταστροφή της αρχιτεκτονικής εφαρμογών όταν αναπτυχθεί στο μέλλον.
Εκτός από το ότι δεν υπάρχουν εξαιρετικά κριτήρια για αυτό, πρέπει να χρησιμοποιήσουμε το DIV για να προσθέσουμε κάποιες κλάσεις και να προσθέσουμε στυλ σε αυτό.
Σας ευχαριστώ πολύ για την υποστήριξή σας. Ακολουθήστε και μοιραστείτε με τους συναδέλφους σας.
Μείνετε συντονισμένοι για επερχόμενα άρθρα όπως αυτό.
Μείνε ασφαλής! Μείνετε Ευτυχισμένοι!
- SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
- Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
- πηγή: https://www.codementor.io/rizatech/why-we-shouldn-t-use-div-in-react-js-23a34159bv