Svojstva so vhodni podatki, posredovani komponenti s strani njenega starša (iz pogleda otroka jih je mogoče samo prebirati). Stanje so podatki, ki jih komponenta poseduje in upravlja interno (lahko jih spremeni). Razlika: svojstva prihajajo od zunaj in se v komponenti ne spreminjajo; stanje je interno in spremenljivo.
() {
;
}
< name= />
Svojstva se pretakajo navzdol od starša do otroka. Otrok jih bere, vendar jih ne more spremeniti — za spremembo vrednosti svojstva mora starš poslati novo.
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
}
Stanje se ustvari in nadzira znotraj komponente; komponenta ga spremeni (preko setCount/setState), sprememba pa sproži ponovno upodobitev.
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
}
Stanje ene komponente je pogosto posredovano otroku kot svojstvo. Dvigovanje stanja in njegov prenos navzdol je prav ta vzorec — starš poseduje stanje, otroci ga prejemajo kot svojstva.
Razlika med stanjem in svojstvi je temeljna za ogrodja na osnovi komponent.
Opredeljuje lastništvo podatkov in njihov tok: svojstva so zunanja, samo za branje konfiguracija (podatki navzdol); stanje je interno, spremenljivi podatki, ki jih komponenta upravlja.
Zamenjava — mutiranje svojstev ali podvajanje svojstev v stanje — povzroča klasične hrošče.
Razumevanje, da se podatki pretakajo navzdol kot svojstva, medtem ko vsaka komponenta poseduje svoje stanje, je temelj oblikovanja komponent v React/Vue/Angular.