Mi a különbség az state és a props között?

Question

Accepted Answer

A **props** a szülőkomponens által az adott komponensbe **átadott bemenetek** (az adott komponens szempontjából csak olvasható). A **state** az adatok, amelyeket a komponens **magának tárol és belül kezel** (megváltoztathatja). A különbség: a props kívülről érkezik és nem változik a komponensen belül; a state belső és változtatható. ## Props — átadott, csak olvasható ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` A props a szülőből az gyermek komponensbe **lefelé** áramlik. Az gyermek olvassa őket, de nem tudja megváltoztatni — a prop értékének megváltoztatásához a szülőnek új értéket kell átadnia. ## State — belül tárolva, változtatható ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` A state a komponens *belsejében* létrehozva és vezérelve; a komponens megváltoztatja (`setCount`/`setState` segítségével), és megváltoztatása újra-renderelést indít el. ## Egymás mellett ```text Props State Source passed from parent created in the component Mutable? read-only (in child) yes (via setter) Who controls it the parent the component itself Triggers render when the parent changes it when the component updates it Purpose configure/pass data in track changing internal data ``` ## Együtt dolgoznak ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` Egy komponens **state**-je gyakran **prop**-ként kerül átadásra az gyermek komponensnek. A state felfelé húzása és lefelé átadása pontosan ez a minta — a szülő a state tulajdonosa, az gyermekek prop-ként kapják meg. ## Miért fontos A state és props közötti megkülönböztetés alapvető a komponens-alapú keretrendszerek számára. Meghatározza az adattulajdonságot és az adatáramot: a props külső, csak olvasható beállítások (adatok lefelé); a state belső, változtatható adat, amelyet a komponens kezel. Összecsalásuk — a props megváltoztatása, vagy a props megkettőzése a state-ben — klasszikus hibákat okoz. Annak megértése, hogy az adatok prop-ként áramlanak lefelé, miközben minden komponens a saját state-ét kezeli, a React/Vue/Angular komponens-tervezés alapja.