Τα πέντε δάχτυλα του θανάτου του React. Εξασφαλίστε αυτές τις πέντε έννοιες και, στη συνέχεια, μάθετε το React.

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

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

Τα καλά νέα είναι ότι μπορείτε να βράσετε όλα όσα πρέπει να γνωρίζετε για το React σε πέντε βασικές έννοιες .

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

Οι πέντε βασικές έννοιες είναι:

  1. Συστατικά
  2. JSX
  3. Στηρίγματα και πολιτεία
  4. Το API συστατικών
  5. Τύποι συστατικών

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

Ω, και ο φίλος μου Σον; Από τότε προχώρησε σε πολύ πιο σύγχρονα πράγματα. Σε τελική ανάλυση, το React είναι το 2015.

Έννοια # 1: Πώς λειτουργούν τα στοιχεία React

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

Αλλά τι είναι ένα συστατικό, ρωτάτε; Ένα τέλειο παράδειγμα ενός στοιχείου είναι το κοινό ct> HTML element. Not only does it come with its own visual output (the grey box, text label, and downward arrow that make up the element itself) — it also handles its own opening and closing logic.

Now imagine being able to build your own self-contained custom ct>, with its own style and behavior:

Well, that’s exactly what React lets you do. A React component is a single object that not only outputs HTML like a traditional template would, but also includes all the code needed to control that output.

In practice, the most common way to write React components is as an ES6 class containing a render method that returns HTML. (There’s also a super-secret functional way, but you’ll have to wait until concept #4 to learn about it):

class MyComponent extends React.Component {
 render() { return 

Hello World!

; }

}

Έννοια # 2: Πώς λειτουργεί το JSX

Όπως μπορείτε να δείτε, η συνιστώσα προσέγγιση σημαίνει ότι τόσο ο κώδικας HTML όσο και ο κώδικας JavaScript ζουν στο ίδιο αρχείο. Το μυστικό όπλο της React για την επίτευξη αυτής της ανίερης συμμαχίας είναι η γλώσσα JSX (όπου το "X" σημαίνει "XML").

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

Ναι ξέρω. Έχουμε όλοι μάθει να διατηρούμε έναν ισχυρό διαχωρισμό μεταξύ HTML και JavaScript. Αλλά αποδεικνύεται ότι η χαλάρωση αυτών των κανόνων μπορεί πραγματικά να κάνει θαύματα για την παραγωγικότητά σας.

Για παράδειγμα, δεδομένου ότι έχετε πλέον την πλήρη ισχύ της JavaScript στη διάθεσή σας, δείτε πώς μπορείτε να εμφανίσετε την τρέχουσα ημερομηνία εισάγοντας ένα απόσπασμα JavaScript στον HTML χρησιμοποιώντας {...}:

class MyComponent extends React.Component {
 render() { return 

Today is: {new Date()}

; }
}

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

class MyComponent extends React.Component {
 render() { return 

Hello {this.props.someVar ? 'World' : 'Kitty'}

; }
}

Και παρεμπιπτόντως, εάν πρέπει να ενημερωθείτε σχετικά με τα νεότερα σημεία της σύνταξης JavaScript, προτείνω το ES6 για όλους από τον Wes Bos (αν σας αρέσει τα βίντεο) ή το Practical ES6 από τον Nicolas Bevacqua (αν προτιμάτε να διαβάζετε).

Έννοια # 3: Πώς λειτουργούν οι Props & State

Ίσως αναρωτιέστε από πού this.props.someVarπροέρχεται η παραπάνω μεταβλητή.

Εάν έχετε γράψει ποτέ μια γραμμή HTML, πιθανότατα γνωρίζετε τα χαρακτηριστικά HTML όπως το <; a> tag’s href. Στο React, τα χαρακτηριστικά είναι γνωστά ως στηρίγματα (συντομογραφία για "ιδιότητες"). Τα στηρίγματα είναι πώς τα συστατικά μιλούν μεταξύ τους.

class ParentComponent extends React.Component {
 render() { return ; }
}
class ChildComponent extends React.Component {
 render() { return 

And then I said, “{this.props.message}”

; }
}

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

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

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

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

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

class MyComponent extends React.Component {
 handleClick = (e) => { this.setState({clicked: true}); }
 render() { return Click me; }
}

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

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

Έννοια # 4: Πώς λειτουργεί το Component API

Έχουμε ήδη αναφέρει renderκαι setState, που αποτελούν και τα δύο μέρος ενός μικρού συνόλου συστατικών μεθόδων API. Ένα άλλο χρήσιμο είναι το constructor, το οποίο μπορείτε να χρησιμοποιήσετε για να αρχικοποιήσετε τις μεθόδους κατάστασης και δέσμευσης.

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

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

Έννοια # 5: Πώς λειτουργούν οι τύποι συστατικών

Έχουμε δει πώς να χρησιμοποιούμε τάξεις για να ορίσουμε ένα στοιχείο:

class MyComponent extends React.Component {
 render() { return 

Hello World!

; }

}

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

Ένα λειτουργικό στοιχείο είναι μια συνάρτηση που παίρνει ένα propsαντικείμενο ως όρισμα και επιστρέφει μια δέσμη HTML. Σχεδόν σαν ένα παραδοσιακό πρότυπο, με τη διαφορά κλειδιού ότι μπορείτε ακόμα να χρησιμοποιήσετε όποιο κώδικα JavaScript χρειάζεστε μέσα σε αυτήν τη λειτουργία:

const myComponent = props => {
 return 

Hello {props.name}! Today is {new Date()}.

}

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

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

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

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

var Greeting = React.createClass({ render: function() { return 

Hello, {this.props.name}

; }
});

Έννοια # 6: Πώς λειτουργούν οι ρόλοι των συστατικών

Εντάξει, είπα ψέματα. Υπάρχουν πραγματικά έξι πράγματα, όχι πέντε. Αλλά τι μπορώ να πω, η ταινία δεν ονομάζεται "Six Fingers Of Death". Αν και τώρα που το σκέφτομαι, φαίνεται ότι θα ήταν μια πολύ ωραία ταινία, που πιθανότατα περιλάμβανε κάποιο είδος εξωγήινου δασκάλου kung-fu που ζητούσε εκδίκηση.

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

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

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

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

Αυτό μοιάζει πολύ με το μοτίβο προβολής / ελεγκτή που μπορεί να γνωρίζετε από τις προηγούμενες ημέρες προγραμματιστή. ( «μέλος Rails?» μέλος Django; )

Η διάκριση κοντέινερ / παρουσίασης διαδόθηκε σε αυτήν την ανάρτηση ιστολογίου από τον Dan Abramov (τον δημιουργό του Redux) και σας συνιστώ να το ελέγξετε αν θέλετε να σκάψετε βαθύτερα.

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

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

Το HoC είναι ένα στοιχείο που μπορείτε να τυλίξετε ένα άλλο στοιχείο για να το περάσετε ειδικά στηρίγματα και συνήθως δημιουργείται χρησιμοποιώντας μια εργοστασιακή συνάρτηση υψηλότερης τάξης . Σημειώστε ότι οι άνθρωποι συνήθως αναφέρονται στην ίδια τη λειτουργία ως "HoC", η οποία μπορεί να μην είναι 100% σωστή τεχνικά, αλλά στην πράξη δεν είναι μεγάλη υπόθεση.

Για παράδειγμα, withRouterενεργοποιώντας την εργοστασιακή λειτουργία του React Router nt>will wrap it in a new ponent)/> component that passes the Router prop to the afor e-mentioned &lt;MyComponent>.

You can think of a HoC function as a golf caddie that follows their golfer around and hands them the club they need it. By themselves, the caddie can’t actually do anything with the golf clubs. They’re just there to give the golfer access to more tools.

HoCs are a very powerful concept. For example, the Recompose library even lets you handle state changes through HoCs. In other words, you can now manage state without having to involve any ES6 class-based components.

With HoC composition becoming so common, it seems like React might be moving away from the ES6 class syntax and more towards a purely functional approach. Interesting times!

Recap

So let’s recap what we’ve just learned:

  • A React codebase is made up of components.
  • These components are written using JSX.
  • Data flows from parent to children, except when it comes to state, which originates inside a component.
  • Components possess a small set of lifecycle and utility methods.
  • Components can also be written as pure functions.
  • You should keep data logic and UI logic in separate components.
  • Higher-order components are a common pattern for giving a component access to new tools.

Believe it or not, we’ve just covered 90% of the knowledge used by a React developer on a daily basis. No matter how abstract or obscure the pattern, everything in React can always be boiled down to functions and props.

Once you truly understand this, React will stop being scary. You’ll be able to see patterns in the code, understand new codebases at a glance, and only then will you be able to proudly proclaim:

“Pfff! React is so 2015!”

Going Further

If I’ve managed to convince you that React isn’t so bad, you might want to take a stab at learning it properly. If so, I can’t recommend the React for Beginners video course enough. It’s how I learned React myself, and it’s actually just been updated to cover all the cool new stuff like functional stateless components:

If you don’t want your hard-earned dollars to finance the nefarious React lobby (I heard Dan Abramov is onto his third yacht), you can also learn for free by checking out this huge list of React resources.

And if you need to put all this newly-acquired knowledge in practice by contributing to a cool React open-source project, check out Telescope Nova. It’s the easiest way to quickly create a full-stack React + GraphQL app, complete with user accounts, forms, and data loading out of the box. And did I mention we’re looking for contributors?

Finally, if you’ve enjoyed this article, please share it and recommend it (that little green heart just below). And please let me know on Twitter what you’d like me to write about next!