Props ovat syötteitä, jotka välitetään komponentille sen vanhemman kautta (vain luku -tilassa lapsen näkökulmasta). State ovat tiedot, jotka komponentti omistaa ja hallitsee sisäisesti (se voi muuttaa niitä). Ero: props tulevat ulkopuolelta eivätkä muutu komponentin sisällä; state on sisäinen ja muutettavissa.
() {
;
}
< name= />
Props virtaavat alaspäin vanhemmasta lapseen. Lapsi lukee ne mutta ei voi muuttaa niitä — prop-arvon muuttamiseksi vanhemman on välitettävä uusi.
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
State luodaan ja hallitaan komponentin sisällä; komponentti muuttaa sitä (setCount/setState kautta), ja sen muuttaminen laukaisee uudelleenpiirtämisen.
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
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
Yhden komponentin state välitetään usein lapselle propina. State-noston ja alaspäin välityksen tekeminen on juuri tämä kuvio — vanhempi omistaa staten, lapset saavat sen propina.
State-versus-props-ero on perustavanlaatuinen komponenttipohjaisille kehyksille.
Se määrittelee tietojen omistajuuden ja virtauksen: props ovat ulkoisia, vain luku -määritystietoja (tiedot alaspäin); state ovat sisäisiä, muutettavissa olevia tietoja, joita komponentti hallitsee.
Niiden sekoittaminen — propien muuttaminen tai propien kopioiminen stateksi — aiheuttaa klassisia virheitä.
Ymmärrys siitä, että tiedot virtaavat propina alaspäin samalla kun jokainen komponentti omistaa oman state-tietonsa, on React/Vue/Angular-komponenttisuunnittelun perusta.