Κλάση εναντίον Λειτουργικών Συστατικών σε React, και η εξαιρετικά μυστική τρίτη επιλογή

Προτιμώ τα μασώμενα.

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

Παρόλο που θα μπορούσαν να πουν κάποιοι λειτουργικοί προγραμματιστές, δεν είναι απαραίτητα μια κακή ερώτηση. Εξάλλου, τα συστατικά της κλάσης μας δίνουν τόσο περισσότερη ευελιξία, τόσο περισσότερα δυνατά από ένα απλό, 'χαζή' συστατικό στοιχείο. Σίγουρα υπάρχουν μερικοί καλοί λόγοι για τους οποίους αρχίζουμε να ασχολούμαστε ακόμη και με λειτουργικά (ή «απτά») συστατικά.

Λοιπόν, μετά από κάποια σκάψιμο, η απάντηση είναι ...

Υποκειμενικός.

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

Λειτουργικά στοιχεία

Ίσως είναι καλύτερα γνωστό στην κοινότητα React ως «απάτριδα», αυτά είναι ακριβώς αυτά που λέει στις κασσίτερες: λειτουργίες απτά. Λόγω της ανικανότητάς του να έχει τις δικές του μεθόδους ή αναφορά σε αυτό, όλοι οι άνθρωποι με ανυπαρξία μπορούν πραγματικά να επιτύχουν είναι μια απόδοση με την επιστροφή ορισμένων JSX (ή React.createElement () εάν είσαι παλιό σχολείο).

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

Συστατικά κλάσης

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

Καθαρός! Τώρα πού να χρησιμοποιήσετε;

Η ψευδαίσθηση της επιλογής

Τι ανησυχητικό υπότιτλο! Μετά από να διαβάσετε σχετικά με το τι είναι το καθένα από αυτά, ίσως σκεφτείτε "προφανώς, χρησιμοποιήστε ένα συστατικό ανιθαγένειας εάν χρειάζεται μόνο να κάνετε κάτι βασισμένο σε στηρίγματα!" Και θα είχατε δίκιο! Συνήθως, αυτός ακριβώς είναι ο λόγος που θα σκέφτεστε να χρησιμοποιήσετε ένα στοιχείο ανιθαγένειας, αλλά τι γίνεται με την απόδοση; Μνήμη?

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

Τι γίνεται με αυτό το τρομακτικό υπότιτλο; Ας ρωτήσουμε τον αντιπρόσωπο Dan Abramov.

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

Μετά από κάποια δική μου δοκιμή αναφοράς, φαίνεται ότι τα λειτουργικά συστατικά έχουν τη δυνατότητα να τρέχουν κατά μέσο όρο περίπου 20% γρηγορότερα, πράγμα που δεν κτυπά τίποτα.

Και όμως ... υπάρχει ένας άλλος τρόπος ...

Ειδοποίηση Spoiler: το πραγματικό είναι το JavaScript

Το χρωστάω αυτό ειλικρινά, παρατήρησα στο Μέσο του άρθρου του Philippe Lehoux, το άρθρο 45% Ταχύτερη απόκριση των λειτουργικών στοιχείων, τώρα. Ο λόγος για τον οποίο λειτουργικά εξαρτήματα δεν είναι άμεσα πολύ ταχύτερα από τα συστατικά της κλάσης είναι επειδή εξακολουθούν να επεκτείνονται στο React.Component και συνεπώς εξακολουθούν να φορτώνουν σε όλη τη λογική μιας συνιστώσας κλάσης!

Έτσι, για να επιταχύνουμε αυτά τα χαζή εξαρτήματα, πρέπει να παρακάμψουμε τις άχρηστες αποσκευές που μας δίνει το React.Component και αν πρέπει να παραιτηθούμε από την απάντηση, η απάντηση είναι καλή από την JS.

Κεραία.

Ξέρω. Είναι τόσο απλό, αλλά τόσο όμορφο. Επιπλέον, στις δοκιμές αναφοράς μου, χτύπησε ένα συστατικό της κανονικής τάξης κατά 51%. 51!

Ας ρίξουμε μια ματιά στη διαύγεια και να δούμε γιατί συμβαίνει αυτό.

Άμεση κλήση λειτουργιών εναντίον συστατικού στοιχείου

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

Λοιπόν, ποια είναι η αλήθεια;

(συγνώμη δεν λυπάμαι)

Στο τέλος της ημέρας, ποια είναι τα καναλιού;

  1. Οι τάξεις είναι πιο ισχυρές και ευέλικτες,
  2. Οι απάτριδες είναι λίγο πιο γρήγορα (και απαιτούν λιγότερη πληκτρολόγηση!), Με μερικές υποσχέσεις για τον άνεμο της βελτιστοποίησης,
  3. Υπάρχει μια (λίγο δοκιμασμένη) ταχύτητα-hack διαθέσιμη σε σας εάν πρέπει να αποσπάσουν όλες τις επιδόσεις που μπορείτε να πάρετε,
  4. Στο τέλος της ημέρας, κάντε ό, τι είναι το ελάχιστο για το στοιχείο. Είναι πιθανώς η σωστή επιλογή.