Πώς να αναπτύξετε τις δυνάμεις σας React με το μοτίβο HOC

Γεια σε όλους! ; Ελπίζω να είχατε καλά, καλά Χριστούγεννα και καλή χρονιά!

Το 2018 έχει φτάσει στο τέλος του και είναι λογικό να ξεκινήσω τη νέα χρονιά με ένα άρθρο σχετικά με τα στοιχεία υψηλότερης παραγγελίας!

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

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

Απλώς λάβετε υπόψη ότι δεν πρέπει να το χρησιμοποιείτε υπερβολικά. Σχεδόν όλα όσα μπορείτε να ενσωματώσετε σε ένα HOC μπορείτε σίγουρα να εφαρμόσετε χρησιμοποιώντας το μοτίβο απόδοσης - δείτε το άρθρο μου σχετικά με τα στηρίγματα απόδοσης εδώ - και το αντίστροφο.

01. Τι είναι ένα στοιχείο υψηλότερης τάξης;

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

Το JavaScript είναι μια κατάλληλη γλώσσα για λειτουργικό προγραμματισμό καθώς μπορεί να δεχτεί λειτουργίες υψηλότερης τάξης. Μια συνάρτηση υψηλότερης τάξης είναι μια συνάρτηση που μπορεί να λάβει μια άλλη συνάρτηση ως όρισμα και / ή που επιστρέφει μια συνάρτηση ως αποτέλεσμα.

Με τον ίδιο τρόπο, ένα στοιχείο υψηλότερης τάξης είναι μια συνάρτηση που παίρνει (αναδιπλώνει) ένα στοιχείο και επιστρέφει ένα νέο στοιχείο .

Οι συναρτήσεις υψηλότερης τάξης μας επιτρέπουν να αφαιρούμε πάνω από ενέργειες, όχι μόνο τιμές.

Τα HOC είναι κοινά σε React libs τρίτων, όπως το Redux ή το React Router. Σίγουρα έχετε χρησιμοποιήσει μερικά από αυτά, ίσως χωρίς να το γνωρίζετε.

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

02. Τύποι στοιχείων υψηλότερης τάξης

Βασικά υπάρχουν δύο βασικοί τύποι υλοποίησης HOC: Props Proxy και Inheritance Inversion .

Proxy Proxy (ppHOC)

Τα Props HOCs Proxy εκφράζονται στο εξής:

Δεν είναι τίποτα περισσότερο από μια συνάρτηση, propsProxyHOC, που λαμβάνει ένα στοιχείο ως όρισμα (σε αυτήν την περίπτωση ονομάσαμε το όρισμα WrappedComponent) και επιστρέφει ένα νέο στοιχείο με το WrappedComponent μέσα.

Έχετε υπόψη ότι όταν επιστρέφουμε το WrappedComponent, περνάμε επίσης μέσω των στηριγμάτων που λαμβάνει το HOC. Αυτό εξηγεί το όνομα που δίνεται σε αυτόν τον τύπο: props proxy .

Όταν επιστρέφουμε το Wrapped Component έχουμε τη δυνατότητα να χειριστούμε τα στηρίγματα και να αφαιρέσουμε την κατάσταση, ακόμη και να περάσουμε την κατάσταση ως στηρίγμα στο Wrapped Component.

Μπορείτε επίσης να τυλίξετε το Wrapped Component με άλλα στοιχεία JSX αλλάζοντας το περιβάλλον χρήστη σύμφωνα με τις ανάγκες της εφαρμογής σας.

Props HOCs Proxy είναι χρήσιμα για τις ακόλουθες περιπτώσεις:

  1. Χειριστήρια στηρίγματα
  2. Πρόσβαση στην παρουσία μέσω Refs (προσέξτε, αποφύγετε τη χρήση refs)
  3. Περίληψη κράτους
  4. Αναδίπλωση / Σύνθεση του WrappedComponent με άλλα στοιχεία

Αντιστροφή κληρονομικότητας (iiHOC)

Τα HOCs Inverted Inheritance εκφράζονται στο εξής ως εξής:

Σε αυτήν την περίπτωση η επιστρεφόμενη τάξη επεκτείνει το WrappedComponent. Ονομάζεται Inheritance Inversion, επειδή αντί του WrappedComponent που επεκτείνει κάποια κλάση Enhancer, επεκτείνεται παθητικά. Με αυτόν τον τρόπο η σχέση μεταξύ τους φαίνεται αντίστροφη .

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

Inversion Inheritance HOCs είναι χρήσιμα για τις ακόλουθες καταστάσεις:

  1. Δώστε Highjacking
  2. Χειριστική κατάσταση

03. Βρώμικα τα χέρια μας

Εντάξει όλοι; για να δείξουμε λίγο τις έννοιες που παρουσιάζονται παραπάνω, ας κάνουμε κάποιο κώδικα.

Αν θέλετε να παίξετε αργότερα με τον κωδικό που κάνουμε, μπορείτε να το τραβήξετε εδώ από αυτό το ρεπό μου;

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

Έχω τροποποιήσει το στοιχείο App.js για να δείξω κάποιο κείμενο και για να αποδώσω ένα στοιχείο που ονομάζεται Καλώς ήλθατε στο οποίο περνάω τον χρήστη στήριξης.

Εντάξει, μπορούμε να το κάνουμε με ένα απλό στοιχείο όπως αυτό:

Αλλά…

Τι γίνεται αν θέλω να επιστρέψει το στοιχείο Welcome Guest εάν δεν έχει συνδεθεί κανένας χρήστης;

Λοιπόν ... Μπορώ να το κάνω στο ίδιο στοιχείο Welcome, με ένα απλό εάν ελέγχει αν υπάρχει το prop του χρήστη και αν όχι επιστρέφει απλά το "Welcome Guest"

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

Ο τρόπος λοιπόν είναι να φτιάξετε ένα Props Proxy HOC:

Τι έχουμε κάνει εδώ; Διατηρήσαμε το στοιχείο Welcome μας απλό και δημιουργήσαμε μια συνάρτηση JavaScript που ονομάζεται withUser, η οποία παίρνει το στοιχείο Welcome (WrappedComponent) ως επιχείρημα και ελέγχει εάν υπάρχει ο χρήστης prop. Εάν όχι, επιστρέφει απλώς ένα "Καλώς ορίσατε!" μήνυμα.

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

Ωραία, οπότε τώρα έχουμε ένα HOC για να ελέγξουμε αν υπάρχει χρήστης συνδεδεμένος, αλλιώς ρίχνει ένα μήνυμα καλωσορίσματος!

Ας φανταστούμε τώρα ότι οι πληροφορίες χρήστη προέρχονται από εξωτερικό API (για παράδειγμα το Auth0) και μπαίνει στην εφαρμογή frontend μέσω ενός μειωτήρα Redux που διαχειρίζεται την κατάσταση εφαρμογής.

Έτσι, πριν ελέγξουμε εάν υπάρχει χρήστης πρέπει να ελέγξουμε εάν τα δεδομένα φορτώνονται στο σύστημα!

Ουάου! Με αυτόν τον τρόπο θα μπορούσαμε να εμφανίσουμε ένα μήνυμα φόρτωσης ενώ τα δεδομένα δεν φορτώνονται!

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

Για απόδοση highjacking πρέπει να χρησιμοποιήσουμε ένα iiHOC. Ουάου! Μια τέτοια σύμπτωση! Ας το κάνουμε λοιπόν και να συνθέσουμε τους δύο HOC μαζί; Αυτό θα χτυπήσει σκληρά στο κεφάλι του νυχιού.

Δώστε προσοχή σε όσα έχουμε κάνει:

Έχουμε δημιουργήσει ένα withLoader iiHOC που επεκτείνει το WrappedComponent. Με αυτόν τον τρόπο μπορεί να έχει πρόσβαση στα στηρίγματα και να ενεργοποιεί διαφορετική απόδοση.

Σε αυτήν την περίπτωση λαμβάνουμε το στήριγμα isLoaded και αν δεν φορτωθεί επιστρέφουμε απλώς ένα μήνυμα φόρτωσης! Διαφορετικά, αφήνουμε την απόδοση WrappedComponent επιστρέφοντας απλώς το super.render ().

Στη δήλωση εξαγωγής συνθέτουμε μόνο δύο συναρτήσεις JavaScript όπως f1 (f2 (f3))). Τίποτα περισσότερο από αυτό!

Υπάρχουν εργαλεία για τη σύνθεση λειτουργιών με έναν πιο όμορφο τρόπο, αλλά αυτή είναι μια άλλη ιστορία για ένα άλλο άρθρο!

04. Τελευταίο αλλά όχι λιγότερο σημαντικό

Προσπάθησα να χρησιμοποιήσω απλά παραδείγματα για να κατανοήσω τις έννοιες με τον πιο καθαρό τρόπο.

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

Ελέγξτε τον κωδικό και προσπαθήστε να τον καταλάβετε κάθε γραμμή.

Χρειάζεται λίγος χρόνος για να συνηθίσετε και να αισθανθείτε άνετα να κάνετε αυτό το είδος αφαίρεσης, ώστε να μην χάσετε το κίνητρό σας ή την εστίασή σας με HOCs.

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

Ελπίζω να διασκεδάσατε τόσο πολύ όσο το είχα γράψει! Εάν σας άρεσε πραγματικά, παρακαλώ δώστε μου χειροκρότημα (όχι λιγότερο από 50 παρακαλώ); και να θυμάστε πάντα να είστε «Ισχυροί και κωδικοποιήστε!

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

05. Βιβλιογραφία

  1. Αντιδράστε την τεκμηρίωση

2. Έγγραφο Javascript

3. Αντιδράστε τα συστατικά υψηλότερης τάξης σε βάθος

Ευχαριστώ πολύ!

evedes, Δεκ 2018