React Native માં props અને state કેવી રીતે કામ કરે છે?

Question

Accepted Answer

**Props** અને **state** એ મૂળ React ખ્યાલો છે જે React Native માં સમાન રીતે કામ કરે છે: **props** ડેટા એક ઘટકમાં પસાર કરે છે (માત્ર-વાંચન ઇનપુટ્સ), જયારે **state** એમનો ડેટા ધરાવે છે જે સમય સાથે બદલાઈ શકે છે (પુનઃ-રેન્ડર ટ્રિગર કરે છે). તેમને સમજવું મૌલિક છે. ## Props — ડેટા પસાર કર્યો (માત્ર-વાંચન) ```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 માંથી સેટર દ્વારા) પુનઃ-રેન્ડર ટ્રિગર કરે છે — UI કેવી રીતે ફેરફારો પ્રતિબિંબિત કરે છે તે. ## Props વર્સેસ 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 માટે મૌલિક છે કારણ કે તે **મૂળ React ખ્યાલો છે જે ઘટકોના કામ અને UI અપડેટમાં કેન્દ્રિય છે**, તેથી તે જરૂર જાણવું જોઈએ. **Props** (માતાપિતાના ઘટક દ્વારા એક ઘટકમાં પસાર કર્યો માત્ર-વાંચન ડેટા, ઘટક વૃક્ષ નીચે વહે છે) કેવી રીતે ઘટકો બાહ્યથી રૂપરેખા અને ડેટા મેળવે છે, પુનઃ-વપરાશયોગ્ય, સંયોજિત ઘટકો સક્ષમ કરે છે. **State** (આંતરિક, પરિવર્તનશીલ ડેટા `useState` હુક દ્વારા સંચાલિત, જ્યાં તેને અપડેટ કરવું પુનઃ-રેન્ડર ટ્રિગર કરે) ઘટકો ડેટા ધરાવે અને પ્રતિક્રિયા કરે છે જે સમય સાથે બદલાય છે (ব્યુજર ઇનપુટ, ટોગલ્સ, ફેચ કર્યો ડેટા) — UI ફેરફાર પ્રતિબિંબિત કરવા માટેની પદ્ધતિ. **તફાવત** ને સમજવું — props પસાર કર્યો અને માત્ર-વાંચન (બાહ્ય ડેટા/રૂપરેખા માટે) વર્સેસ state આંતરિક અને પરિવર્તનશીલ (ડેટા માટે જે બદલાય છે, ફરી-રેન્ડર્સ ચલાવે છે) — અને સિદ્ધાંત કે **ડેટા props દ્વારા નીચે વહે છે જયારે state ફેરફાર UI અપડેટ ચલાવે છે** React Native (અને React) એપ્લિકેશનો સાચી રીતે બાંધવા માટે મૌલિક છે. તે બરાબર સમાન ખ્યાલો છે React વેબ માટે, તેથી તેમને સમજવું સીધો સ્થાનાંતર કરે છે અને કોઈ પણ React Native ઘટકો બાંધતા માટે આવશ્યક છે. Props અને state આગળ સાચો (props દ્વારા ડેટા પસાર કરવો, state સાથે બદલાતો ડેટા સંચાલવો, એકમાત્ર રીતે ડેટા પ્રવાહ સમજવો) ક્રિયાશીલ, સાચો ઘટક માટે મૂળ છે. Caps props અને state React Native (અને React) ઘટકોના કામમાં કેન્દ્રિય છે — ડેટા પ્રાપ્ત કરવો (props) અને ફેરફાર સંચાલવો (state) UI અપડેટ ચલાવવા માટે — અને તેમને સમજવું કોઈ પણ React Native એપ્લિકેશન સાચી રીતે બાંધવા માટે મૌલિક છે, props અને state સમજવું આવશ્યક, પાયાની React Native જ્ઞાન છે — મૂળ ખ્યાલો દરેક React Native ડેવલપરને સમજવું જરૂર છે, વેબ React સાથે સમાન (તેથી જ્ઞાન સ્થાનાંતર કરે છે), અને ડેટા પ્રાપ્ત કરે અને બદલાવ પર પ્રતિક્રિયા કરે તે ઘટકો બાંધવા માટે મૌલિક છે, React Native UI વિકાસની મૂળ પદ્ધતિ.