Props iad na hionchuir a roinntear isteach i gcomhpháirt ag a tuismitheoir (léamhdhóchasach ó dhealramh an leanbh). State ná sonraí a bhí i seilbh gcomhpháirt agus a bhainistiríonn sé go hinmheánach (is féidir leis a athrú). An difreoir: bíonn props as an taobh amuigh agus ní athraíonn siad taobh istigh den chomhpháirt; is taobh istigh an state agus is féidir a athrú.
() {
;
}
< name= />
Bíonn props ag foluain síos ó thuismitheoir go dtí an leanbh. Léann an leanbh iad ach ní féidir leo a athrú — chun luach prop a athrú, caithfidh an tuismitheoir ceann nua a roinnt.
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
}
Cruthraítear state agus rialaítear taobh istigh den chomhpháirt é; athraíonn an chomhpháirt é (trí setCount/setState), agus athraíonn sé gníomhchur athré.
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
}
Is minic a dhéantar state comhpháirt amháin a roinnt go leanbh mar prop. Is é an patrún seo go díreach a bhaint de state agus a roinnt síos — tá an state ag an tuismitheoir, agus faigheann na leanaí é mar props.
Is bunúsach an difreoir state-vs-props do chreatlaí atá bunaithe ar chomhpháirteanna.
Sainítear úinéireacht na sonraí agus a sreabh: is cumrú seachtrach iad props, léamhdhóchasach (sonraí síos); is sonraí inmheánach, athraitheach iad state a bhainistríonn an chomhpháirt.
Ad iad a mheascadh — props a athrú, nó props a dhúbailt isteach i state — is cúis le fabhtanna clasaiceacha.
A thuiscint go bhfuil sonraí ag sreabh síos mar props agus go bhfuil a státúir féin ag gach comhpháirt tá sé seo ar bhonn React/Vue/Angular dearadh comhpháirte.