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 మరియు props మధ్య తేడా సంభావన-ఆధారిత ఫ్రేమ్వర్క్కు ప్రాథమికమైనది.
ఇది డేటా యాజమాన్యం మరియు ప్రవాహాన్ని నిర్వచిస్తుంది: props బాహ్య, చదవడానికి మాత్రమే ఆకృతీకరణ (డేటా క్రిందికి); state అంతర్గతమైనది, సంభావన నిర్వహించే మార్పుచేయదగిన డేటా.
అవి గందరగోళం చెందడం — props ను మార్చడం, లేదా props ను state కు నకిలీ చేయడం — క్లాసిక్ బగ్లను కలిగిస్తుంది.
డేటా props గా క్రిందికి ప్రవహిస్తుందని మరియు ప్రతిটి సంభావన దాని స్వంత state ను యాజమాన్యం చేస్తుందని అర్థం చేసుకోవడం React/Vue/Angular సంభావన డిజైన్ యొక్క ఆధారం.