Λειτουργίες υψηλότερης τάξης: τι είναι και ένα παράδειγμα React

Σειρά Tech Jargon

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

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

Το πρώτο μου θέμα για αυτήν τη σειρά είναι Λειτουργίες Υψηλότερης Παραγγελίας. Ήμουν σε μια τεχνική συνάντηση τις προάλλες, και συζητούσαμε για το React και πόσο δύσκολο μπορεί να είναι για τους αρχάριους του React να μπουν στον κώδικα. Ανέφερα ότι τα στοιχεία υψηλότερης τάξης (HOC) μπορεί να είναι δύσκολο να κατανοηθούν. Μια απάντηση ήταν ότι μοιάζουν με λειτουργίες υψηλότερης τάξης, δεν συμφωνώ; Και είπα: «Δεν ξέρω τι είναι αυτό». Όταν ζήτησα ένα παράδειγμα, μου είπαν «χάρτης». Έκανα ένα αστείο για το πώς δεν έχω ιδέα τι είναι ο "χάρτης" και προχωρήσαμε.

Αλλά ακόμα: τι είναι μια λειτουργία υψηλότερης τάξης;

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

Λειτουργίες υψηλότερης τάξης: ένας ορισμός

Μια συνάρτηση υψηλότερης τάξης είναι εκείνη που είτε a) παίρνει μια συνάρτηση ως όρισμα είτε β) επιστρέφει μια συνάρτηση.

Εάν μια συνάρτηση δεν κάνει κανένα από αυτά τα πράγματα, είναι μια συνάρτηση πρώτης τάξης .

Χάρτης

Ας αρχίσουμε με το παράδειγμα που δόθηκε: map.

[1, 2, 3].map(num => num * 2)> [2, 4, 6]

Η mapσυνάρτηση καλείται σε μια συστοιχία και παίρνει μια συνάρτηση "callback". Εφαρμόζει τη λειτουργία σε καθένα από τα στοιχεία του πίνακα, επιστρέφοντας έναν νέο πίνακα. [1, 2, 3]είναι ο πίνακας μας και το num => num * 2 είναι η λειτουργία μας. Ένα callback είναι το όρισμα συνάρτησης που μεταβιβάζεται στη συνάρτηση υψηλότερης τάξης.

Αυτό το HOF ψήνεται στη γλώσσα, πρωτότυπη στο Array ( Array.prototype.map).

Άλλα παραδείγματα HOFs prototyped σε Array είναι filter, reduceκαι some.

Προσαρμοσμένο παράδειγμα

Ας γράψουμε λοιπόν τη δική μας λειτουργία υψηλότερης τάξης.

Πέρασε τη λειτουργία

const myFunc = age => age * 2

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

Τώρα γράφουμε μια συνάρτηση που παίρνει μια συνάρτηση.

const hof = (customFunc, age) => customFunc(age + 5) 

Θα περάσουμε έναν αριθμό hof, ο οποίος θα προσθέσει 5 και στη συνέχεια θα καλέσει τη συνάρτηση που πέρασε, η οποία θα την διπλασιάσει. Εάν περάσουμε το 10, περνάμε 15 στην πρώτη μας λειτουργία, η οποία στη συνέχεια διπλασιάζεται σε 30.

Προσαρμοσμένο παράδειγμα με το React "components"

Όπως σημείωσα παραπάνω, αυτό το θέμα αναφέρθηκε σε στοιχεία του React. Καθώς το στοιχείο React είναι μια συνάρτηση, όταν το μεταβιβάζουμε σε μια άλλη συνάρτηση, δημιουργούμε τη δική μας συνάρτηση υψηλότερης τάξης, την οποία η React καλεί «στοιχεία υψηλότερης τάξης» Εάν χρησιμοποιείτε συστατικά (και επεκτείνετε τα React's Component), χρησιμοποιείτε ήδη HOC.

Ανιθαγενές συστατικό

const details = ({ name, randomNum }) => `${name}, ${randomNum}`

Έχουμε μια συνάρτηση, που ονομάζεται details, στην οποία περνάμε props. Τα αποικοδομούμε καθώς μπαίνουν και τα αναθέτουμε σε τοπικές μεταβλητές nameκαι randomNum. Αυτή είναι η σύνταξη ES6 - αν φαίνεται άγνωστη, δώστε του ένα google (θα το λατρέψετε).

Αυτή είναι μια συνάρτηση πρώτης τάξης - παίρνει ένα όρισμα (ένα propsαντικείμενο) και επιστρέφει ένα πρότυπο κυριολεκτικά.

Συνιστώσα υψηλότερης τάξης

const hoc = (component, props) => { const randomNum = Math.floor(Math.random() * 100) return component({ ...props, randomNum }) }

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

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

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

βιβλιογραφικές αναφορές

  • Λειτουργία υψηλότερης τάξης, Wikipedia
  • Λειτουργίες υψηλότερης τάξης, Eloquent Javascript (κεφάλαιο 5)
  • Array.prototype Έγγραφα MDN.