Cum funcționează props și state în React Native?

Question

Accepted Answer

**Props** și **state** sunt concepte fundamentale React care funcționează identic în React Native: **props** transmit date în componență (intrări read-only), în timp ce **state** deține date care se pot modifica în timp (declanșând re-randări). Înțelegerea lor este fundamentală. ## Props — date transmise (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 — date care se modifică (via 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 este date interne, modificabile; actualizarea acestuia (via setter-ul din `useState`) declanșează o re-randare — modul în care UI-ul reflectă schimbările. ## 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.) ``` ## De ce conteaza Înțelegerea props și state este fundamentală pentru React Native deoarece sunt **concepte React centrale pentru modul în care componentele funcționează și cum se actualizează UI-urile**, deci sunt cunoștințe obligatorii. **Props** (date read-only transmise într-o componentă din componenta sa părinte, curgând în jos prin arborele componentelor) sunt modul în care componentele primesc configurație și date din exterior, permițând componente reutilizabile și compozabile. **State** (date interne, modificabile gestionate via hook-ul `useState`, unde actualizarea acestuia declanșează o re-randare) este modul în care componentele dețin și răspund la date care se modifică în timp (intrări utilizatorului, comutatoare, date preluate) — mecanismul prin care UI-urile reflectă schimbările. Înțelegerea **distincției** — props transmise și read-only (pentru date/configurație externe) versus state fiind intern și modificabil (pentru date care se schimbă, declanșând re-randări) — și principiul că **datele curg în jos via props în timp ce schimbările de state conduc actualizări UI** este fundamental pentru construirea corectă a aplicațiilor React Native (și React). Acestea sunt exact aceleași concepte ca React pentru web, deci înțelegerea lor se transferă direct și este esențială pentru oricine construiește componente React Native. A obține props și state corect (transmiterea datelor via props, gestionarea datelor care se modifică cu state, înțelegerea fluxului unidirecțional de date) este esențial pentru componente funcționale și corecte. Deoarece props și state sunt centrale pentru modul în care funcționează componentele React Native (și React) — primirea datelor (props) și gestionarea schimbării (state) pentru a conduce actualizări UI — și înțelegerea lor este fundamentală pentru construirea corectă a oricărei aplicații React Native, înțelegerea props și state este cunoștință esențială și fundamentală React Native — concepte fundamentale pe care trebuie să le înțeleagă fiecare dezvoltator React Native, identice cu React web (deci cunoștințele se transferă), și fundamentale pentru construirea de componente care primesc date și răspund la schimbări, mecanica de bază a dezvoltării UI React Native.