Props एक अभिभावक द्वारा एक घटकमा पारित इनपुट हो (बालकको दृष्टिकोणबाट पढ-मात्र)। State डेटा हो जुन एक घटकले आन्तरिकरूपमा소有र व्यवस्थापन गर्दछ (यो यसलाई परिवर्तन गर्न सक्छ)। भेद: props बाहिरबाट आउँछ र घटक भित्र परिवर्तन हुँदैन; state आन्तरिक र परिवर्तनशील हो।
() {
;
}
< name= />
Props तलतिर अभिभावकबाट बालकमा प्रवाह हुन्छ। बालकले तिनीहरूलाई पढ्छ तर परिवर्तन गर्न सक्दैन — prop को मान परिवर्तन गर्न, अभिभावकले नयाँ एक पारित गर्नुपर्छ।
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 घटक डिजाइनको आधार हो।