Πάρτε το κεφάλι σας να αντιδράσει με αυτούς τους πέντε παράγοντες

Η μάθηση αντιδρά, η βιβλιοθήκη JavaScript για τη δημιουργία διεπαφών χρήστη από το Facebook και το Instagram φαίνεται καρύδια μέχρι να το δώσετε μια ευκαιρία. Τα πράγματα γίνονται πολύ πιο εύκολα όταν καταλαβαίνετε πέντε βασικές έννοιες. Καλώ αυτές τις πέντε μετατοπίσεις του μυαλού. Πρόκειται για: εξαρτήματα, JSX, κατάσταση, μέθοδοι κύκνου και ροή δεδομένων μονής κατεύθυνσης.

01. Εξαρτήματα

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

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

Στο HTML, μπορείτε να σκεφτείτε αυτή την εφαρμογή ως σειρά στοιχείων, όπως αυτό:

 & lt; div id = "petappointments" & gt;
  & lt; div class = "addappointments" & gt; / div & gt;
  & lt; div class = "searchappootments" & gt; / div & gt;
  & lt; div class = "listappigoints" & gt; / div & gt;
& lt; / div & gt; 

Και αυτό είναι και αυτό που θα κάνατε να αντιδράσετε. Δημιουργείτε μια ενιαία ετικέτα (& lt; div id = "petappointments" & gt;) που καλεί ένα στοιχείο PetAppointments, το οποίο στη συνέχεια καλεί τα άλλα υπο-συστατικά όπως απαιτείται. Για να περάσετε κατά μήκος ενός αντικειμένου διαμόρφωσης όπως αυτό, χρησιμοποιείτε τη μέθοδο δημιουργίας του αντιδραστή αντικειμένου.

 var maininterface = αντιδράσει.createclass ({
  Render: Λειτουργία () {
    ΕΠΙΣΤΡΟΦΗ (
      & lt; div classname = "interface" & gt;
        & lt; addappointment / & gt;
        & lt; searchAppootments / & gt;
        & lt; listapproidments / & gt;
      & lt; / div & gt;
    )
  } // καθιστούν
}); // maininterface

Αντιδρά.
  & lt; maininterface / & gt;,
  Document.GetELEMEMEDByid ('PetAppointments')
) // καθιστούν 

Υπάρχουν δύο μέθοδοι καθιστούν. Στην κατηγορία Maininterface, δηλώνουμε τα αντικείμενα που θα σταλούν στο πρόγραμμα περιήγησης και την αντιδραστική μέθοδο. στοιχείο στο HTML σας με τον κώδικα του React. Στη συνέχεια, θα γράψουμε τον κώδικα που χειρίζεται κάθε ένα από τα τρία δευτερεύοντα στοιχεία μας.

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

02. JSX

Jsx είναι πιθανώς μια από τις μεγαλύτερες μετατοπίσεις μυαλού και ένας από τους λόγους για τους οποίους η βιβλιοθήκη φαίνεται τόσο περίεργη. Το JSX είναι μια επέκταση στο JavaScript που σας επιτρέπει να συνδυάσετε τον κωδικό XML με το JavaScript.

Αυτό είναι είδος από το τι συμβαίνει με τις γλώσσες που προβάλλει όπως το μουστάκι, το οποίο σας επιτρέπουν να συμπεριλάβετε javascript μέσα στο HTML. Αλλά το JSX μεταφράζεται (αναλωμένο) σε JavaScript. Έτσι δεν δημιουργείτε μόνο ένα πρότυπο, αλλά μια δομή που μετατρέπεται σε μια σειρά δηλώσεων JavaScript. Σε αντίθεση με τις γλώσσες προτύπωσης, δεν χρειάζεται να ερμηνεύεται κατά το χρόνο εκτέλεσης. Ας δούμε ένα παράδειγμα.

 & lt; li classname = "pet-stide media" πλήκτρο = {index} & gt;
  & lt; div classname = "pet-info media-body" & gt;
    & lt; div classname = "pet-head" & gt;
      & lt; spanname classname = "pet-name" & gt; {is.state.data [index] .petname} & lt; / span & gt;
      & lt; span clipname = "apt-date pull-right" & gt; {this.state.data [index] .κατάλογος} & lt; / span & gt;
    & lt; / div & gt;
    & lt · div classname = "όνομα ιδιοκτήτη" & gt; & lt; span classname = "Ετικέτα-στοιχείο" & gt; ιδιοκτήτης: & lt; / span & gt;
    {is.state.data [index]. Townername} & lt; / div & gt;
    & lt; div classname = "apt-notes" & gt; {is.state.data [index] .aptnotes} & lt; / div & gt;
  & lt; / div & gt;
& lt; / li & gt; 

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

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

03. κράτος

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

Στην εφαρμογή δείγματός μου, η αρχική κατάσταση δημιουργείται έτσι:

 var maininterface = αντιδράσει.createclass ({
  getinialstate: λειτουργία () {
    ΕΠΙΣΤΡΟΦΗ {
      Adbodyvisible: False,
      ΠΑΡΑΓΓΕΛΙΑ: 'PETNAME',
      ΠΑΡΑΔΟΣΗ: 'ASC',
      QueryText: ''
    } //ΕΠΙΣΤΡΟΦΗ
  }, // getinitialstate 

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

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

 VAR αντιδράσει = απαιτείται ('αντιδράσει').
var aptlist = αντιδράσει.createclass ({

  Χειρισμένο: Λειτουργία () {
    this.props.ondelete (this.props.whichitem)
  },

  Render: Λειτουργία () {
    ΕΠΙΣΤΡΟΦΗ(
      & lt; li classname = "μέσο κατοικίδιων ζώων" & gt;
        & lt; div classname = "media-αριστερά" & gt;
          & lt; button classname = "pet-delete btn btn-xs btn-danger" onclick = {this.handledelete} & gt;
          & lt; spanname classname = "glyphicon glyphicon-away" & gt; / span & gt; / lt; / button & gt;
        & lt; / div & gt;
        & lt; div classname = "pet-info media-body" & gt;
          & lt; div classname = "pet-head" & gt;
            & lt; spanname classname = "pet-name" & gt; {this.props.singleitem.petname} & lt; / span & gt;
            & lt; span clipname = "apt-date pull-right" & gt; {this.props.singleitem.aptdate} / lt; / span & gt;
          & lt; / div & gt;
          & lt · div classname = "όνομα ιδιοκτήτη" & gt; & lt; span classname = "Ετικέτα-στοιχείο" & gt; ιδιοκτήτης: & lt; / span & gt;
          {This.props.singleitem.ownern όνομα} / div & gt;
          & lt; div classname = "apt-notes" & gt; {this.props.singleitem.aptnotes} & lt; / div & gt;
        & lt; / div & gt;
      & lt; / li & gt;
    ) // ΕΠΙΣΤΡΟΦΗ
  } // καθιστούν
}); // aptlist

module.exports = aptlist; 

Το στοιχείο ενδιαφέρεται μόνο με δύο πράγματα. Πρώτον, δείχνοντας τη λίστα των ραντεβού που βασίζονται στην τρέχουσα κατάσταση της εφαρμογής. Δεύτερον, χειρίζοντας ένα κλικ σε ένα από τα κόκκινα 'x's.

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

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

04. Ροή δεδομένων μονής κατεύθυνσης

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

 VAR αντιδράσει = απαιτείται ('αντιδράσει').
var aptlist = αντιδράσει.createclass ({
  Χειρισμένο: Λειτουργία () {
    this.props.ondelete (this.props.whichitem)
  },
  Render: Λειτουργία () {
    ΕΠΙΣΤΡΟΦΗ(
      & lt; li classname = "μέσο κατοικίδιων ζώων" & gt;
        & lt; div classname = "media-αριστερά" & gt;
          & lt; button classname = "pet-delete btn btn-xs btn-danger" onclick = {this.handledelete} & gt;
          & lt; spanname classname = "glyphicon glyphicon-away" & gt; / span & gt; / lt; / button & gt;
        & lt; / div & gt;
      & lt; / li & gt;
      ...
    ) // ΕΠΙΣΤΡΟΦΗ
  } // καθιστούν
}); // aptlist

module.exports = aptlist; 

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

Στην κύρια ενότητα θα δημιουργήσατε ένα χαρακτηριστικό στην ετικέτα που χρησιμοποιείτε για να αντιπροσωπεύετε την ενότητα. Φαίνεται ακριβώς όπως περνώντας ένα χαρακτηριστικό σε μια ετικέτα HTML:

 & lt; aptlist ondelete = {that.deletemessage} / & gt; 

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

05. Μέθοδοι κύκλου ζωής

Ένα από τα καλύτερα πράγματα για την αντίδραση είναι ο τρόπος με τον οποίο διαχειρίζεται την απόδοση των ενοτήτων σας. Οι ενότητες σας δεν χρειάζεται να ανησυχούν για την ενημέρωση του DOM, μόνο για την αντίδραση στην κατάσταση της αίτησής σας. Όταν οι κρατικές αλλαγές, αντιδράστε ξανά τα εξαρτήματα της εφαρμογής σας. Το κάνει αυτό δημιουργώντας τη δική του έκδοση του DOM που ονομάζεται Virtual Dom.

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

Υπάρχουν, για παράδειγμα, μέθοδοι ζωής που σας επιτρέπουν να φορτώσετε εξωτερικά δεδομένα μέσω αιτημάτων AJAX:

 ComponentDidMount: Λειτουργία () {
  αυτό.ServerRequest = $ .get ('./ js / data.json', λειτουργία (αποτέλεσμα) {
    var tempapts = αποτέλεσμα?
    αυτό.setstate ({
      myappointments: tempaps
    }); // Setstate
  } .bind (αυτό));
}, // componentdidmount 

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

Επαναλάβετε την επανεξέταση

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

Αυτό το άρθρο - που απεικονίζεται από τον Ray Villalobos - αρχικά δημοσιεύθηκε στην έκδοση 286 του Net, το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Εγγραφείτε στο NET .

Θέλετε να βελτιώσετε περαιτέρω τις δεξιότητές σας;

Εάν ενδιαφέρεστε να μάθετε περισσότερα για να αντιδράσετε, βεβαιωθείτε ότι έχετε πάρει το εισιτήριό σας για Δημιουργία Λονδίνου από τις 19-21 Σεπτεμβρίου 2018 . Έχοντας ιδρύσει την αντιδράσει ακαδημία για να διδάξει να αντιδράσει σε όλο τον κόσμο και ξεκίνησε sizzy.co και ok-google.io , Ο Kristijan Ristovski θα παράγει το εργαστήριό του - να μάθουν πώς να σκέφτονται να αντιδράσουν - στην οποία θα εξερευνήσει να αντιδράσει τις βέλτιστες πρακτικές και να σας διδάξει λύσεις σε πραγματικά προβλήματα που μπορεί να συναντήσετε στη διαδικασία οικοδόμησης μιας εφαρμογής.

Δημιουργία Λονδίνο λαμβάνει χώρα από τις 19-21 Σεπτεμβρίου 2018. Πάρτε το εισιτήριό σας τώρα .

Σχετικά Άρθρα:

• 10 Συμβουλές εμπειρογνωμόνων που πρέπει να γνωρίζετε σήμερα
• Δημιουργήστε μια εφαρμογή ταμπλό με αντιδράσει
• Δημιουργήστε μια απλή συσκευή αναπαραγωγής μουσικής με αντιδράσει