React.js για αρχάριους - Εξηγημένα στηρίγματα και κατάσταση

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

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

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

Τι είναι τα στηρίγματα;

Το Props είναι σύντομο για ιδιότητες και χρησιμοποιούνται για τη μετάδοση δεδομένων μεταξύ των στοιχείων React. Η ροή δεδομένων του React μεταξύ των στοιχείων είναι μονοκατευθυντική (μόνο από γονέα σε παιδί).

Πώς διαβιβάζετε δεδομένα με στηρίγματα;

Ακολουθεί ένα παράδειγμα για το πώς μπορούν να διαβιβάζονται τα δεδομένα χρησιμοποιώντας στηρίγματα:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

Πρώτον, πρέπει να ορίσουμε / πάρουμε κάποια δεδομένα από το γονικό στοιχείο και να τα αντιστοιχίσουμε στο χαρακτηριστικό "prop" ενός παιδικού στοιχείου.

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

const ChildComponent = (props) => { // statements };

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

return 

{props.name}

;

Μπορείτε επίσης να παρακολουθήσετε το βίντεό μου για να δείτε πώς να χρησιμοποιήσετε τα στηρίγματα:

Τι είναι το κράτος;

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

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

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Πώς ενημερώνετε την κατάσταση ενός στοιχείου;

Η κατάσταση δεν πρέπει να τροποποιηθεί άμεσα, αλλά μπορεί να τροποποιηθεί με μια ειδική μέθοδο που ονομάζεται setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Τι συμβαίνει όταν αλλάζει η κατάσταση;

Εντάξει, γιατί πρέπει να το χρησιμοποιήσουμε setState( ); Γιατί χρειαζόμαστε ακόμη και το ίδιο το κράτος; Εάν κάνετε αυτές τις ερωτήσεις, μην ανησυχείτε - θα καταλάβετε σύντομα την κατάσταση :) Επιτρέψτε μου να απαντήσω.

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

Επομένως, όταν αλλάζει η κατάσταση, το React ενημερώνεται και εκπέμπει αμέσως το DOM - όχι ολόκληρο το DOM, αλλά μόνο το στοιχείο με την ενημερωμένη κατάσταση. Αυτός είναι ένας από τους λόγους για τους οποίους το React είναι γρήγορο.

Και πώς ειδοποιείται το React; Το μαντέψατε: με setState( ). Η setState( )μέθοδος ενεργοποιεί τη διαδικασία εκ νέου απόδοσης για τα ενημερωμένα μέρη. Το React ενημερώνεται, γνωρίζει ποια τμήματα (ες) πρέπει να αλλάξει και το κάνει γρήγορα χωρίς εκ νέου απόδοση ολόκληρου του DOM.

Συνοπτικά, υπάρχουν 2 σημαντικά σημεία που πρέπει να προσέξουμε κατά τη χρήση της κατάστασης:

  • Η κατάσταση δεν πρέπει να τροποποιηθεί άμεσα - setState( )πρέπει να χρησιμοποιηθεί
  • Η κατάσταση επηρεάζει την απόδοση της εφαρμογής σας και συνεπώς δεν πρέπει να χρησιμοποιείται άσκοπα

Μπορώ να χρησιμοποιήσω την κατάσταση σε κάθε στοιχείο;

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

Γι 'αυτό τα λειτουργικά συστατικά ήταν επίσης γνωστά ως ανιθαγενή συστατικά. Ωστόσο, μετά την εισαγωγή του React Hooks , η κατάσταση μπορεί πλέον να χρησιμοποιηθεί τόσο σε λειτουργικές όσο και σε λειτουργικές συνιστώσες.

Εάν το έργο σας δεν χρησιμοποιεί React Hooks, τότε μπορείτε να χρησιμοποιήσετε την κατάσταση μόνο σε στοιχεία κλάσης.

Ποιες είναι οι διαφορές μεταξύ των στηριγμάτων και του κράτους;

Τέλος, ας ανακεφαλαιώσουμε και δείτε τις κύριες διαφορές μεταξύ των στηριγμάτων και της κατάστασης:

  • Τα στοιχεία λαμβάνουν δεδομένα από έξω με στηρίγματα, ενώ μπορούν να δημιουργήσουν και να διαχειριστούν τα δικά τους δεδομένα με κατάσταση
  • Τα στηρίγματα χρησιμοποιούνται για τη διαβίβαση δεδομένων, ενώ η κατάσταση είναι για τη διαχείριση δεδομένων
  • Τα δεδομένα από τα στηρίγματα είναι μόνο για ανάγνωση και δεν μπορούν να τροποποιηθούν από ένα στοιχείο που το λαμβάνει από έξω
  • Τα δεδομένα κατάστασης μπορούν να τροποποιηθούν από το δικό του στοιχείο, αλλά είναι ιδιωτικά (δεν είναι δυνατή η πρόσβαση από έξω)
  • Τα στηρίγματα μπορούν να μεταβιβαστούν μόνο από το γονικό στοιχείο στο παιδί (μονόδρομη ροή)
  • Η κατάσταση τροποποίησης θα πρέπει να συμβεί με τη setState ( )μέθοδο

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

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

Αν θέλετε να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, μη διστάσετε να με ακολουθήσετε στο Youtube !

Ευχαριστούμε που το διαβάσατε!