Kako funkcioniraju props i state u React Nativeu?

Question

Accepted Answer

**Props** i **state** su osnovni React koncepti koji funkcioniraju identično u React Nativeu: **props** proslijeđuju podatke u komponentu (samo za čitanje), dok **state** sadrži podatke koji se mogu mijenjati tijekom vremena (što pokušava ponovno renderiranje). Razumijevanje njih je temeljno. ## Props — proslijeđeni podaci (samo za čitanje) ```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 — podaci koji se mijenjaju (preko 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 je interni, promjenjivi podatak; ažuriranje ga (preko settera iz `useState`) pokreće ponovno renderiranje — kako UI odražava promjene. ## 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.) ``` ## Zašto je važno Razumijevanje props-a i state-a je temeljno za React Native jer su to **osnovni React koncepti koji su ključni za kako komponente funkcioniraju i kako se UIs ažuriraju**, pa je to nužno znanje. **Props** (podaci samo za čitanje proslijeđeni u komponentu od njene roditeljske komponente, koji teku nizom stabla komponenti) su kako komponente primaju konfiguraciju i podatke iz vanjskog izvora, omogućujući ponovno iskoristive, kombinabilne komponente. **State** (interni, promjenjivi podaci upravljani preko `useState` hook-a, gdje ažuriranje pokušava ponovno renderiranje) je kako komponente čuvaju i odgovaraju na podatke koji se mijenjaju tijekom vremena (korisnički unos, prebacivači, dohvaćeni podaci) — mehanizam kojim UIs odražavaju promjene. Razumijevanje **razlike** — props-a proslijeđenih i samo za čitanje (za eksterne podatke/konfiguraciju) nasuprot state-u koji je interni i promjenjiv (za podatke koji se mijenjaju, pokušavajući ponovno renderiranje) — i principa da **podaci teku prema dolje preko props-a dok promjene state-a pokušavaju UI ažuriranja** je temeljno za pravilnu izgradnju React Native (i React) aplikacija. To su točno isti koncepti kao React za web, pa razumijevanje njih direktno se prebacuje i neophodno je za svakog tko gradi React Native komponente. Pravilno upravljanje props-ima i state-om (proslijeđivanje podataka preko props-a, upravljanje mijenjajućim podacima sa state-om, razumijevanje jednosmjernoga toka podataka) je ključno za funkcionalne, ispravne komponente. Budući da su props i state ključni za kako React Native (i React) komponente funkcioniraju — primanje podataka (props) i upravljanje promjenom (state) kako bi se pokušalo UI ažuriranje — i razumijevanje njih je temeljno za pravilnu izgradnju bilo koje React Native aplikacije, razumijevanje props-a i state-a je neophodno, temeljna React Native znanja — osnovni koncepti koje svaki React Native razvojni inženjer mora razumjeti, identični web React-u (pa znanje prelazi), i temeljni za izgradnju komponenti koje primaju podatke i odgovaraju na promjene, osnovni mehanika React Native UI razvoja.