Τεχνολογία

Εργασία με React Hooks και TypeScript



Οι γάντζοι εισήχθησαν στο React τον Φεβρουάριο του 2019 για να βελτιώσουν την αναγνωσιμότητα του κώδικα. Συζητήσαμε ήδη το React hooks προηγούμενα άρθρα , αλλά αυτή τη φορά εξετάζουμε πώς λειτουργούν τα άγκιστρα με το TypeScript.

πώς να χρησιμοποιήσετε το junit στο intellij

Πριν από τα άγκιστρα, τα συστατικά React είχαν δύο γεύσεις:



  • Μαθήματα που χειρίζονται μια κατάσταση
  • Λειτουργίες που ορίζονται πλήρως από τα στηρίγματα τους

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



Τι είναι οι γάντζοι αντιδράσεων;

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



Τι είναι οι γάντζοι αντιδράσεων;

Αλλά καθώς ο κώδικας μεγαλώνει, Τα λειτουργικά συστατικά τείνουν να μετασχηματίζονται ως συστατικά δοχείων.



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

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



// put signature in local state and toggle signature when signed changes function QuotationSignature({quotation}) { const [signed, setSigned] = useState(quotation.signed); useEffect(() => { fetchPost(`quotation/${quotation.number}/sign`) }, [signed]); // effect will be fired when signed changes return {setSigned(!signed)}}/> Signature }

Υπάρχει ένα μεγάλο μπόνους σε αυτό - κωδικοποίηση με Τύπος γραφής ήταν υπέροχο με το Angular αλλά φουσκωμένο με το React. Ωστόσο, η κωδικοποίηση Αντιδράστε άγκιστρα με TypeScript είναι μια ευχάριστη εμπειρία.

Πληκτρολόγιο με Old React

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



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

interface Quotation{ id: number title:string; lines:QuotationLine[] price: number } interface QuotationState{ readonly quotation:Quotation; signed: boolean } interface QuotationProps{ quotation:Quotation; } class QuotationPage extends Component { // ... }

Αλλά φανταστείτε ότι το QuotationPage θα ζητήσει τώρα από τον διακομιστή ένα ταυτότητα : για παράδειγμα, η 678η προσφορά από την εταιρεία. Λοιπόν, αυτό σημαίνει ότι το QuotationProps δεν γνωρίζει αυτόν τον σημαντικό αριθμό - δεν τυλίγει μια προσφορά ακριβώς . Πρέπει να δηλώσουμε πολύ περισσότερο κώδικα στη διεπαφή QuotationProps:



interface QuotationProps{ // ... all the attributes of Quotation but id title:string; lines:QuotationLine[] price: number }

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

Οφέλη του TypeScript με γάντζους

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



interface QuotationProps{ quotation:Quotation; } function QuotationPage({quotation}:QuotationProps){ const [quotation, setQuotation] = useState(quotation); const [signed, setSigned] = useState(false); }

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

Τα εξαρτήματα με άγκιστρα είναι όλες λειτουργίες. Έτσι, μπορούμε να γράψουμε το ίδιο συστατικό επιστρέφοντας το FC 

const QuotationPage : FC = ({quotation}) => { const [quotation, setQuotation] = useState(quotation); const [signed, setSigned] = useState(false); }

Προφανώς, η χρήση TypeScript με άγκιστρα React είναι ευκολότερη από τη χρήση με τάξεις React. Και επειδή η ισχυρή πληκτρολόγηση αποτελεί πολύτιμη ασφάλεια για την ασφάλεια κώδικα, θα πρέπει να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε το TypeScript εάν το νέο σας έργο χρησιμοποιεί αγκίστρια. Θα πρέπει σίγουρα να χρησιμοποιήσετε αγκίστρια αν θέλετε κάποια TypeScript.

Υπάρχουν πολλοί λόγοι για τους οποίους θα μπορούσατε να αποφύγετε το TypeScript, χρησιμοποιώντας το React ή όχι. Αλλά αν επιλέξετε να το χρησιμοποιήσετε, θα πρέπει σίγουρα να χρησιμοποιήσετε και γάντζους.

Ειδικά χαρακτηριστικά του TypeScript Κατάλληλο για γάντζους

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

Το TypeScript μας δίνει μια μακρά λίστα τύποι χρησιμότητας , και τρεις από αυτούς θα μας βοηθήσουν με το React, μειώνοντας τον θόρυβο πολλών περιγραφών διεπαφής.

  • Partial : οποιαδήποτε δευτερεύοντα κλειδιά του T
  • Omit : όλα τα πλήκτρα του T εκτός από το πλήκτρο x
  • Pick : Ακριβώς x, y, z κλειδιά από T

Ειδικά χαρακτηριστικά του TypeScript Κατάλληλο για γάντζους

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

Partial και Omit δεν υπάρχει στις περισσότερες δακτυλογραφημένες γλώσσες όπως η Java, αλλά βοηθά πολλά για παραδείγματα με φόρμες στην ανάπτυξη front-end. Απλοποιεί το βάρος της πληκτρολόγησης.

type QuotationProps= Omit; function QuotationPage({quotation}:QuotationProps){ const [quotation, setQuotation] = useState(quotation); const [signed, setSigned] = useState(false); // ... }

Τώρα έχουμε μια προσφορά χωρίς αναγνωριστικό. Λοιπόν, ίσως θα μπορούσαμε να σχεδιάσουμε ένα Quotation και PersistedQuotation extends Quotation. Επίσης, θα επιλύσουμε εύκολα ορισμένα επαναλαμβανόμενα if ή undefined προβλήματα. Πρέπει ακόμα να ονομάσουμε τη μεταβλητή προσφορά, αν και δεν είναι το πλήρες αντικείμενο; Αυτό είναι πέρα ​​από το πεδίο εφαρμογής αυτού του άρθρου, αλλά θα το αναφέρουμε αργότερα.

Ωστόσο, τώρα είμαστε σίγουροι ότι δεν θα διαδώσουμε ένα αντικείμενο που πιστεύαμε ότι είχε number. Χρήση Partial δεν παρέχει όλες αυτές τις εγγυήσεις, γι 'αυτό χρησιμοποιήστε με διακριτικότητα.

Pick είναι ένας άλλος τρόπος για να δηλώσετε έναν τύπο εν πτήσει χωρίς να χρειάζεται να δηλώσετε μια νέα διεπαφή. Εάν ένα στοιχείο, απλώς επεξεργαστείτε τον τίτλο Προσφοράς:

type QuoteEditFormProps= Pick

Ή απλά:

function QuotationNameEditor({id, title}:Pick){ ...}

Μην με κρίνετε, είμαι οπαδός του Domain Driven Design. Δεν είμαι τεμπέλης στο σημείο που δεν θέλω να γράψω δύο ακόμη γραμμές για μια νέα διεπαφή. Χρησιμοποιώ διεπαφές για την ακριβή περιγραφή των ονομάτων τομέα, και αυτές οι λειτουργίες χρησιμότητας για την τοπική ορθότητα κώδικα, αποφεύγοντας τον θόρυβο. Ο αναγνώστης θα γνωρίζει ότι Quotation είναι η κανονική διεπαφή.

Άλλα οφέλη των React Hooks

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

interface Place{ city:string, country:string } const initialState:Place = { city: 'Rosebud', country: 'USA' }; function reducer(state:Place, action):Partial { switch (action.type) { case 'city': return { city: action.payload }; case 'country': return { country: action.payload }; } } function PlaceForm() { const [state, dispatch] = useReducer(reducer, initialState); return ( { dispatch({ type: 'city',payload: event.target.value}) }} value={state.city} /> { dispatch({type: 'country', payload: event.target.value }) }} value={state.country} /> ); }

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

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

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

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

Δεν χρειάζεστε πια στοιχεία υψηλότερης παραγγελίας. Το μοτίβο Render props είναι ευκολότερο να γραφτεί με συναρτήσεις.

Έτσι, η ανάγνωση του κώδικα είναι ευκολότερη. Ο κωδικός σας δεν είναι ροή κλάσεων / συναρτήσεων / προτύπων αλλά ροής συναρτήσεων. Ωστόσο, επειδή οι λειτουργίες σας δεν είναι συνδεδεμένες σε ένα αντικείμενο, μπορεί να είναι δύσκολο να ονομάσετε όλες αυτές τις λειτουργίες.

Το TypeScript είναι ακόμα JavaScript

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

Αλλά μπορείτε να το κάνετε με μηδενική ασφάλεια. Βεβαιωθείτε ότι το tsconfig.json έχει το 'strict':true επιλογή. Ελέγξτε το πριν από την έναρξη του έργου, διαφορετικά θα πρέπει να αναπαράγετε σχεδόν κάθε γραμμή!

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

Επίσης, μπορείτε ακόμα να κάνετε σφάλματα χρόνου εκτέλεσης! Το TypeScript είναι απλούστερο από το Java και αποφεύγει προβλήματα συνδιακύμανσης / παράβασης με το Generics.

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

interface Animal {} interface Cat extends Animal { meow: () => string; } const duck = {age: 7}; const felix = { age: 12, meow: () => 'Meow' }; const listOfAnimals: Animal[] = [duck]; const listOfCats: Cat[] = [felix]; function MyApp() { const [cats , setCats] = useState(listOfCats); // Here the thing: listOfCats is declared as a Animal[] const [animals , setAnimals] = useState(listOfCats) const [animal , setAnimal] = useState(duck) return { animals.unshift(animal) // we set as first cat a duck ! setAnimals([...animals]) // dirty forceUpdate } }> The first cat says {cats[0].meow()} ; }

Το TypeScript έχει μόνο ένα διμερές προσέγγιση για γενικά που είναι απλή και βοηθά την υιοθέτηση προγραμματιστή JavaScript. Εάν ονομάσετε σωστά τις μεταβλητές σας, σπάνια θα προσθέσετε ένα duck σε ένα listOfCats.

δωρεάν χακαρισμένοι αριθμοί πιστωτικών καρτών

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

συμπέρασμα

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

Το TypeScript ήταν πιθανώς ο μεγάλος νικητής του 2019. Κέρδισε το React, αλλά επίσης κατακτά τον κόσμο με το Node.js και την ικανότητά του να πληκτρολογεί παλιές βιβλιοθήκες με αρκετά απλό αρχεία δήλωσης . Είναι θάβοντας το Flow, αν και μερικοί πάνε παντού με το ReasonML .

Τώρα, αισθάνομαι ότι τα άγκιστρα + TypeScript είναι πιο ευχάριστο και παραγωγικό από το Angular. Δεν θα το σκέφτηκα πριν από έξι μήνες.

Κατανόηση των βασικών

Μπορώ να χρησιμοποιήσω το TypeScript με το React;

Το TypeScript είναι τώρα πολύ καλό για το React εάν χρησιμοποιείτε αγκίστρια μαζί του.

Ποια είναι τα οφέλη του TypeScript;

Το TypeScript παρέχει ασφάλεια κώδικα. Το IDE σάς προσφέρει τα περισσότερα σφάλματα κώδικα, ώστε να αφιερώνετε λιγότερο χρόνο στον εντοπισμό σφαλμάτων της εφαρμογής σας στην κονσόλα.

Ποια είναι η μεγάλη συμφωνία με τους React Hooks;

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

Ποια είναι η διαφορά μεταξύ δοχείου και εξαρτήματος;

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

Προηγμένες συμβουλές και χαιρετισμοί παρουσίασης PowerPoint

Διαδικασίες Χρηματοδότησης

Προηγμένες συμβουλές και χαιρετισμοί παρουσίασης PowerPoint
Τι είναι το Bootstrap; Ένα σύντομο εκπαιδευτικό πρόγραμμα εκκίνησης για το τι, γιατί και πώς

Τι είναι το Bootstrap; Ένα σύντομο εκπαιδευτικό πρόγραμμα εκκίνησης για το τι, γιατί και πώς

Διεπαφή Ιστού