Kif jaħdmu props u state f'React Native?

Question

Accepted Answer

**Props** u **state** huma kunċetti React ewlenin li jaħdmu identikament f'React Native: **props** jippassaw data ġewwa component (inputs read-only), filwaqt li **state** iżomm data li tista' tinbidel hekk kif jgħaddi l-ħin (u jattira re-renders). Il-fehim tagħhom hu fundamentali. ## Props — data li jingħadda ġewwa (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 — data li tinbidel (permezz ta' 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 hija data interna u li tista' tinbidel; l-aġġornament tagħha (permezz tas-setter minn `useState`) jattira re-render — hekk l-UI tirrifletti l-bidliet. ## Props versus 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.) ``` ## Għaliex hu importanti Il-fehim ta' props u state hu fundamentali f'React Native għaliex huma **kunċetti React ewlenin ċentrali għall-funzjonament tal-components u kif l-UIs jiġu aġġornati**, u għalhekk huma għarfien li għandu jkun hemm. **Props** (data read-only li jingħaddaw ġewwa component minn il-parent tiegħu, jgħaddaw 'l isfel l-alberu tal-components) huma kif il-components jirċievu konfigurazzjoni u data minn barra, li jippermetti components li jitxierru, li jitqiegħdu flimkien. **State** (data interna u li tista' tinbidel immaniġġata permezz tal-hook `useState`, fejn l-aġġornament tagħha jattira re-render) hija kif il-components iżommu u jirrispondu għal data li tinbidel hekk kil-ħin (input tal-utent, toggles, data fetched) — il-mekkaniżmu permezz tal-liema l-UIs jirriflettaw il-bidliet. Il-fehim tad-**distinzjoni** — props li jiġu mpassi u read-only (għal data/konfigurazzjoni esterna) versus state li hija interna u li tista' tinbidel (għal data li tinbidel, li tgħoddi r-re-renders) — u l-prinċipju li **data jgħaddi 'l isfel permezz ta' props filwaqt li l-bidliet tal-state jgħoddaw l-aġġornamenti tal-UI** hu fundamentali għall-bini ta' apps React Native (u React) b'mod korrett. Il-kunċetti huma eżattament l-istess bħal React għall-web, u għalhekk il-fehim tagħhom jittrasferi direttament u hu essenzjali għal kulħadd li qed jibni components React Native. Igħorr props u state b'mod xieraq (billi tgħaddi data permezz ta' props, immaniġġa data li tinbidel b'state, u tifhem il-unidirectional data flow) hu essenzjali għal components funzjonali u korretti. Minkejja li props u state huma ċentrali għall-funzjonament ta' components React Native (u React) — li jirċievu data (props) u jimmaniġġaw il-bidla (state) biex jgħoddaw l-aġġornamenti tal-UI — u l-fehim tagħhom hu fundamentali għall-bini ta' app React Native korrett, il-fehim ta' props u state hu għarfien React Native essenzjali u fundamentali — kunċetti ewlenin li kull developer React Native għandu jifhem, identiku għal React għall-web (u għalhekk il-għarfien jiġi trasferit), u fundamentali għall-bini ta' components li jirċievu data u jirrispondu għal bidla, il-mekkaniżmi bażiċi tal-iżvilupp tal-UI ta' React Native.