இரண்டும் ஒரு கூறு என்ன செய்கிறது என்பதை பாதிக்கும் தரவுகளை வைத்துள்ளன, ஆனால் அவை தரவு யாருக்குச் சொந்தம் மற்றும் அதை மாற்ற முடியுமா என்பதில் வேறுபடுகின்றன.
// `step` is a PROP — given by the parent, the child only reads it.
// `count` is STATE — owned here, changes on click, causes a re-render.
function Counter({ step }) {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + step)}>
{count}
</button>
);
}
// Parent decides the step and passes it down:
<Counter step={5} />
தரவு கீழ்நோக்கி பாய்கிறது (பெற்றோர் → குழந்தை props வாயிலாக) மற்றும் மாற்றங்கள் மேல்நோக்கி பாய்கிறது (குழந்தை பெற்றோருக்கு onChange போன்ற callback prop வாயிலாக ஏதாவது மாற்ற வேண்டும் என்று கேட்கிறது). இந்த ஒரு வழி ஓட்ட React ஆப்ஸ் கணிக்கக்கூடியதாக செய்வதாகும்.
props.x = 1) ஒரு பிழையாகும் — React மறுசெய்கை செய்யாது மற்றும் நீங்கள் பெற்றோரின் உரிமையை உடைத்துவிட்டீர்கள். "prop ஐ மாற்ற" பெற்றோர் உங்களுக்குக் கொடுத்த callback ஐ அழைக்கவும் இதனால் பெற்றோர் தனது சொந்த state ஐ புதுப்பித்து கீழ் நோக்கி ஒரு புதிய மதிப்பைத் தாங்கலாம்.