Back to Question Center
0

Στοιχεία υψηλότερης τάξης: Μοτίβο σχεδιασμού εφαρμογών αντίδρασης            Ανώτερα στοιχεία παραγγελίας: Σχέδιο σχεδίασης εφαρμογών Σχετικά με το πρότυπο: ES6AngularJSAjaxReactjQueryΠερισσότερα ... Χορηγοί

1 answers:
Στοιχεία υψηλότερης τάξης: Σχέδιο σχεδιασμού εφαρμογών αντιδράσεων

Αυτό το άρθρο είναι από τον συντάκτη Jack Franklin . Οι φιλοξενούμενοι του SitePoint στοχεύουν να σας φέρουν σε επαφή περιεχόμενο από εξέχοντες συγγραφείς και ομιλητές της κοινότητας JavaScript

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

Καθαρές λειτουργίες

Μια λειτουργία θεωρείται καθαρή αν τηρεί τις ακόλουθες ιδιότητες:

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

Για παράδειγμα, η συνάρτηση add παρακάτω είναι καθαρή:

     συνάρτηση add (x, y) {επιστροφή x + y;}}    

Ωστόσο, η λειτουργία badAdd παρακάτω είναι ακάθαρτη:

     var y = 2.λειτουργία badAdd (x) {επιστροφή x + y;}}    

Αυτή η λειτουργία δεν είναι καθαρή επειδή αναφέρει τα δεδομένα που δεν έχει δοθεί άμεσα - barmah hats in. Ως αποτέλεσμα, είναι δυνατό να καλέσετε αυτή τη λειτουργία με την ίδια είσοδο και να πάρετε διαφορετική έξοδο:

     var y = 2.badAdd  
// 5y = 3;badAdd
// 6

Για να διαβάσετε περισσότερα σχετικά με τις καθαρές λειτουργίες μπορείτε να διαβάσετε "Μία εισαγωγή στον λογικά καθαρό προγραμματισμό" από τον Mark Brown.

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

Λειτουργίες υψηλότερης τάξης

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

Ας υποθέσουμε ότι έχουμε την συνάρτηση add από πάνω και θέλουμε να γράψουμε κάποιο κώδικα έτσι ώστε όταν το ονομάζουμε να καταγράψουμε το αποτέλεσμα στην κονσόλα πριν επιστρέψουμε το αποτέλεσμα. Δεν μπορούμε να επεξεργαστούμε τη συνάρτηση add , έτσι μπορούμε να δημιουργήσουμε μια νέα συνάρτηση:

     συνάρτηση addAndLog (x, y) {var αποτέλεσμα = προσθήκη (x, y);κονσόλα. log ('Αποτέλεσμα', αποτέλεσμα).αποτέλεσμα επιστροφής.}}    

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

     συνάρτηση logAndReturn (func) {επιστροφή    {var args = Array. πρωτότυπο. φέτα. κλήση (επιχειρήματα);var αποτέλεσμα = func. ισχύουν (null, args).κονσόλα. log ('Αποτέλεσμα', αποτέλεσμα).αποτέλεσμα επιστροφής.}}}}    
προσθέτουμε και αφαιρέσουμε :

     var addAndLog = logAndReturn (προσθήκη);addAndLog (4, 4) // 8 επιστρέφεται, καταγράφεται το 'Αποτέλεσμα 8'var subtractAndLog = logAndReturn (αφαίρεση);subtractAndLog (4, 3) // 1 επιστρέφεται, καταγράφεται το 'αποτέλεσμα 1'.    

Το logAndReturn είναι ένα HOF επειδή παίρνει μια συνάρτηση ως επιχείρησή του και επιστρέφει μια νέα συνάρτηση που μπορούμε να καλέσουμε. Αυτά είναι πραγματικά χρήσιμα για την περιτύλιξη υπαρχουσών λειτουργιών που δεν μπορείτε να αλλάξετε στη συμπεριφορά. Για περισσότερες πληροφορίες σχετικά με αυτό, ελέγξτε το M.

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

Εξαρτήματα υψηλότερης τάξης

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

Σε αυτή την ενότητα, πρόκειται να χρησιμοποιήσουμε το Router React, την de facto λύση δρομολόγησης για το React. Αν θέλετε να ξεκινήσετε τη βιβλιοθήκη, σας συνιστώ ανεπιφύλακτα το Tutorial του Router React στο GitHub.

Αντιδράστε με το στοιχείο σύνδεσης του δρομολογητή

Το React Router παρέχει ένα στοιχείο που χρησιμοποιείται για τη σύνδεση μεταξύ σελίδων σε μια εφαρμογή React. Μια από τις ιδιότητες που παίρνει αυτό το στοιχείο είναι activeClassName . Όταν ένα έχει αυτήν την ιδιότητα και είναι ενεργό (ο χρήστης βρίσκεται σε μια διεύθυνση URL στην οποία αναφέρεται ο σύνδεσμος), θα δοθεί στην ενότητα αυτή η κατηγορία, επιτρέποντας στον προγραμματιστή να το στυλίζει.

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

      Αρχική σελίδα  Σχετικά με το  Επικοινωνία     

Semalt ότι πρέπει να επαναλάβουμε την ιδιότητα όνομα κλάσης κάθε φορά. Όχι μόνο αυτό κάνει τα στοιχεία μας verbose, σημαίνει επίσης ότι αν αποφασίσουμε να αλλάξουμε το όνομα της κατηγορίας πρέπει να το κάνουμε σε πολλά μέρη.

Αντ 'αυτού, μπορούμε να γράψουμε ένα στοιχείο που περιβάλλει το συστατικό:

     var AppLink = Αντιδρά. createClass ({απόδοση: λειτουργία    {ΕΠΙΣΤΡΟΦΗ (<Συνδέστε σε = {αυτό. στηρίγματα. σε} ενεργόClassName = "ενεργό-σύνδεσμο">{Αυτό. στηρίγματα. παιδιά}.) ·}}});    

Και τώρα μπορούμε να χρησιμοποιήσουμε αυτή την συνιστώσα, η οποία συντάσσει τις σχέσεις μας:

      Αρχική σελίδα  Σχετικά με το  Επαφή     

Μπορείτε να δείτε αυτό το παράδειγμα στο Plunker.

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

Λειτουργικά, Αστέρια

Ανταποκρίνεται στο 0. 14 εισήγαγε υποστήριξη για λειτουργικά συστατικά χωρίς κατάσταση. Semalt είναι συστατικά που έχουν τα ακόλουθα χαρακτηριστικά:

  • δεν έχουν καμία κατάσταση
  • δεν χρησιμοποιούν μεθόδους κύκλου ζωής React (όπως το componentWillMount )
  • ορίζουν μόνο τη μέθοδο rendering και τίποτε άλλο.

Όταν ένα στοιχείο συμμορφώνεται με τα παραπάνω, μπορούμε να το ορίσουμε ως συνάρτηση, αντί να χρησιμοποιήσουμε React. Η δημιουργίαClass της κατηγορίας App επεκτείνει το στοιχείο React. Component αν χρησιμοποιείτε τάξεις ES2015). Για παράδειγμα, οι δύο παρακάτω εκφράσεις παράγουν το ίδιο συστατικό:

     var App = React. createClass ({απόδοση: λειτουργία    {επιστροφή  

Το όνομά μου είναι {αυτό. στηρίγματα. όνομα} .

}}});var App = λειτουργία (υποστηρίγματα) {επιστροφή

Το όνομά μου είναι {στηρίγματα. όνομα} .

}}

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

Επειδή τα συστατικά της υψηλότερης τάξης συχνά τυλίγουν ένα υπάρχον συστατικό, συχνά θα βρείτε ότι μπορείτε να τα ορίσετε ως λειτουργικό στοιχείο. Για το υπόλοιπο άρθρο, ο Semalt το κάνει όποτε αυτό είναι δυνατό. Το συστατικό AppLink που δημιουργήσαμε δεν είναι αρκετά κατάλληλο για το σκοπό.

Αποδοχή πολλαπλών ιδιοτήτων

Το στοιχείο αναμένει δύο ιδιότητες:

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

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

Η εξάπλωση του JSX

Η JSX, η σύνταξη που μοιάζει με HTML που χρησιμοποιούμε για να ορίσουμε τα στοιχεία Semalt, υποστηρίζει τον διαχειριστή εξάπλωσης για τη διέλευση ενός αντικειμένου σε ένα στοιχείο ως ιδιότητες. Για παράδειγμα, τα παρακάτω δείγματα κώδικα επιτυγχάνουν το ίδιο πράγμα:

     var props = {α: 1, β: 2}.    

Χρησιμοποιώντας { το props} εξαπλώνει κάθε κλειδί στο αντικείμενο και το μεταβιβάζει στο Foo ως μεμονωμένη ιδιότητα.

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

     var AppLink = λειτουργία (στηρίγματα) {επιστροφή   ;}}    

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

Μπορείτε να δείτε αυτό το έργο στο Plunker.

Παραγγελία ακινήτου σε React

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

      Ειδική μυστική σύνδεση     

Ωστόσο, αυτό δεν λειτουργεί. Ο λόγος είναι λόγω της παραγγελίας των ιδιοτήτων όταν κάνουμε το στοιχείο :

     επιστρέφουν   ;    

Όταν έχετε την ίδια ιδιότητα πολλές φορές σε ένα στοιχείο React, η τελευταία δήλωση κερδίζει . Αυτό σημαίνει ότι η τελευταία μας δήλωση activeClassName = "active-link" θα κερδίσει πάντα, αφού τοποθετείται μετά από { Αυτό. υποστηρίγματα} . Για να διορθώσουμε αυτό, μπορούμε να αναδιατάξουμε τις ιδιότητες έτσι ώστε να εξαπλωθούμε αυτό. στηρίγματα τελευταία. Αυτό σημαίνει ότι ορίζουμε εύλογες αθετήσεις που θα θέλαμε να χρησιμοποιήσουμε, αλλά ο χρήστης μπορεί να τις παρακάμψει αν χρειάζεται πραγματικά:

     επιστρέφουν   ;    

Για άλλη μια φορά, μπορείτε να δείτε αυτή την αλλαγή στην ενέργεια στο Plunker.

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

Δημιουργοί εξαρτημάτων υψηλότερης τάξης

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

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

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

Αυτό ακούγεται πολύ περίπλοκο, αλλά γίνεται πιο απλό με κάποιο κώδικα:

     λειτουργία wrapWithUser (συνιστώσα) {// πληροφορίες που δεν θέλουμε να έχουμε πρόσβαση σε όλαvar secretUserInfo = {όνομα: «Jack Franklin»,favouriteColour: 'μπλε'},// επιστρέφει ένα συστατικό React που δημιουργήθηκε πρόσφατα// χρησιμοποιώντας ένα λειτουργικό, ανιθαγενές στοιχείοεπιστροφή (υποδείξεις) {// μεταβείτε στη μεταβλητή χρήστη ως ιδιότητα, μαζί με// όλα τα άλλα στηρίγματα που μπορούμε να μας δώσουνεπιστροφή  <συστατικό χρήστη = {secretUserInfo} { props} /> }}}}    

Η συνάρτηση παίρνει ένα στοιχείο React (το οποίο είναι εύκολο να εντοπιστεί δεδομένου ότι τα στοιχεία React πρέπει να έχουν κεφαλαία γράμματα στην αρχή) και επιστρέφει μια νέα συνάρτηση που θα καταστήσει το στοιχείο που του δόθηκε με μια επιπλέον ιδιότητα του χρήστη 40), το οποίο είναι ρυθμισμένο στο secretUserInfo .

Τώρα ας πάρουμε ένα στοιχείο, , το οποίο θέλει να έχει πρόσβαση σε αυτές τις πληροφορίες ώστε να μπορεί να εμφανίσει τον συνδεδεμένο χρήστη:

     var AppHeader = λειτουργία (υποστηρίγματα) {αν (υποστηρίξεις χρήστη) {επιστροφή  

Συνδεθήκατε ως {props. χρήστης. όνομα} .

} else {επιστροφή

Πρέπει να συνδεθείτε

;}}}}

Το τελευταίο βήμα είναι να συνδέσετε αυτό το στοιχείο προς τα πάνω, έτσι δίνεται αυτό. στηρίγματα. χρήστης . Μπορούμε να δημιουργήσουμε ένα νέο στοιχείο μεταβιβάζοντάς το στη λειτουργία μας wrapWithUser .

     var ConnectedAppHeader = wrapWithUser (AppHeader);    

Έχουμε τώρα ένα στοιχείο που μπορεί να αποτυπωθεί και θα έχει πρόσβαση στο αντικείμενο του χρήστη .

Δείτε αυτό το παράδειγμα στο Semalt αν θέλετε να το δείτε σε δράση.

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

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

Συμπέρασμα

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

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

Εάν έχετε οποιεσδήποτε ερωτήσεις, θα ήθελα να τους ακούσω. Μπορείτε να αφήσετε ένα σχόλιο ή να μου πείτε @Jack_Franklin στο Twitter.

Έχουμε συνεργαστεί με το Open SourceCraft για να σας φέρει 6 Συμβουλές Pro από τους προγραμματιστές της React . Για πιο ανοικτού κώδικα περιεχόμενο, ελέγξτε το Open SourceCraft.