state மற்றும் props இடையே உள்ள வேறுபாடு என்ன?

Question

Accepted Answer

**Props** என்பது அதன் பெற்றோரிடமிருந்து ஒரு கூறுக்குள் **அனுப்பப்படும்** உள்ளீடுகள் (குழந்தையின் பார்வையிலிருந்து படிக்க மட்டுமே). **State** என்பது ஒரு கூறு **வைத்துக்கொண்டும் உள்நாட்டில் நிர்வகிக்கும்** தரவு (அதை மாற்ற முடியும்). வேறுபாடு: props வெளியிலிருந்து வருகிறது மற்றும் கூறுக்குள் மாறாது; state உள்ளாக இருக்கிறது மற்றும் மாறக்கூடியது. ## Props — அனுப்பப்பட்ட, படிக்க மட்டுமே ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` Props **கீழே** பெற்றோரிடமிருந்து குழந்தைக்கு பாய்கிறது. குழந்தை அவற்றைப் படிக்கிறது ஆனால் அவற்றை மாற்ற முடியாது — prop இன் மதிப்பை மாற்ற, பெற்றோர் புதியதை அனுப்ப வேண்டும். ## State — உள்நாட்டில் வைத்துக்கொண்ட, மாறக்கூடிய ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` State கூறுக்குள் *உள்ளே* உருவாக்கப்பட்டு கட்டுப்படுத்தப்படுகிறது; கூறு அதை மாற்றுகிறது (`setCount`/`setState` மூலமாக), மற்றும் அதை மாற்றுவது மறுமுறை வரையுதல்தை தூண்டுகிறது. ## பக்க வாக்கில் பக்க ```text 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 ``` ## அவை ஒன்றாக வேலை செய்கின்றன ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` ஒரு கூறின் **state** பெரும்பாலும் குழந்தைக்கு **prop** ஆக அனுப்பப்படுகிறது. State ஐ மேலே தூக்கி கீழே அனுப்புவது சரியாக இந்த முறை — பெற்றோர் state ஐ வைத்துக்கொள்கிறார், குழந்தைகள் அதை props ஆக பெறுகிறார்கள். ## ஏன் இது முக்கியமானது State மற்றும் props இடையே உள்ள வேறுபாடு கூறு அடிப்படையிலான கাঠামோட்டுக்கு அடிப்படையாகும். இது தரவு உரிமை மற்றும் ஓட்டத்தை வரையறுக்கிறது: props வெளிப்புற, படிக்க மட்டுமே உள்ளமைவு (கீழே தரவு); state உள்ளாக, மாறக்கூடிய தரவு கூறு நிர்வகிக்கிறது. அவற்றை குழப்புவது — props ஐ மாற்றுவது, அல்லது props ஐ state க்குள் நகலெடுப்பது — கிளாசிக் பிழைகளை ஏற்படுத்துகிறது. Props ஆக கீழே தரவு பாய்கிறது என்ற புரிதல் அதே சமயம் ஒவ்வொரு கூறும் தன் சொந்த state ஐ வைத்துக்கொள்கிறது என்பது React/Vue/Angular கூறு வடிவமைப்பின் அடிப்படையாகும்.