Hogyan működnek a props és a state a React Native-ben?

Question

Accepted Answer

**Props** és **state** az alapvető React koncepciók, amelyek a React Native-ben azonos módon működnek: a **props** adatokat közvetít egy komponensbe (csak olvasható bemenet), míg a **state** olyan adatokat tárol, amelyek idővel változhatnak (kiváltva az újrarendereléseket). Ezek megértése alapvető fontosságú. ## Props — átadott adatok (csak olvasható) ```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 — változó adatok (useState-n keresztül) ```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 ``` A state belső, megváltoztatható adat; annak frissítése (a `useState`-ből kapott setterrel) újrarenderelést vált ki — így az UI tükrözi a változásokat. ## 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.) ``` ## Miért fontos A props és a state megértése alapvető a React Native-ben, mert ezek **alapvető React koncepciók, amelyek központiak a komponensek működésében és a UI-frissítésekben**, így nélkülözhetetlen tudás. A **props** (csak olvasható adatok, amelyeket egy szülőkomponentből egy komponensbe adnak át, a komponensfán lefelé áramolva) jelenti azt, hogy a komponensek hogyan kapnak konfigurációt és adatokat kívülről, lehetővé téve az újrahasználható, kombinálható komponenseket. A **state** (belső, megváltoztatható adat, amelyet a `useState` horoggal kezelnek, annak frissítése újrarenderelést vált ki) az, hogy a komponensek hogyan tartanak és reagálnak az idővel változó adatokra (felhasználói bevitel, kapcsolók, letöltött adatok) — a mechanizmus, amellyel az UI tükrözi a változásokat. Az **megkülönböztetés** megértése — a props átadva és csak olvasható (külső adatok/konfigurációhoz) versus a state belső és megváltoztatható (az idővel változó adatokhoz, újrarendereléseket vezérelve) — és az az elv, hogy az **adatok lefelé áramolnak a propsok segítségével, míg a state változásai vezetik az UI-frissítéseket** alapvető a React Native (és React) alkalmazások helyes felépítéséhez. Ezek pontosan ugyanazok a koncepciók, mint a React webes verziójában, így azok megértése közvetlenül átvisz és alapvető bárki számára, aki React Native komponenseket épít. A props és a state helyes kezelése (adatok átadása props-on keresztül, a megváltozó adatok kezelése a state-tel, az egyirányú adatáram megértése) alapvető a funkcionális, helyes komponensekhez. Mivel a props és a state központi szerepet játszanak a React Native (és React) komponensek működésében — az adatok fogadása (props) és a változás kezelése (state) a UI-frissítések vezetésére — és ezek megértése alapvető bármely React Native alkalmazás helyes felépítéséhez, a props és state megértése nélkülözhetetlen, alapvető React Native tudás — alapvető koncepciók, amelyeket minden React Native fejlesztőnek meg kell értenie, azonosak a webes React-tel (így az tudás átmásolható), és alapvetőek az olyan komponensek építéséhez, amelyek adatokat fogadnak és a változásokra reagálnak, a React Native UI-fejlesztés alapmechanizmusa.