Και τα δύο κρατούν δεδομένα που επηρεάζουν αυτό που render ένα component, αλλά διαφέρουν στο ποιος κατέχει τα δεδομένα και αν μπορούν να αλλάξουν.
Και τα δύο κρατούν δεδομένα που επηρεάζουν αυτό που render ένα component, αλλά διαφέρουν στο ποιος κατέχει τα δεδομένα και αν μπορούν να αλλάξουν.
// `step` is a PROP — given by the parent, the child only reads it.
// `count` is STATE — owned here, changes on click, causes a re-render.
function Counter({ step }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + step)}>
{count}
</button>
);
}
// Parent decides the step and passes it down:
<Counter step={5} />
Τα δεδομένα ρέουν προς τα κάτω (parent → child μέσω props) και οι αλλαγές ρέουν προς τα πάνω (το child ζητά από το parent να αλλάξει κάτι μέσω ενός callback prop όπως onChange). Αυτή η ροή ενός κατεύθυνσης είναι αυτή που κάνει τις εφαρμογές React προβλέψιμες.
props.x = 1) είναι ένα σφάλμα — το React δεν θα κάνει re-render και έχεις σπάσει την κυριότητα του parent. Για να "αλλάξεις" ένα prop, καλέστε ένα callback που σας έδωσε το parent ώστε το parent να ενημερώσει το δικό του state και να περάσει μια νέα τιμή προς τα κάτω.