Props er inputdata sendt til en komponent af dens forælder (skrivebeskyttet fra barnets perspektiv). State er data, som en komponent ejer og administrerer internt (den kan ændre det). Forskellen: props kommer udefra og ændres ikke inden i komponenten; state er internt og ænderligt.
() {
;
}
< name= />
Props flyder ned fra forælder til barn. Barnet læser dem, men kan ikke ændre dem — for at ændre en props værdi skal forælderen sende en ny.
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 oprettes og kontrolleres inden for komponenten; komponenten ændrer det (via setCount/setState), og ændring af det udløser en genudgave.
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
}
En komponents state sendes ofte til et barn som prop. At løfte state op og sende det ned er præcis dette mønster — forælderen ejer state, børn modtager det som props.
State-versus-props-skelnen er grundlæggende for komponentbaserede frameworks.
Det definerer dataejendomsret og flow: props er eksterne, skrivebeskyttede konfigurationsdata (data ned); state er interne, ænderlige data, som komponenten administrerer.
At blande dem — mutere props eller duplikere props ind i state — forårsager klassiske fejl.
At forstå, at data flyder ned som props, mens hver komponent ejer sin egen state, er grundlaget for React/Vue/Angular-komponentdesign.