Ως η πιο δημοφιλής βιβλιοθήκη frontend, όλοι θέλουν να μάθουν το React. Το ReactJS είναι βασικά JavaScript. Αλλά αυτό δεν σημαίνει ότι πρέπει να μάθετε τα πάντα στη JavaScript για να μετακινηθείτε στο ReactJS. Η κατανόηση των θεμελιωδών εννοιών JavaScript θα σας βοηθήσει να κατανοήσετε πιο εύκολα τις έννοιες του React και, τελικά, θα επιταχύνει την ικανότητά σας να εργάζεστε σε έργα.
Ας περιγράψουμε βασικές έννοιες που πρέπει να γνωρίζετε σχετικά με το JavaScript πριν μεταβείτε στο ReactJS.
1. Λειτουργίες βέλους
Οι συναρτήσεις βέλους χρησιμοποιούνται ευρέως στο React. Από την έκδοση 16.8, το React μετακινήθηκε από στοιχεία που βασίζονται σε κλάσεις σε λειτουργικά στοιχεία. Λειτουργίες βέλους σας επιτρέπουν να δημιουργήσετε συναρτήσεις με μικρότερη σύνταξη.
Ας το δείξουμε στα ακόλουθα παραδείγματα:
Τακτική λειτουργία
λειτουργίαχαιρετισμός() {
ΕΠΙΣΤΡΟΦΗ'Γειά σου'
}
κονσόλα.log (χαιρετισμός()) //helloΛειτουργία βέλους
αφήνω χαιρετισμός = () =>'Γειά σου'
κονσόλα.log (χαιρετισμός()) //helloΟι δύο παραπάνω συναρτήσεις έχουν την ίδια έξοδο, αν και η σύνταξη είναι διαφορετική. Η λειτουργία βέλους φαίνεται πιο σύντομη και καθαρότερη από την κανονική λειτουργία. Συνήθως, τα στοιχεία React έχουν την ακόλουθη δομή:
εισαγωγή Αντιδρώ από'αντιδρώ'συνθ Βιβλίο = () => {
ΕΠΙΣΤΡΟΦΗ (
Βιβλίο</div>)
}
εξαγωγήΠροκαθορισμένο Βιβλίο
Οι συναρτήσεις βέλους δεν έχουν ονόματα. Εάν θέλετε να το ονομάσετε, αντιστοιχίστε το σε μια μεταβλητή. Η διαφορά μεταξύ μιας κανονικής και μιας συνάρτησης βέλους είναι κάτι περισσότερο από τη σύνταξη. Μάθετε περισσότερα σχετικά με τις λειτουργίες βέλους στο Mozilla τεκμηρίωση προγραμματιστών.
2. Καταστροφή
Η καταστροφή χρησιμοποιείται για τη λήψη δεδομένων από πολύπλοκες δομές δεδομένων. Στο JavaScript, πίνακες και αντικείμενα μπορούν να αποθηκεύσουν πολλές τιμές. Μπορείτε να χειριστείτε τις τιμές και να τις χρησιμοποιήσετε σε διαφορετικά μέρη της εφαρμογής.
Για να λάβετε αυτές τις τιμές, πρέπει να αποδομήσετε τη μεταβλητή. Ανάλογα με τη δομή δεδομένων που αντιμετωπίζετε, μπορείτε να χρησιμοποιήσετε τη σημειογραφία κουκκίδας (.) ή τη σημειογραφία αγκύλης. Για παράδειγμα:
συνθ μαθητής = {'όνομα': 'Μαρία',
'διεύθυνση': "South Park, Bethlehem",
'ηλικία': 15
}
Καταστροφή:
κονσόλα.log (student.name) // έξοδος MaryΣτο παραπάνω παράδειγμα, ο συμβολισμός κουκκίδας έχει πρόσβαση στην τιμή του κλειδιού 'όνομα'. Στο ReactJS, θα χρησιμοποιήσετε την έννοια της αποδομής για να αποκτήσετε και να μοιραστείτε τιμές στην εφαρμογή σας. Η καταστροφή βοηθά στην αποφυγή της επανάληψης και κάνει τον κώδικά σας πιο ευανάγνωστο.
3. Μέθοδοι Πίνακας
Θα συναντήσετε πίνακες αρκετές φορές ενώ εργάζεστε σε έργα React. Ένας πίνακας είναι μια συλλογή δεδομένων. Αποθηκεύετε δεδομένα σε πίνακες, ώστε να μπορείτε να τα χρησιμοποιήσετε ξανά όταν χρειάζεται.
Οι μέθοδοι πίνακα χρησιμοποιούνται κυρίως για τον χειρισμό, την ανάκτηση και την εμφάνιση δεδομένων. Μερικές κοινώς χρησιμοποιούμενες μέθοδοι πίνακα είναι χάρτης(), φίλτρο(), και περιορίζω(). Πρέπει να είστε εξοικειωμένοι με το μεθόδους συστοιχίας για να καταλάβετε πότε να εφαρμόσετε το καθένα.
Για παράδειγμα, το χάρτης() Η μέθοδος επαναλαμβάνεται σε όλα τα στοιχεία ενός πίνακα. Ενεργεί σε κάθε στοιχείο του πίνακα για να δημιουργήσει έναν νέο πίνακα.
συνθ αριθμοί = [9, 16, 25, 36];
συνθ SquaredArr = numbers.map(Μαθηματικά.sqrt) // 3,4,5,6
Θα χρησιμοποιήσετε πολύ μεθόδους array στο ReactJS. Θα τα χρησιμοποιήσετε για να μετατρέψετε πίνακες σε συμβολοσειρές, να ενώσετε, να προσθέσετε στοιχεία και να αφαιρέσετε στοιχεία από άλλους πίνακες.
4. Σύντομοι όροι
Οι όροι είναι δηλώσεις που χρησιμοποιεί η JavaScript για τη λήψη αποφάσεων στον κώδικα. Οι σύντομες προϋποθέσεις περιλαμβάνουν τα && (και), II (ή) και τον Τριμερή Χειριστή. Αυτές είναι συντομότερες εκφράσεις των συνθηκών και οι δηλώσεις if/else.
Το ακόλουθο παράδειγμα δείχνει πώς να χρησιμοποιήσετε έναν τριαδικό τελεστή.
Κωδικός με δήλωση if/else:
λειτουργίαωρα ανοιγματος(ημέρα) {
αν (ημέρα == ΚΥΡΙΑΚΗ) {
ΕΠΙΣΤΡΟΦΗ12;
}
αλλού {
ΕΠΙΣΤΡΟΦΗ9;
}
}Κωδικός με Τριμερή Χειριστή:
λειτουργίαωρα ανοιγματος(ημέρα) {
ΕΠΙΣΤΡΟΦΗ ημέρα == ΚΥΡΙΑΚΗ; 12: 9;
}Μάθετε για διαφορετικούς τύπους όρων με ιδιαίτερη έμφαση στις σύντομες προϋποθέσεις. Αυτά χρησιμοποιούνται ευρέως στο React.
5. Πρότυπο Literals
Τα Template Literals χρησιμοποιούν back-ticks (``) για να ορίσουν μια συμβολοσειρά. Τα κυριολεκτικά πρότυπα σάς επιτρέπουν να χειρίζεστε δεδομένα συμβολοσειρών, καθιστώντας τα πιο δυναμικά. Τα γράμματα προτύπων με ετικέτα σάς επιτρέπουν να εκτελείτε λειτουργίες μέσα σε μια συμβολοσειρά. Αυτές είναι συντομότερες εκφράσεις των συνθηκών και οι δηλώσεις if/else.
Για παράδειγμα:
αφήνω Όνομα = "Ιωάννα";αφήνω επώνυμο = "Ελαφίνα";
αφήνω κείμενο = `Καλώς ήρθατε ${firstName}, ${lastName}!`; // Καλώς ήρθες Jane Doe!
6. Spread Operators
Ο τελεστής Spread (...) αντιγράφει τις τιμές ενός αντικειμένου ή πίνακα σε άλλο. Η σύνταξή του αποτελείται από τρεις τελείες ακολουθούμενες από το όνομα της μεταβλητής. Για παράδειγμα (...όνομα). Συγχωνεύει τις ιδιότητες δύο πινάκων ή αντικειμένων.
Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιήσετε τον τελεστή spread για να αντιγράψετε τις τιμές μιας μεταβλητής σε μια άλλη.
συνθ ονόματα = ['Μαρία', 'Ιωάννα'];
συνθ μέλη ομάδας = ['Φρειδερίκος', ...ονόματα, 'Αγγελα']; // ["Fred", "Mary", "Jane", "Angela"]
Μπορείτε να χρησιμοποιήσετε τον τελεστή διασποράς για να κάνετε έναν αριθμό λειτουργιών. Αυτά περιλαμβάνουν την αντιγραφή των περιεχομένων ενός πίνακα, την εισαγωγή ενός πίνακα σε έναν άλλο, την πρόσβαση σε ένθετους πίνακες και τη διαβίβαση πινάκων ως ορίσματα. Μπορείτε να χρησιμοποιήσετε τον τελεστή spread στο ReactJS για να χειριστείτε τις αλλαγές κατάστασης στα στοιχεία.
Γιατί να μάθετε ReactJS;
Το ReactJS είναι δημοφιλές για καλό λόγο. Έχει σύντομη καμπύλη εκμάθησης, αξιόπιστη και αποδίδεται γρήγορα στο DOM. Υποστηρίζει αυτόνομα στοιχεία και διαθέτει εξαιρετικά εργαλεία εντοπισμού σφαλμάτων.
Το ReactJS ενσωματώνει νέες έννοιες JavaScript από το ECMAScript 6 (ES6). Η εκμάθηση θεμελιωδών εννοιών σε JavaScript θα διευκολύνει την ανάπτυξη έργων στο ReactJS.
Επιπροσθέτως, το ReactJS έχει μια εξαιρετική κοινότητα που κυκλοφορεί συνεχώς νέες ενημερώσεις. Εάν θέλετε να μάθετε μια βιβλιοθήκη JavaScript, το ReactJS θα ήταν μια εξαιρετική επιλογή. Το πλαίσιο Next.js συμπληρώνει τους περιορισμούς του ReactJS. Ένας συνδυασμός των δύο καθιστά το ReactJS μια ισχυρή βιβλιοθήκη front-end.
