Props huma input il-mogħdija fi komponenti mill-ħadd tiegħu (maqrua biss mill-perspettiva tal-iben). State hija data li l-komponenti tmilkha u taddireexxija internament (tista' tbaddilha). Id-differenza: props huma minn barra u ma nbiddlux fil-komponenti; state hija internalment u varjabbli.
() {
;
}
< name= />
Props jgħaddu isfel mill-ħadd ghall-iben. L-iben taqrahom iżda ma tistax tbaddilhom — biex tbaddel il-valur ta' prop, il-ħadd irid jigħad wahda ġdida.
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 tinħoloq u tiġi kkontrollata ġewwa il-komponenti; il-komponenti tbaddilha (permezz ta' setCount/setState), u tbaddilha tuħaррeż ċ-ċakra tat-tagħmir mill-ġdid.
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 ta' komponenti waħda ħafna drabi tiġi il-mogħdija għal iben bħala prop. Tgħaqqid state u tgħaddiha isfel hija eżattament din il-mudell — il-ħadd imlikkha l-state, il-itfal jirċibuha bħala props.
Id-differenza state-vs-props hija fundamentali fl-frameworks ibbażati fuq komponenti.
Ihija tiddefinixxi proprjetà tal-data u fluss: props huma konfigurazzjoni esterna, maqrua biss (data isfel); state hija data internalment u varjabbli li l-komponenti taddireexxija.
Tħawwad għalihom — tbiddel props, jew duplikat props fiż-żewġ — tikkawża bugs klassici.
Fhim li d-data tgħaddi isfel bħala props filwaqt li kull komponenti tmilkha l-state tagħha stess huwa l-bażi tat-tqassim tal-komponenti React/Vue/Angular.