2019 Βέλτιστες πρακτικές του ReactJS

[update, May 22nd, 2019] - Προσθέστε μια άλλη βέλτιστη πρακτική στη λίστα. Δες παρακάτω.

[ενημέρωση, 19 Μαΐου, 2019] - Προστέθηκε ένα νέο άρθρο σχετικά με το Redux και το Redux-Thunk. Απλά εξηγείται με πολλά παραδείγματα.

[Ενημέρωση, 23 Ιουλίου 2019] - Λόγω πολλών αιτημάτων, θα προσθέσουμε ένα νέο άρθρο σχετικά με τα αντιπαράγωγα ReactJS. Ο σύνδεσμος θα αναρτηθεί εδώ. Υποστηρίξτε με ένα χτύπημα. Σας ευχαριστώ!

1. Καλωσορίζω, ReactJS

Τα τελευταία πέντε χρόνια, το ReactJS αυξάνεται ραγδαία στη δημοτικότητά του και από τις αρχές του 2018 έγινε δημοφιλέστερο από το jQuery, τουλάχιστον όσον αφορά τις αναζητήσεις Google. Δεν θα συγκρίνουμε εργαλεία όσον αφορά τη ζήτηση τους στις μηχανές αναζήτησης. Ωστόσο, αυτό μας δίνει μια σαφή αντίληψη ότι η βιβλιοθήκη ReactJS είναι σίγουρα δημοφιλής. Με αυτό που είπαμε, ας μιλήσουμε για τη χρήση του ReactJS για τη δημιουργία καλύτερων εφαρμογών Front-End.

Σας αρέσει πραγματικά να βλέπετε να απολαμβάνετε τα γραπτά μας. Έτσι, αν βρείτε αυτή τη θέση χρήσιμη, πατήστε το κουμπί παρακάτω :)

Τι κάνει το ReactJS τόσο δημοφιλές, εκτός από το γεγονός ότι το Facebook το δημιούργησε; Πιστεύουμε ότι οφείλεται στο γεγονός ότι το ReactJS είναι απλό να συνεργαστεί. Είναι εύκολο να μάθει και είναι βελτιστοποιημένο για απόδοση χρησιμοποιώντας το εικονικό DOM του. Με την υλοποίηση του εικονικού DOM, το ReactJS προσφέρει μια μηχανή rendering έναν τρόπο να αναπαράγει γρήγορα μόνο τα στοιχεία που πρέπει να ενημερωθούν. Ως αποτέλεσμα, οι προγραμματιστές του ReactJS λαμβάνουν εφαρμογές που είναι γρήγορες και ευχάριστες στη χρήση.

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

Ακολουθούν ορισμένες τάσεις για τα τελευταία πέντε χρόνια από την Google:

Μία από τις βασικές έννοιες του ReactJS είναι ότι δημιουργείτε επαναχρησιμοποιήσιμα, συνεκτικά συστατικά που μπορούν να συνδυαστούν και να σχηματίσουν μια εφαρμογή. Κάθε συνιστώσα μπορεί να έχει τη δική της κατάσταση, εκτός αν είναι άνευ όρων (περισσότερα για αυτό αργότερα). Το ReactJS συγκεντρώνει όλα τα στοιχεία σας σε ένα κουβά και εφαρμόζει ορισμένες τεχνικές βελτιστοποίησης, όπως το εικονικό DOM, για να καταστήσει αποτελεσματικά την εφαρμογή στο πρόγραμμα περιήγησης.

Ας ξεκινήσουμε διευκρινίζοντας τι είναι ένα συστατικό και τι δεν είναι. Το στοιχείο είναι ένα αυτόνομο, ανεξάρτητο τμήμα του UI. Κάθε στοιχείο μπορεί να ενσωματώσει άλλα στοιχεία, όπου το καθένα έχει την κατάστασή του και το API. Κατά συνθήκη, θα πρέπει να διατηρήσετε τον κώδικα που σχετίζεται με τα στοιχεία σας μέσα σε ένα συγκεκριμένο φάκελο. Εάν διατηρήσετε όλα τα αρχεία για κάθε στοιχείο σε ένα μόνο φάκελο, μπορείτε να δημιουργήσετε επαναχρησιμοποιήσιμα στοιχεία, ώστε να μπορείτε να τα χρησιμοποιήσετε στις άλλες εφαρμογές.

2. Τύποι στοιχείων ReactJS

Υπάρχουν τέσσερις κύριοι τύποι στοιχείων ReactJS:

  1. Κατασκευαστικά στοιχεία με βάση το κράτος ή πλήρεις κλάσεις
  2. Στοιχεία με βάση το κράτος ή με βάση τις λειτουργίες
  3. Παρουσιαστικά (ή υψηλής τάξης) συστατικά
  4. Συστατικά δοχείων

Μια προτιμώμενη δομή του δέντρου στοιχείων σας εμφανίζεται στα αριστερά.

Κατασκευαστικά στοιχεία με βάση το κράτος ή συστατικά που βασίζονται στην τάξη

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

Ακολουθεί ένα παράδειγμα της πλήρους κατάστασης, βασισμένης σε τάξη στοιχείου ReactJS:

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

Το κράτος είναι ένα αντικείμενο που εκτίθεται σε ένα στοιχείο. Το κρατικό πεδίο περιορίζεται στο εσωτερικό του στοιχείου όπου δηλώνεται. Τα στοιχεία μπορούν να αρχικοποιήσουν την κατάσταση και να τα μεταβιβάσουν σε άλλο στοιχείο. Μπορούμε να δηλώσουμε μια κατάσταση με δύο τρόπους, χρησιμοποιώντας τον κατασκευαστή ή δηλώνοντας την ιδιοκτησία του κράτους. Με τη δεύτερη περίπτωση, αυτή είναι μόνο συντακτική ζάχαρη, και το transpiler (όπως η Babel) θα μετατρέψει τη δήλωσή σας ιδιοκτησίας του κράτους στον κατασκευαστή για εσάς κάτω από την κουκούλα. Τα συστατικά που βασίζονται σε κατάσταση και τα εξαρτήματα που βασίζονται σε λειτουργίες και το τι είναι τα React Hooks για τα εξαρτήματα που βασίζονται σε λειτουργίες είναι απλά απλές λειτουργίες JavaScript. Τα λειτουργικά εξαρτήματα επιστρέφουν ένα στοιχείο ReactJS ή μια συλλογή, η οποία μπορεί να είναι ένα «μερικό συστατικό» όπως το <> ... ή ένα συστατικό που βασίζεται πλήρως στη λειτουργία με τα λογικά και ενσωματωμένα στοιχεία. Δεδομένου ότι δεν μπορείτε να χρησιμοποιήσετε έναν κατασκευαστή σε ένα λειτουργικό στοιχείο (καλά, στην πραγματικότητα το κάνετε από το ReactJS v16.8), δεν μπορείτε να κάνετε την συνιστώσα σας γεμάτη κατάσταση. Είναι λιγότερο άβολο, επειδή δεν μπορείτε να διατηρήσετε δεδομένα σε αυτούς τους τύπους στοιχείων. Τις περισσότερες φορές περνάτε στη βάση στη συνιστώσα που βασίζεται σε λειτουργίες για να καταστήσει το UI της. Εδώ είναι ένα παράδειγμα της συνιστώσας ReactJS που βασίζεται σε λειτουργίες χωρίς λειτουργικότητα:

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

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

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

Το Reagent Hooks επιδιώκει επίσης να απλοποιήσει το σχεδιασμό εφαρμογών αποφεύγοντας τα εξαρτήματα που δεν έχουν ή δεν χρειάζονται κατασκευαστές παρόλο που δηλώνονται ως κλάσεις. Τις περισσότερες φορές εργάζεστε με εξαρτήματα χωρίς κρατήσεις αν σκέφτεστε για τον ιδανικό σχεδιασμό της εφαρμογής σας. Ţieγια Tύπου jsme αγωνιστικά (αθλητικό) και στοίχημα για να κλέμε το ντε φάκελλο, Αυτό μας επιτρέπει να αποσυνδέουμε την οπτική αναπαράσταση του εξαρτήματος από τη συμπεριφορά του.

3. Data-Down, Ενέργειες-Up

Ποιο είναι το σχέδιο σχεδιασμού «Data Down, Actions Up»; Ουσιαστικά σημαίνει ότι έχετε ένα στοιχείο Υψηλής Τάξης (HOC - βλ. Εξήγηση παρακάτω) το οποίο δέχεται τα δεδομένα στα `σκηνικά 'του και μεταβιβάζει αυτά τα δεδομένα κάτω στην άποψη του ή σε ένθετα συστατικά. Για να αλληλεπιδράσουν με το στοιχείο, οι χρήστες ενεργοποιούν δράσεις όπως το πάτημα ενός κουμπιού και το στοιχείο ανταποκρίνεται σε αυτή την αλληλεπίδραση εκπέμποντας συμβάντα. Για να πούμε, ενεργοποιεί ένα γεγονός επάνω, προς την αντίθετη κατεύθυνση με τον τρόπο που τα δεδομένα πέρασαν.

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

4. Συστατικό υψηλής παραγγελίας

Το στοιχείο υψηλής παραγγελίας (ή HOC) είναι ουσιαστικά ένα μοτίβο σχεδίασης, επίσης γνωστό ως μοτίβο διακοσμητή. Στο ReactJS, ένα HOC είναι ένα συστατικό που περιβάλλει ένα άλλο συστατικό προσθέτοντας επιπλέον λειτουργικότητα ή επιπλέον ιδιότητες. Αυτό επιτρέπει την αφαίρεση από κάποια κοινώς χρησιμοποιούμενη λογική και διατηρεί τον κώδικα σας DRY. Είναι ο τρόπος με τον οποίο διανέμετε τη σύνθετη δομή εξαρτημάτων μεταξύ άλλων στοιχείων στο ReactJS και έναν τρόπο αποσύνδεσης της λογικής εφαρμογής και της διεπαφής χρήστη. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το στοιχείο δοχείου ως HOC για το συστατικό του κουμπιού παρουσίασης.

Ακολουθεί ένα παράδειγμα της συνιστώσας HOC ReactJS:

5. Στοιχεία δοχείου

Τα συστατικά του δοχείου, από την άλλη πλευρά, έχουν λογική για να ορίσουν την κατάσταση ή να έχουν λειτουργίες για να εκπέμπουν συμβάντα μέχρι ένα γονικό στοιχείο. Ο γενικός κανόνας του αντίχειρα είναι να διατηρήσετε το συστατικό σας όσο το δυνατόν απλούστερο με την αρχή της αρχής του σχεδιασμού της αρχής της ενιαίας ευθύνης, πράγμα που ουσιαστικά σημαίνει ότι το συστατικό σας πρέπει να κάνει ένα πράγμα αλλά το κάνει καλά. Τις περισσότερες φορές, αυτοί οι τύποι εξαρτημάτων είναι οι HOC που φιλοξενούν λίγα στοιχεία παρουσίασης. Παρουσιαστικά στοιχεία Γράφοντας απλά εξαρτήματα μπορεί να μειωθεί η συνολική πολυπλοκότητά σας. Εδώ εμφανίζονται τα στοιχεία παρουσίασης. Αυτά τα στοιχεία θα πρέπει να έχουν ελάχιστη ή μη λογική. Τα παρουσιακά στοιχεία δέχονται δεδομένα και εκπέμπουν γεγονότα σε μια επανάκληση που λαμβάνουν ως τμήμα των στηρίξεών τους. Ουσιαστικά, αυτός ο τύπος εξαρτήματος καθιστά UI και εκτελεί μια συνάρτηση που πέρασε σε αυτό όταν συμβαίνει κάποια ενέργεια στο UI του. Αυτός ο τύπος εξαρτήματος αποτελεί δομικό στοιχείο και μερικές φορές αναφέρεται ως στοιχείο χαμηλής παραγγελίας (ή LOC).

6. Κατάλογος καλών πρακτικών

  • [Ενημέρωση 22 Μαΐου 2019] - Όταν χρησιμοποιείτε το ReduxJS, διαιρέστε τον κώδικα Reducer σε μικρότερες μεθόδους για να αποφύγετε το τεράστιο JSON στο Reducer σας.
  • Εξετάστε τη χρήση του TypeScript στις εφαρμογές σας, αν δεν το κάνετε ήδη.
  • Χρησιμοποιήστε τη γεννήτρια εφαρμογής δημιουργίας αντιδράσεων για την εκκίνηση της εφαρμογής ReactJS.
  • Κρατήστε τον κώδικά σας DRY. Μην επαναλάβετε τον εαυτό σας, αλλά να έχετε κατά νου ότι ο διπλός κώδικας ΔΕΝ είναι πάντα κακό.
  • Αποφύγετε να έχετε μεγάλες τάξεις, μεθόδους ή συστατικά, συμπεριλαμβανομένων των μειωτών.
  • Χρησιμοποιήστε πιο ισχυρά διαχειριστές για να διαχειριστείτε την κατάσταση εφαρμογής, όπως το Redux.
  • Χρησιμοποιήστε συγχρονιστή συμβάντων, όπως το Redux-Thunk, για αλληλεπιδράσεις με το back end API.
  • Αποφύγετε να περάσετε πάρα πολλά χαρακτηριστικά ή επιχειρήματα. Περιορίστε τον εαυτό σας σε πέντε στηρίγματα που περνάτε στη συνιστώσα σας.
  • Χρησιμοποιήστε τα πρότυπα ReactJS defaultProps και ReactJS.
  • Χρησιμοποιήστε το linter, διασπάστε τις γραμμές που είναι πολύ μεγάλες.
  • Διατηρήστε το δικό σας αρχείο ρυθμίσεων jslint.
  • Χρησιμοποιείτε πάντα έναν διαχειριστή εξάρτησης με ένα αρχείο κλειδώματος, όπως NPM ή νήματα.
  • Δοκιμάστε τον κώδικα που συνήθως αποκτάτε, έναν κώδικα που είναι πολύπλοκος και είναι επιρρεπής σε σφάλματα.
  • Γράψτε περισσότερες δοκιμές που δίνουν περισσότερη κάλυψη δοκιμής για τον κώδικα σας με λίγη προσπάθεια και δοκιμαστικό κώδικα για να διασφαλιστεί η σωστή λειτουργία του.
  • Κάθε φορά που βρίσκετε ένα σφάλμα, βεβαιωθείτε ότι έχετε γράψει πρώτα ένα τεστ.
  • Χρησιμοποιήστε εξαρτήματα που βασίζονται σε λειτουργίες, αρχίζοντας να χρησιμοποιείτε το React Hooks, έναν νέο τρόπο ReactJS για τη δημιουργία συνιστωσών με πλήρη κατάσταση.
  • Χρησιμοποιήστε ESD de-structuring για τα στηρίγματα σας.
  • Χρησιμοποιήστε την υπό όρους απόδοση.
  • Χάρτης χρήστη () `για τη συλλογή και την απόδοση συλλογών στοιχείων.
  • Χρησιμοποιήστε μερικά στοιχεία, όπως `<>` ... ``
  • Ονομάστε τους χειριστές συμβάντων με προθέματα χειρισμού, όπως `handleClick ()` ή `handleUpdate ()`.
  • Χρησιμοποιήστε το `onChange` για να ελέγξετε τις εισόδους σας, όπως` onChange = {this.handleInputChange ()} `.
  • Χρησιμοποιήστε το JEST για να ελέγξετε τον κωδικό σας ReactJS.

Έχουμε αναφέρει συγχρονιστές συμβάντων, όπως το Redux-Thunk. Το ReactJS v16.3 εισήγαγε ένα νέο χαρακτηριστικό που ονομάζεται React Context API. Μέρος της λειτουργικότητάς του είναι να μιμείται τη λειτουργικότητα redux-thunk και να συγχρονίζει τα γεγονότα με τα μέσα ReactJS. Αυτό είναι ένα χαρακτηριστικό που είναι σε υψηλή ζήτηση, καθώς σχεδόν κάθε εφαρμογή του ReactJS μιλάει για το back end API και χρειάζεται να συγχρονίσει τα αιτήματα και τα συμβάντα. Θα παρακολουθήσουμε αυτό το API και θα σας κρατήσουμε ενημερωμένους.

Ακολουθεί ένα παράδειγμα χρήσης των defaultProps και propTypes:

7. Συμπέρασμα

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

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

.

Bonus υλικό: Εδώ είναι το πρόσφατο άρθρο μας για το Redux και το Redux-Thunk. Θα σας εξηγήσουμε πώς δύο δουλεύουν μαζί.

https://medium.com/@konstankino/2019-redux-and-redux-thunk-for-reactjs-explained-e249b70d6188