Props jsou vstupy předávané komponentě jejím nadřazeným prvkem (ze pohledu potomka pouze pro čtení). State jsou data, která komponenta vlastní a spravuje interně (může je měnit). Rozdíl: props přicházejí zvenčí a v komponentě se nemění; state je interní a měnitelný.
() {
;
}
< name= />
Props proudí dolů od nadřazeného prvku k potomkovi. Potomek je čte, ale nemůže je změnit — chcete-li změnit hodnotu props, musí nadřazený prvek předat nový.
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 se vytváří a řídí uvnitř komponenty; komponenta jej mění (pomocí setCount/setState), a jeho změna vyvolá opětovné vykreslení.
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 jedné komponenty se často předává dítěti jako prop. Zvedání state a jeho předávání dolů je přesně tento vzor — nadřazený prvek vlastní state, děti ho obdrží jako props.
Rozdíl mezi state a props je základem pro komponentní frameworky.
Definuje vlastnictví dat a tok: props jsou externí, konfigurační data pouze pro čtení (data dolů); state jsou interní, měnitelná data, která komponenta spravuje.
Zaměňování jich — mutace props nebo duplikování props do state — způsobuje klasické chyby.
Pochopení, že data proudí dolů jako props, zatímco každá komponenta vlastní svůj state, je základem návrhu komponent v React/Vue/Angular.