Props su ulazi proslijeđeni komponentu od strane roditelja (samo za čitanje iz perspektive djeteta). State je podatak koji komponenta posjeduje i interno upravlja (može ga promijeniti). Razlika: props dolaze iz vanjskog svijeta i ne mijenjaju se unutar komponente; state je interni i mutable.
() {
;
}
< name= />
Props teku prema dolje od roditelja prema djetetu. Dijete ih čita ali ne može ih promijeniti — da bi promijenio vrijednost prop-a, roditelj mora proslijediti novi.
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 je kreiran i kontroliran unutar komponente; komponenta ga mijenja (preko setCount/setState), i mijenjanje ga pokreće ponovno renderiranje.
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
}
State jedne komponente često se prosleđuje djetetu kao prop. Dizanje state-a gore i prosleđivanje dolje je upravo ovaj obrazac — roditelj posjeduje state, djeca ga primaju kao props.
Razlika između state-a i props-a je fundamentalna za okvire temeljene na komponentama.
Definiše vlasništvo podataka i tok: props su vanjska, samo za čitanje konfiguracija (podaci prema dolje); state je interni, mutable podatak koji komponenta upravlja.
Miješanje njih — mutiranje props-a, ili dupliciranje props-a u state — uzrokuje klasične greške.
Razumijevanje da podaci teku prema dolje kao props dok svaka komponenta posjeduje svoj state je temelj React/Vue/Angular dizajna komponenti.