Props to wejścia przekazywane do komponentu przez jego rodzica (tylko do odczytu z perspektywy dziecka). State to dane, które komponent posiada i zarządza wewnętrznie (może je zmienić). Rozróżnienie: props pochodzą z zewnątrz i nie zmieniają się w komponencie; state jest wewnętrzny i zmienny.
() {
;
}
< name= />
Props płyną w dół od rodzica do dziecka. Dziecko je odczytuje, ale nie może ich zmienić — aby zmienić wartość prop, rodzic musi przekazać nową.
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 jest tworzony i kontrolowany wewnątrz komponentu; komponent go zmienia (via setCount/setState), a zmiana go wyzwala ponowne renderowanie.
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 jednego komponentu jest często przekazywany dziecku jako prop. Podnoszenie state w górę i przekazywanie go w dół to dokładnie ten wzorzec — rodzic jest właścicielem state, dzieci otrzymują go jako props.
Rozróżnienie state vs props jest fundamentalne dla frameworków opartych na komponentach.
Definiuje własność danych i przepływ: props to zewnętrzna, tylko do odczytu konfiguracja (dane w dół); state to wewnętrzne, zmienne dane zarządzane przez komponent.
Pomylenie ich — mutacja props, lub duplikowanie props do state — powoduje klasyczne błędy.
Zrozumienie, że dane płyną w dół jako props, podczas gdy każdy komponent posiada swój własny state, jest fundamentem projektowania komponentów React/Vue/Angular.