Props એ ઇનપુટ છે જે પિતૃ દ્વારા ઘટક માં પાસ કરવામાં આવે છે (બાળકના દૃષ્ટિબિંદુ પરથી માત્ર-વાંચન)। State એ ડેટા છે જે ઘટક માલિક છે અને આંતરિક રીતે સંચાલે છે (તે તેને બદલી શકે છે)। તફાવત: props બહારથી આવે છે અને ઘટક માં બદલાતા નથી; state આંતરિક અને પરિવર્તનશીલ છે।
() {
;
}
< name= />
Props પિતૃ થી બાળક તરફ નીચે વહે છે। બાળક તેમને વાંચે છે પરંતુ તેમને બદલી શકતો નથી — પ્રોપ્સ મૂલ્ય બદલવા માટે, પિતૃ એક નવું પાસ કરવું જોઈએ।
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 ઘટક અંદર બનાવવામાં આવે છે અને નિયંત્રણ કરવામાં આવે છે; ઘટક તેને બદલે છે (setCount/setState દ્વારા), અને તેને બદલવું એક પુનઃ-રેન્ડર ટ્રિગર કરે છે।
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 ઘણીવાર બાળક માં prop તરીકે પાસ કરવામાં આવે છે। State ઉપર લઈ જવું અને તેને પાસ કરવું એ આ પેટર્ન છે — પિતૃ state માલિક છે, બાળકો તેને props તરીકે પ્રાપ્ત કરે છે।
State-vs-props તફાવત ઘટક-આધારિત ફ્રેમવર્કસ માટે મૌલિક છે।
તે ડેટા માલિકી અને પ્રવાહને વ્યાખ્યાયિત કરે છે: props બાહ્ય, માત્ર-વાંચન કોંફિગરેશન છે (ડેટા નીચે); state આંતરિક, પરિવર્તનશીલ ડેટા છે જે ઘટક સંચાલે છે।
તેમને મર્યાદિત કરવું — props ને બદલવું, અથવા props ને state માં નકલ કરવું — શાસ્ત્રીય બગ્સ સૃષ્ટી કરે છે।
તે સમજવું કે ડેટા props તરીકે નીચે વહે છે જ્યારે દરેક ઘટક તેનું પોતાનું state માલિક છે તે React/Vue/Angular ઘટક ડિઝાઈન તેનો પાયો છે।