మూడూ కంపోనెంట్ల మధ్య లాజిక్ను భాగస్వామ్యం చేస్తాయి, కానీ అవి కాలక్రమేణా అభివృద్ధి చెందాయి మరియు కస్టమ్ హుక్లు లాజిక్ను భాగస్వామ్యం చేయడానికి ఆధునిక డిఫాల్ట్.
ఒక ఫంక్షన్ కంపోనెంట్ను తీసుకుని మెరుగుపరచిన ఒకటిని తిరిగి ఇస్తుంది:
= => {
user = ();
user ? : ;
};
= ();
కిందికి పడిపోతున్నవి: రాపర్ నెస్టింగ్ (చెట్టులో "wrapper hell"), prop నేమ్ ఘర్షణలు, మరియు ఇంజెక్ట్ చేసిన props ఎక్కడ నుండి వస్తున్నాయో స్పష్టం కాదు.
ఒక కంపోనెంట్ స్థితిని భాగస్వామ్యం చేయడానికి ఒక ఫంక్షన్ను దానిపిల్లగా తీసుకుంటుంది:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
నమ్యమైనది, కానీ అనేక రెండర్-prop కంపోనెంట్లను నెస్ట్ చేయడం "callback pyramid" ను సృష్టిస్తుంది.
స్థితిపూర్ణ లాజిక్ను useX ఫంక్షన్గా సంగ్రహించండి — అదనపు చెట్టు నెస్టింగ్ లేదు, స్పష్టమైన డేటా ప్రవాహం:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => { /* attach listener, cleanup */ }, []);
return pos;
}
function Component() {
const { x, y } = useMouse(); // clear, flat, composable
}
children/components ను పాస్ చేయడం).