Ανταπόκριση εναντίον Vue (Exact Todo App) Με Παράδειγμα

REACT και VUE

Το 2018 έμαθα React. Στην αρχή ήταν λίγο δύσκολο γιατί το υπόβαθρό μου ήταν από την PHP, αλλά από ό, τι αποφάσισα να εξερευνήσω τις βασικές έννοιες του React. Πρόσφατα μετακόμισα στο Vue και λόγω του React ήταν πολύ διασκεδαστικό να δουλέψω με τον Vue. Η εμπειρία που δούλευε με τους δύο ήταν αρκετά διαφορετική. Ενώ το Vue ήταν πολύ διασκεδαστικό και απλούστερο, το React ήταν πιο αρχιτεκτονικό για να συνεργαστεί.

Η τεκμηρίωση οποιουδήποτε πλαισίου είναι σημαντική. Το αντίγραφο της επίσημης τεκμηρίωσης προσφέρει μια αξιοπρεπή τεκμηρίωση στους νεοφερμένους. Ενώ η επίσημη τεκμηρίωση της Vue προσφέρει τεκμηριωμένη τεκμηρίωση. Είναι εύκολο να κατανοήσουμε τις βασικές έννοιες του πλαισίου, αν οι προγραμματιστές έχουν κάποια εμπειρία στο front-end. Το 2018 Το Vue repo στο GitHub μόλις πέρασε React και πέρασε πάνω από 100.000 αστέρια.

Τώρα αφήνει να κινηθεί για το θέμα που έχω αποφασίσει να μοιραστώ μαζί σας.

Προϋποθέσεις; όχι πραγματικά

Για αυτό το σεμινάριο δεν χρειάζεται να είστε ειδικός σε Javascript, React. Βασικές γνώσεις είναι αρκετές για να πάρουν το κρέμονται από αυτό το σεμινάριο. Γιατί θα σας πω από την αρχή.

Εντάξει λοιπόν, ας πάρουμε αυτό το πάρτι ξεκίνησε!

Αντίδραση έναντι Vue (Exact Todo App) Σύγκριση με Παράδειγμα

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

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

Εργαλεία που θα ακολουθήσουν
1) InstallNode και npm, αν δεν έχετε
2) Installcreate-react-app με npm create-react-app --- global
και εγκαταστήστε vue-createwith npm install -g @ vue / cli

Τώρα, είναι καλό να πάμε.

Τώρα μπορείτε να δημιουργήσετε μια νέα εφαρμογή React και Vue

Απλά χρησιμοποιήστε τις ακόλουθες εντολές για να δημιουργήσετε έργα.
1) δημιουργία-αντιδρά-app-react-todo
Θα δημιουργήσει ένα νέο φάκελο react-todo με ορισμένα αρχεία και φακέλους.
2) vue δημιουργία vue-todo
Θα δημιουργήσει επίσης ένα νέο φάκελο vue-todo με ορισμένα αρχεία και φακέλους.

ΕΣΕΙΣ ΤΩΡΑ ΤΩΡΑ

Εκτελέστε την εφαρμογή αντιδράσεων με npm start

cd react-todo τότε npm start

Εκτελέστε το app vue με το serve run npm

cd vue-todo και στη συνέχεια τρέξτε npm

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

αντιδράσει-todo

και το πρότυπο Vue θα μοιάζουν με αυτό.

vue-todo

Προσθέστε το σύνδεσμο cdn bootstrap τόσο στον React όσο και στον Vue από την επίσημη ιστοσελίδα του bootstrap. Δεδομένου ότι αυτό δεν είναι ένα blog bootstrap`s έτσι δεν θα το καλύψω.

Πού πρέπει να προσθέσω σύνδεσμο CDN;

Στο React έχουμε δημόσιο φάκελο που περιέχει όλα τα στατικά αρχεία, εικόνες και index.html. Insideindex.html στην ετικέτα κεφαλίδας απλά προσθέστε bootstrap cdn link σε αυτό.

Το Vue διαθέτει δημόσιο φάκελο και περιέχει επίσης όλα τα στατικά αρχεία, εικόνες και index.html. Μέσα στο index.html στην ετικέτα κεφαλίδας απλά προσθέστε bootstrap cdn link σε αυτό.

Ξεκίνα

επιτρέπει τη δημιουργία ενός πίνακα στο αρχείο App.js στο src στο React όπως παρακάτω.

αντιδράσει-todo

Εδώ έχουμε μια σειρά από todos με 3 αντικείμενα με διαφορετικό id και task. Το React χρησιμοποιεί την κατάσταση για την αποθήκευση των δεδομένων στη λειτουργία του κατασκευαστή.

Ενώ το Vue έχει διαφορετική ιστορία, χρησιμοποιεί τη λειτουργία δεδομένων αυτή η λειτουργία επιστρέφει το αντικείμενο στο οποίο αποθηκεύονται όλα τα δεδομένα. Ανοίξτε το αρχείο App.js στο src και στο εσωτερικό της ετικέτας δέσμης ενεργειών πρέπει να ορίσετε τη λειτουργία δεδομένων. Η εσωτερική λειτουργία δεδομένων είναι το ίδιο με το React όπως παρακάτω.

vue-todo

Τώρα λοιπόν έχουμε ορίσει το έργο μας πώς μπορούμε να το επιδείξουμε;
Αυτό είναι το ερώτημα που ήρθε στο μυαλό μας. Το React και το Vue κάνουν την ίδια δουλειά αλλά με διαφορετικό τρόπο. Έτσι αφήνει να βουτήξει σε αυτό.

Πώς αντιδρά το React;

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

Έτσι έχουμε εδώ τη λειτουργία map παίρνει μια συνάρτηση με 2 επιχειρήματα πρώτα έχουμε το στοιχείο για το βρόχο και δεύτερον έχουμε τον δείκτη κάθε στοιχείου πίνακα. Σκοπός του δείκτη; Περιμένετε για αυτή την ενότητα ... ..
Στη συνέχεια προβάλλουμε το στοιχείο της λίστας χρησιμοποιώντας {item.name}.
Θα δείτε ότι ακολουθείτε έτσι.

Ένα πράγμα που έχετε παρατηρήσει για το κλειδί μέσα στην ετικέτα li.
Ουσιαστικά, όταν αντιδρούμε κάνουμε το dom διατηρεί ένα μοναδικό κλειδί για κάθε στοιχείο, έτσι ώστε όταν αλλάζει η κατάσταση και το επαναφέρει και με το να γνωρίζει ποια στοιχεία αλλάζουν επακριβώς και ποιο στοιχείο πρόκειται να ενημερώσει. Επομένως, περάσαμε το ονομαζόμενο κλειδί ως {item.id} το οποίο είναι ένα μοναδικό κλειδί για κάθε ένα από τα στοιχεία του πίνακα.

Πώς δρα η Vue;

Το Vue χρησιμοποιεί το ίδιο προνόμιο δηλαδή: looping για την εμφάνιση του περιεχομένου αλλά με άλλο τρόπο. Μπορούμε να χρησιμοποιήσουμε την οδηγία v-for στο Vue. Μας επιτρέπει να βγούμε πάνω σε έναν πίνακα και να δίνουμε δεδομένα από μέσα του.

vue-todo

Η οδηγία v-for χρειάζεται μια σύνταξη με τη μορφή todo in todos, όπου todos είναι η array δεδομένων πηγής και todo είναι ένα ψευδώνυμο για το στοιχείο πίνακα που επαναλαμβάνεται. Έτσι, μπορούμε τώρα να προβάλουμε το κάθε ένα εάν το todo με τη χρήση 2 σγουράκια {{todo.name}} όπως φαίνεται παραπάνω

vue-todo

Το Vue διατηρεί επίσης το μοναδικό κλειδί για τον προσδιορισμό του ακριβούς στοιχείου, διότι αν το ενημερώσουμε αργότερα, το DOM ξέρει τι έχει αλλάξει ο δείκτης. Στο React περάσαμε ένα πρόπλασμα ως κλειδί, αλλά στο Vue χρησιμοποιούμε την οδηγία v-bind ως v-bind: key = "todo.id".

Δημιουργία Todo

Πρώτα απ 'όλα, προσθέστε ένα πεδίο εισαγωγής και στις δύο εφαρμογές.
Αντιδρώ:

αντιδράσει-todo

Vue:

vue-todo

Πώς αντιδρά το React;

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

αντιδράσει-todo

Τώρα λοιπόν θα δημιουργήσουμε μια λειτουργία που ονομάζεται handleChange (), έτσι ώστε η λειτουργία handleChange λαμβάνει ένα συμβάν. Αυτό το συμβάν αυτό το κανονικό συμβάν javaScript που πυροδοτείται κάθε φορά που αλλάζει η είσοδος. Τώρα αφήνει να δημιουργηθεί μια κατάσταση που ονομάζεται newTodo και έπειτα μέσα στο handleChange () πρόκειται να χρησιμοποιήσουμε το setState. Τι είναι το setState (); Ας το παραδώσουμε στο Revanth Kumar για μια εξήγηση:

"Αυτό οφείλεται στο γεγονός ότι το React θέλει να επαναλάβει την εκτέλεση ορισμένων αγκιστριών κύκλου ζωής, [όπως] componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate, κάθε φορά που αλλάζει κατάσταση. Θα γνωρίζει ότι η κατάσταση έχει αλλάξει όταν καλείτε τη συνάρτηση setState. Εάν μεταλλάξατε απευθείας την κατάσταση, το React θα έπρεπε να κάνει πολύ περισσότερη δουλειά για να παρακολουθήσει τις αλλαγές και τι γάντζοι του κύκλου ζωής για να τρέξει κλπ. Έτσι για να γίνει απλό React χρησιμοποιεί το setState. "

Το setState () βασικά παίρνει νέες τιμές για να συνδυάσει τις ζωντανές τιμές, στη συνέχεια ενεργοποιεί μια re-rendering.
Έτσι, μέσα στο handleChange () θα θέσουμε τη νέα τιμή στην κατάσταση newTodo όπως φαίνεται παρακάτω.

Αφήνει να πληκτρολογήσετε κάτι στην είσοδο .........
Περιμένετε τι δείχνει το σφάλμα wooooooopppppssss.

Λέει ότι το setState είναι ακαθόριστο στη λειτουργία handleChange () και έτσι πρέπει να δεσμευτούμε στον κατασκευαστή. Η κλήση μιας συνάρτησης από μια κλάση δεν σημαίνει ότι καλείται με την τιμή του αντικειμένου που δημιούργησε τη λειτουργία αυτή. Παρεμπιπτόντως Εάν οι λειτουργίες σας δεν απαιτούν προσέγγιση στην κατάσταση του εξαρτήματός σας, τότε δεν χρειάζεται να τις δεσμεύσετε.

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

αντιδράσει-todo

Απλά χρησιμοποιήστε την εφαρμογή console.log (this.state.newTodo) στην εφαρμογή και πληκτρολογήστε οτιδήποτε θέλετε.
Αν θέλουμε να ορίσουμε την προεπιλεγμένη τιμή του newTodo μπορούμε να το αφήσουμε να το κάνει.
Αυτό θα πρέπει να δείχνει την τιμή μέσα στην ετικέτα εισόδου στο App.js.

αντιδράσει-todo

Ελεγξέ το . Noooooooppppps του δεν λειτουργεί ....
Αυτό που πρόκειται να κάνουμε είναι ότι θα φτάσουμε στην ετικέτα εισόδου στο App.js και θα ορίσουμε την τιμή και μπορούμε να ορίσουμε ως value = {this.state.newTodo}

Έτσι, αφήστε να δοκιμάσετε αυτό τώρα. Ανανέωσε τη σελίδα

Hoorraaah λειτούργησε!
Έτσι, τώρα έχουμε επιτύχει ΔΥΟ WAY BINDING μεταξύ του κράτους και των εισροών. Η τιμή κατάστασης είναι η τιμή εισόδου και η τιμή εισόδου είναι η τιμή της κατάστασης αντίστροφα.
Τώρα αφήνετε να προσθέσετε το κουμπί πάνω από τη λίστα με το todos χρησιμοποιώντας bootstrap.