Ποια είναι η διαφορά μεταξύ state και props;

Question

Accepted Answer

**Props** είναι εισόδους **που μεταβιβάζονται σε** ένα στοιχείο από το γονικό του (μόνο ανάγνωση από την οπτική γωνία του παιδιού). **State** είναι δεδομένα που ένα στοιχείο **κατέχει και διαχειρίζεται εσωτερικά** (μπορεί να τα αλλάξει). Η διάκριση: τα props προέρχονται από έξω και δεν αλλάζουν στο εσωτερικό του στοιχείου· το state είναι εσωτερικό και τροποποιήσιμο. ## Props — μεταβιβάστηκαν, μόνο ανάγνωση ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` Tα Props ρέουν **προς τα κάτω** από γονέα σε παιδί. Το παιδί τα διαβάζει αλλά δεν μπορεί να τα αλλάξει — για να αλλάξει την τιμή ενός prop, ο γονέας πρέπει να περάσει ένα νέο. ## State — κατέχεται εσωτερικά, τροποποιήσιμο ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` To state δημιουργείται και ελέγχεται *μέσα* στο στοιχείο· το στοιχείο το αλλάζει (μέσω `setCount`/`setState`), και η αλλαγή του ενεργοποιεί μια επανα-απόδοση. ## Δίπλα-δίπλα ```text Props State Source passed from parent created in the component Mutable? read-only (in child) yes (via setter) Who controls it the parent the component itself Triggers render when the parent changes it when the component updates it Purpose configure/pass data in track changing internal data ``` ## Λειτουργούν μαζί ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` Το **state** ενός στοιχείου συχνά μεταβιβάζεται σε ένα παιδί ως **prop**. Η ανύψωση του state και η μεταβίβαση του προς τα κάτω είναι ακριβώς αυτό το μοτίβο — ο γονέας κατέχει το state, τα παιδιά το λαμβάνουν ως props. ## Γιατί έχει σημασία Η διάκριση state-έναντι-props είναι θεμελιώδης για τα frameworks που βασίζονται σε στοιχεία. Ορίζει την ιδιοκτησία και τη ροή δεδομένων: τα props είναι εξωτερικά, δεδομένα διαμόρφωσης μόνο ανάγνωσης (δεδομένα προς τα κάτω)· το state είναι εσωτερικά, τροποποιήσιμα δεδομένα που το στοιχείο διαχειρίζεται. Η σύγχυσή τους — η μεταλλαγή props ή η αντιγραφή props στο state — προκαλεί κλασικά σφάλματα. Η κατανόηση ότι τα δεδομένα ρέουν προς τα κάτω ως props ενώ κάθε στοιχείο κατέχει το δικό του state είναι το θεμέλιο του σχεδιασμού στοιχείων React/Vue/Angular.