Το React είναι ένα από τα πιο δημοφιλή πλαίσια front-end για JavaScript. Σε αντίθεση με άλλα πλαίσια όπως το Angular, είναι πολύ άγνωστο. Επομένως, εναπόκειται σε εσάς να αποφασίσετε πώς θέλετε να γράψετε ή να δομήσετε τον κώδικα React σας.

Αυτό το άρθρο διερευνά ορισμένες πρακτικές που πρέπει να ακολουθήσετε για να βελτιώσετε την απόδοση της εφαρμογής React.

1. Χρήση λειτουργικών εξαρτημάτων και αγκίστρων αντί για τάξεις

Στο React, μπορείτε χρησιμοποιήστε εξαρτήματα κατηγορίας ή λειτουργικά με γάντζους. Θα πρέπει, ωστόσο, να χρησιμοποιείτε λειτουργικά στοιχεία και άγκιστρα πιο συχνά, καθώς έχουν ως αποτέλεσμα πιο συνοπτικό και ευανάγνωστο κώδικα σε σύγκριση με τις κλάσεις.

Εξετάστε το ακόλουθο στοιχείο κλάσης που εμφανίζει δεδομένα από το API της NASA.

Η κλάση NasaData επεκτείνει το React. Συστατικό {
 κατασκευαστής (props) {
 σούπερ (σκηνικά)?
 this.state = {
 δεδομένα: [],
 };
 }
 componentDidMount() {
 φέρω(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {





instagram viewer


 this.setState({
 δεδομένα: json,
 });
 });
 }
 render() {
 const { data } = this.state;
 εάν (!data.length)
 ΕΠΙΣΤΡΟΦΗ (


 Ανάκτηση δεδομένων... 
{" "}



 );
 ΕΠΙΣΤΡΟΦΗ (
 <>
 Λήψη δεδομένων χρησιμοποιώντας το στοιχείο Class 
{" "}
 {data.map((item) => (
{item.title}

 ))}
 );
 }
}

Το ίδιο εξάρτημα μπορεί να γραφτεί χρησιμοποιώντας γάντζους.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 φέρω(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [δεδομένα]);
 ΕΠΙΣΤΡΟΦΗ (
 <>
 Λήψη δεδομένων χρησιμοποιώντας το στοιχείο Class 
{" "}
 {data.map((item) => (
{item.title}

 ))}
 );
};

Παρόλο που το παραπάνω μπλοκ κώδικα κάνει το ίδιο πράγμα με το στοιχείο κλάσης, είναι λιγότερο περίπλοκο, ελάχιστο και εύκολα κατανοητό, γεγονός που συμβάλλει σε μια καλύτερη εμπειρία προγραμματιστή.

2. Αποφυγή χρήσης κατάστασης (εάν είναι δυνατόν)

Η κατάσταση React παρακολουθεί τα δεδομένα τα οποία όταν αλλάξουν ενεργοποιούν το στοιχείο React για εκ νέου απόδοση. Κατά τη δημιουργία εφαρμογών React, αποφύγετε τη χρήση της κατάστασης όσο το δυνατόν περισσότερο, καθώς όσο περισσότερη κατάσταση χρησιμοποιείτε, τόσο περισσότερα δεδομένα πρέπει να παρακολουθείτε σε ολόκληρη την εφαρμογή σας.

Ένας τρόπος για να ελαχιστοποιηθεί η χρήση του κράτους είναι να το δηλώσετε μόνο όταν είναι απαραίτητο. Για παράδειγμα, εάν λαμβάνετε δεδομένα χρήστη από ένα API, αποθηκεύστε ολόκληρο το αντικείμενο χρήστη στην κατάσταση αντί να αποθηκεύετε τις μεμονωμένες ιδιότητες.

Αντί να κάνετε αυτό:

const [όνομα χρήστη, όνομα χρήστη] = useState('')
const [password, setpassword] = useState('')

Κάνε αυτό:

const [χρήστης, setuser] = useState({})

Όταν αποφασίζετε για μια δομή έργου, πηγαίνετε για ένα συστατικό-κεντρικό. Αυτό σημαίνει ότι όλα τα αρχεία που αφορούν ένα στοιχείο σε έναν φάκελο.

Αν δημιουργούσατε ένα Navbar στοιχείο, δημιουργήστε ένα φάκελο που ονομάζεται Navbar που περιέχει το Navbar το ίδιο το στοιχείο, το φύλλο στυλ και άλλα αρχεία JavaSript και στοιχεία που χρησιμοποιούνται στο στοιχείο.

Ένας μόνο φάκελος που περιέχει όλα τα αρχεία ενός στοιχείου καθιστά εύκολη την επαναχρησιμοποίηση, την κοινή χρήση και τον εντοπισμό σφαλμάτων. Εάν θέλετε να δείτε πώς λειτουργεί ένα στοιχείο, πρέπει να ανοίξετε μόνο έναν φάκελο.

4. Αποφύγετε τη χρήση ευρετηρίων ως βασικών στοιχείων

Το React χρησιμοποιεί κλειδιά για να αναγνωρίζει μοναδικά στοιχεία σε έναν πίνακα. Με τα πλήκτρα, το React μπορεί να εντοπίσει ποιο στοιχείο έχει αλλάξει, προστεθεί ή αφαιρεθεί από τον πίνακα.

Τις περισσότερες φορές κατά την απόδοση πινάκων, μπορείτε να χρησιμοποιήσετε το ευρετήριο ως κλειδί.

const Items = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 ΕΠΙΣΤΡΟΦΗ (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
};

Αν και αυτό μερικές φορές λειτουργεί, η χρήση του ευρετηρίου ως κλειδιού μπορεί να δημιουργήσει προβλήματα, ειδικά εάν η λίστα αναμένεται να αλλάξει. Σκεφτείτε αυτή τη λίστα.

const arr = ["item1", "item2", "item3", "item4", "item5"];

Επί του παρόντος, το πρώτο στοιχείο της λίστας, "Στοιχείο 1" βρίσκεται στο μηδέν δείκτη, αλλά αν προσθέσατε ένα άλλο στοιχείο στην αρχή της λίστας, το "Στοιχείο 1Το ευρετήριο θα αλλάξει σε 1, το οποίο αλλάζει τη συμπεριφορά του πίνακα σας.

Η λύση είναι να χρησιμοποιήσετε μια μοναδική τιμή ως ευρετήριο για να διασφαλίσετε ότι διατηρείται η ταυτότητα του στοιχείου της λίστας.

5. Επιλέξτε Fragments αντί Div όπου είναι δυνατόν

Τα στοιχεία React πρέπει να επιστρέφουν κώδικα τυλιγμένο σε μία μόνο ετικέτα συνήθως α ή ένα θραύσμα React. Θα πρέπει να επιλέξετε θραύσματα όπου είναι δυνατόν.

Χρησιμοποιώντας αυξάνει το μέγεθος DOM, ειδικά σε τεράστια έργα, καθώς όσο περισσότερες ετικέτες ή κόμβους DOM έχετε, τόσο περισσότερη μνήμη χρειάζεται ο ιστότοπός σας και τόσο περισσότερη ενέργεια χρησιμοποιεί ένα πρόγραμμα περιήγησης για να φορτώσει τον ιστότοπό σας. Αυτό οδηγεί σε χαμηλότερη ταχύτητα σελίδας και δυνητικά κακή εμπειρία χρήστη.

Ένα παράδειγμα εξάλειψης των περιττών Οι ετικέτες δεν τις χρησιμοποιούν όταν επιστρέφουν ένα μεμονωμένο στοιχείο.

Κουμπί const = () => {
 ΕΠΙΣΤΡΟΦΗ Απεικόνιση;
};

6. Ακολουθήστε τις Συμβάσεις Ονομασίας

Θα πρέπει πάντα να χρησιμοποιείτε το PascalCase όταν ονομάζετε στοιχεία για να τα διαφοροποιείτε από άλλα αρχεία JSX που δεν αποτελούν στοιχεία. Για παράδειγμα: Πεδίο κειμένου, NavMenu, και Κουμπί επιτυχίας.

Χρησιμοποιήστε το camelCase για λειτουργίες που δηλώνονται μέσα σε στοιχεία React όπως handleInput() ή showElement().

7. Αποφύγετε τον επαναλαμβανόμενο κώδικα

Εάν παρατηρήσετε ότι γράφετε διπλότυπο κώδικα, μετατρέψτε τον σε στοιχεία που μπορούν να επαναχρησιμοποιηθούν.

Για παράδειγμα, είναι πιο λογικό να δημιουργείτε ένα στοιχείο για το μενού πλοήγησής σας αντί να γράφετε επανειλημμένα τον κώδικα σε κάθε στοιχείο που απαιτεί μενού.

Αυτό είναι το πλεονέκτημα μιας αρχιτεκτονικής που βασίζεται σε στοιχεία. Μπορείτε να αναλύσετε το έργο σας σε μικρά στοιχεία που μπορείτε να χρησιμοποιήσετε ξανά στην εφαρμογή σας.

8. Χρησιμοποιήστε Object Destructuring για στηρίγματα

Αντί να περάσετε το αντικείμενο props, χρησιμοποιήστε την αποδομή αντικειμένων για να μεταβιβάσετε το όνομα του props. Αυτό απορρίπτει την ανάγκη αναφοράς στο αντικείμενο props κάθε φορά που χρειάζεται να το χρησιμοποιείτε.

Για παράδειγμα, το παρακάτω είναι ένα στοιχείο που χρησιμοποιεί στηρίγματα ως έχουν.

Κουμπί const = (props) => {
 ΕΠΙΣΤΡΟΦΗ {props.text};
};

Με την αποδομή αντικειμένων, αναφέρεστε απευθείας στο κείμενο.

Κουμπί const = ({κείμενο}) => {
 ΕΠΙΣΤΡΟΦΗ {κείμενο};
};

9. Δυναμική απόδοση πινάκων με χρήση χάρτη

Χρήση χάρτης() για δυναμική απόδοση επαναλαμβανόμενων μπλοκ HTML. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε χάρτης() για απόδοση μιας λίστας στοιχείων σε ετικέτες.

const Items = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 ΕΠΙΣΤΡΟΦΗ (
 <>
 {arr.map((elem, index) => {
{elem}
;
 })}
 );
 };

Για λόγους σύγκρισης, δείτε πώς μπορείτε να αποδώσετε τη λίστα χωρίς χάρτης(). Αυτή η προσέγγιση είναι πολύ επαναλαμβανόμενη.

const List = () => {
 ΕΠΙΣΤΡΟΦΗ (


Στοιχείο 1

Στοιχείο 2

Στοιχείο 3

Στοιχείο 4

Στοιχείο 5




 );
};

10. Γράψτε δοκιμές για κάθε στοιχείο React

Γράψτε δοκιμές για τα στοιχεία που δημιουργείτε καθώς μειώνει τις πιθανότητες σφαλμάτων. Η δοκιμή διασφαλίζει ότι τα εξαρτήματα συμπεριφέρονται όπως θα περιμένατε. Ένα από τα πιο κοινά πλαίσια δοκιμών για το React είναι το Jest και παρέχει ένα περιβάλλον όπου μπορείτε να εκτελέσετε τις δοκιμές σας.

Παρόλο που το React είναι κάπως ευέλικτο όσον αφορά τον τρόπο χρήσης του, ακολουθώντας συγκεκριμένες πρακτικές θα σας βοηθήσει να αξιοποιήσετε στο έπακρο την εμπειρία σας.

Όταν ακολουθείτε αυτές τις συμβουλές, έχετε κατά νου το συγκεκριμένο έργο και τους στόχους σας. μερικά θα είναι πιο σχετικά σε ορισμένες περιπτώσεις από άλλα.

Πώς να καταναλώνετε API στο React χρησιμοποιώντας το Fetch και το Axios

Θέλετε να μάθετε πώς να χρησιμοποιείτε τα API; Η κατανόηση του τρόπου κατανάλωσης API στο React είναι βασικό στοιχείο της χρήσης του API.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα