15 Αντιδράστε τις βέλτιστες πρακτικές που πρέπει να ακολουθήσετε το 2020

Αντιδράστε τις βέλτιστες πρακτικές


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

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

Σήμερα, συνεχίζουμε το θέμα και σας δείχνουμε τις πιο θεμελιώδεις από τις βέλτιστες πρακτικές του React:

Contents

�� 1. Διατηρήστε τα εξαρτήματα μικρά και ειδικά για τη λειτουργία

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

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

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

♻️ 2. Η επαναχρησιμοποίηση είναι σημαντική, συνεπώς συνεχίστε τη δημιουργία νέων στοιχείων στο ελάχιστο απαιτούμενο

Τηρώντας τον κανόνα μιας συνάρτησης = ένα στοιχείο, μπορείτε να βελτιώσετε την επαναχρησιμοποίηση των στοιχείων. Αυτό σημαίνει ότι πρέπει να παραλείψετε την προσπάθεια δημιουργίας ενός νέου στοιχείου για μια συνάρτηση εάν υπάρχει ήδη ένα στοιχείο για αυτήν τη συνάρτηση.

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

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

Για παράδειγμα, μπορείτε ακόμη να προχωρήσετε και να δημιουργήσετε ένα στοιχείο Button που μπορεί να χειριστεί εικονίδια. Στη συνέχεια, κάθε φορά που χρειάζεστε ένα κουμπί, θα έχετε ένα στοιχείο για χρήση. Κάνοντας το πιο αρθρωτό θα σας επιτρέψει να καλύψετε πολλές περιπτώσεις με το ίδιο κομμάτι κώδικα. Πρέπει να στοχεύσετε κάπου στη μέση. Τα στοιχεία σας πρέπει να είναι αρκετά αφηρημένα, αλλά δεν πρέπει να είναι υπερβολικά περίπλοκα.

Η κλάση IconButton επεκτείνει το React.Component {
[…]
απόδοση () {
ΕΠΙΣΤΡΟΦΗ (

)
}
}

�� 3. Ενοποίηση διπλού κώδικα – ΣΤΕΓΝΩΤΕ τον κωδικό σου

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

Δεν διαφέρει επίσης εδώ, καθώς οι βέλτιστες πρακτικές του React σάς καθοδηγούν επίσης να διατηρείτε τον κώδικα σύντομο και ακριβή. Ένας τρόπος για να το κάνετε αυτό είναι να αποφύγετε την επανάληψη – Μην επαναλαμβάνετε τον εαυτό σας (ΣΤΕΓΝΟ).

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

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

κουμπιά const = [‘facebook’, ‘twitter’, ‘youtube’];

ΕΠΙΣΤΡΟΦΗ (

{
keys.map ((κουμπί) => {
ΕΠΙΣΤΡΟΦΗ (

)
})
}

)

�� 4. Βάλτε CSS σε JavaScript

Όταν ξεκινάτε να εργάζεστε σε ένα έργο, είναι συνήθης πρακτική να διατηρείτε όλα τα στυλ CSS σε ένα αρχείο SCSS. Η χρήση ενός καθολικού προθέματος αποτρέπει τυχόν πιθανές συγκρούσεις ονόματος. Ωστόσο, όταν το έργο σας κλιμακωθεί, αυτή η λύση ενδέχεται να μην είναι εφικτή.

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

Ακολουθεί ένα παράδειγμα χρήσης του EmotionJS στο έργο σας. Το EmotionJS μπορεί να δημιουργήσει πλήρη αρχεία CSS για την παραγωγή σας. Αρχικά, εγκαταστήστε το EmotionJS χρησιμοποιώντας npm.

εγκατάσταση npm – αποθήκευση @ συγκίνηση / πυρήνα

Στη συνέχεια, πρέπει να εισαγάγετε το EmotionJS στην εφαρμογή σας.

εισαγάγετε {jsx} από “@ emosi / core”

Μπορείτε να ορίσετε τις ιδιότητες ενός στοιχείου όπως φαίνεται στο παρακάτω απόσπασμα:

ας το Component = props => {
ΕΠΙΣΤΡΟΦΗ (

)
}

Εδώ είναι ο σύνδεσμος για το πλήρες τεκμηρίωση του EmotionJS.

�� 5. Σχολιάστε μόνο όπου είναι απαραίτητο

Επισυνάψτε σχόλια στον κώδικα μόνο όπου είναι απαραίτητο. Αυτό δεν συμβαδίζει μόνο με τις βέλτιστες πρακτικές του React, αλλά εξυπηρετεί ταυτόχρονα δύο σκοπούς:

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

�� 6. Ονομάστε το στοιχείο μετά τη συνάρτηση

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

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

Ένα άλλο παράδειγμα, είναι προτιμότερο να ονομάσετε ένα στοιχείο Avatar έτσι ώστε να μπορεί να χρησιμοποιηθεί οπουδήποτε – για συγγραφείς, χρήστες ή σε σχόλια. Αντ ‘αυτού, εάν ονομάσουμε το στοιχείο AuthorAvatar στο πλαίσιο της χρήσης του, θα περιορίζαμε τη χρησιμότητα αυτού του στοιχείου.

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

�� 7. Χρησιμοποιήστε κεφαλαία για ονόματα συστατικών

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

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

Σε περίπτωση που το JSX δεν είναι η γλώσσα επιλογής σας, μπορείτε να χρησιμοποιήσετε πεζά γράμματα. Ωστόσο, αυτό μπορεί να μειώσει την επαναχρησιμοποίηση στοιχείων πέρα ​​από το έργο σας.

�� 8. Λάβετε υπόψη τις άλλες συμβάσεις ονομασίας

Όταν εργάζεστε με το React, χρησιμοποιείτε γενικά αρχεία JSX (Επέκταση JavaScript). Κάθε στοιχείο που δημιουργείτε για το React θα πρέπει επομένως να ονομάζεται στην περίπτωση Pascal ή στη θήκη άνω καμήλας. Αυτό μεταφράζεται σε ονόματα χωρίς κενά και κεφαλαιοποιεί το πρώτο γράμμα κάθε λέξης.

Εάν θέλετε να δημιουργήσετε μια συνάρτηση που υποβάλλει μια φόρμα, θα πρέπει να την ονομάσετε SubmitForm σε κεφαλαία καμήλα, αντί για submForm, subm_form ή subm_form. Η θήκη της άνω καμήλας ονομάζεται συνήθως θήκη Pascal. Εδώ είναι ένα περαιτέρω λίστα παραδειγμάτων ονομάτων μεταβλητής και συνάρτησης στην περίπτωση Pascal.

�� 9. Ξεχωρίστε τις πτυχές της απόδοσης από την απόδοση

Τα στοιχεία στο React μπορούν να είναι κρατικά ή ανιθαγενή. Τα στοιχεία Stateful αποθηκεύουν πληροφορίες σχετικά με την κατάσταση του στοιχείου και παρέχουν το απαραίτητο πλαίσιο. Αντίθετα, τα ανιθαγενή στοιχεία δεν έχουν μνήμη και δεν μπορούν να δώσουν περιβάλλον σε άλλα μέρη της διεπαφής χρήστη. Λαμβάνουν μόνο στηρίγματα (εισόδους) από το γονικό στοιχείο και σας επιστρέφουν στοιχεία JSX. Είναι επεκτάσιμα και επαναχρησιμοποιήσιμα και παρόμοια με την καθαρή λειτουργία στο JavaScript.

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

Οι νεότερες εκδόσεις React v16.8 έχουν μια νέα δυνατότητα – React Hooks, που γράφουν στοιχεία που σχετίζονται με τη λειτουργία. Αυτό μπορεί τελικά να εξαλείψει την ανάγκη για εξαρτήματα που βασίζονται στην τάξη.

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

εισαγωγή RenderTable από το.. / RenderTable “;

class class επεκτείνει το στοιχείο {
state = {φόρτωση: true};

απόδοση () {
const {φόρτωση, tableData} = this.state;
επιστροφή φόρτωσης; :;
}

componentDidMount () {
fetchTableData (). τότε (tableData => {
this.setState ({φόρτωση: false, tableData});
});
}
}

Code 10. Ο κώδικας πρέπει να εκτελείται όπως αναμένεται και να μπορεί να ελεγχθεί

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

Μπορείτε να χρησιμοποιήσετε το JEST για να δοκιμάσετε τον κωδικό React.

�� 11. Όλα τα αρχεία που σχετίζονται με οποιοδήποτε στοιχείο πρέπει να βρίσκονται σε έναν μόνο φάκελο

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

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

Για παράδειγμα, για το στοιχείο φόρμας, όλα τα κομμάτια, όπως αρχεία CSS, εικονίδια, εικόνες, δοκιμές και άλλα υπο-στοιχεία που σχετίζονται με τη φόρμα θα πρέπει όλα να βρίσκονται στον ίδιο φάκελο. Εάν ονομάζετε λογικά τα αρχεία και διατηρείτε λογικά τα σχετικά αρχεία, δεν θα δυσκολευτείτε να τα βρείτε αργότερα.

�� 12. Χρησιμοποιήστε εργαλεία όπως το Bit

Μία από τις βέλτιστες πρακτικές του React που βοηθά στην οργάνωση όλων των στοιχείων του React είναι η χρήση εργαλείων όπως Κομμάτι.

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

�� 13. Χρησιμοποιήστε βιβλιοθήκες αποσπάσματος

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

Υπάρχουν πολλές βιβλιοθήκες αποσπάσματος που μπορείτε να χρησιμοποιήσετε, όπως ES7 React, Redux, JS Snippets κ.λπ..

✍️ 14. Γράψτε δοκιμές για όλο τον κώδικα

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

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

Για το πρώτο, μπορείτε να χρησιμοποιήσετε ένα πρόγραμμα δοκιμής JavaScript, Αστείο για να μιμηθείτε το HTML DOM χρησιμοποιώντας το jsdom για να δοκιμάσετε στοιχεία React. Ενώ μια απόλυτα ακριβής δοκιμή είναι δυνατή μόνο σε ένα πρόγραμμα περιήγησης σε μια πραγματική συσκευή, η Jest παρέχει μια καλή προσέγγιση του πραγματικού περιβάλλοντος δοκιμών κατά τη φάση ανάπτυξης του έργου σας.

�� 15. Ακολουθήστε τους κανόνες χνούδι, χωρίστε τις γραμμές που είναι πολύ μεγάλες

Το Linting είναι μια διαδικασία στην οποία εκτελούμε ένα πρόγραμμα που αναλύει τον κώδικα για πιθανά σφάλματα.

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

Τελικές λέξεις σχετικά με τις βέλτιστες πρακτικές του React

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

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

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Παραδείγματα κώδικα από τον Andrei Băicuș. Ενημερώσεις περιεχομένου από τον Shaumik Daityari

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map