React Native-இல் props மற்றும் state எப்படி வேலை செய்கிறது?

Question

Accepted Answer

**Props** மற்றும் **state** ஆகியவை React-ന் கூட்டுக் கருத்துக்கள் ஆகும், அவை React Native-இல் ஒரே மாதிரியாக வேலை செய்கின்றன: **props** ஒரு component-க்குள் தரவை அனுப்பும் (read-only inputs), அதேசமயம் **state** காலம் முழுக்க மாற்றிக்கொள்ளக்கூடிய தரவை வைத்திருக்கிறது (re-renders தூண்டுகிறது). இவற்றை புரிந்துகொள்வது அடிப்படை. ## Props — தரவு அனுப்பப்படும் (read-only) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — மாற்றிக்கொள்ளக்கூடிய தரவு (useState மூலம்) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State உள்ளக, மாற்றக்கூடிய தரவு; இதை புதுப்பிப்பது (`useState`-லிருந்து setter வழியாக) re-render செய்யச் செய்கிறது — UI மாற்றங்களை பிரதிபலிக்கும் வழி. ## Props vs state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## இது ஏன் முக்கியம் Props மற்றும் state-ஐ புரிந்துகொள்வது React Native-க்கு அடிப்படை ஆகும், ஏனெனில் அவை **components எப்படி வேலை செய்கின்றன மற்றும் UIs எப்படி புதுப்பிக்கப்படுகின்றன என்பதற்கு மையமான React-ன் கூட்டுக் கருத்துக்கள்**, எனவே இது அவசியமான அறிவு. **Props** (read-only data அதன் parent-ல் இருந்து ஒரு component-க்குள் அனுப்பப்படும், component tree-க்கு கீழ்நோக்கி பாயும்) என்பது components வெளியிலிருந்து configuration மற்றும் தரவை பெறும் வழி, மறுபயன்பாட்டுக்கூடிய, composable components-ஐ செயல்படுத்தும். **State** (உள்ளக, மாற்றக்கூடிய தரவு `useState` hook மூலம் நிர்வகிக்கப்படும், இதை புதுப்பிப்பது re-render-ஐ தூண்டும்) என்பது components எப்படி தரவு வைத்திருக்கிறது மற்றும் காலம் முழுக்க மாறும் தரவুக்கு பதிலளிக்கிறது (user input, toggles, fetched data) — UIs மாற்றங்களை பிரதிபலிக்கும் mechanism. **Props-ம் state-ம் பற்றிய வேறுபாடு** — props-ஐ அனுப்பப்படும் மற்றும் read-only (வெளிப்புற தரவு/configuration-க்கு) versus state உள்ளக மற்றும் மாற்றக்கூடிய (மாற்றும் தரவுக்கு, re-renders-ஐ driving செய்கிறது) — மற்றும் **data props மூலம் கீழ்நோக்கி பாயும் அதே சமயம் state changes UI updates-ஐ driving செய்கிறது** என்ற கோட்பாடு React Native (மற்றும் React) apps-ஐ சரியாக build செய்வதற்கு அடிப்படை. இவை React web-ல் உள்ள அதே கருத்துக்கள் ஆகும், எனவே அவற்றை புரிந்துகொள்வது நேரடியாக மாற்றம் செய்யப்படும் மற்றும் React Native components-ஐ build செய்யும் யாருக்கும் அவசியம். Props மற்றும் state-ஐ சரியாகக் கொள்வது (props மூலம் தரவு அனுப்புவது, state-ஐ மாற்றும் தரவு நிர்வகித்தல், unidirectional data flow-ஐ புரிந்துகொள்வது) செயல்பாட்டுக்கூடிய, சரியான components-க்கு மூல ஆகும். Props மற்றும் state React Native (மற்றும் React) components எப்படி வேலை செய்கின்றன — தரவு பெறுவது (props) மற்றும் மாற்றத்தை நிர்வகித்தல் (state) UI updates-ஐ driving செய்ய — மற்றும் அவற்றை புரிந்துகொள்வது যாதும் React Native app-ஐ சரியாக build செய்வதற்கு அடிப்படை, props மற்றும் state-ஐ புரிந்துகொள்வது அவசியமான, அடிப்படை React Native அறிவு — ஒவ்வொரு React Native developer-ம் புரிந்துகொள்ள வேண்டிய கூட்டுக் கருத்துக்கள், web React-ம் ஒரே மாதிரியான (எனவே அறிவு மாற்றம் செய்யப்படும்), மற்றும் தரவு பெறும் மற்றும் மாற்றத்துக்கு பதிலளிக்கும் components-ஐ build செய்வதற்கு அடிப்படை, React Native UI development-ன் அடிப்படை mechanics.