Koks yra skirtumas tarp state ir props?

Question

Accepted Answer

**Props** yra įvestis, **perduota** į komponentą iš jo tėvinio komponento (tik skaitomoji iš vaiko perspektyvos). **State** yra duomenys, kuriuos komponentas **renka ir valdo viduje** (jis gali juos keisti). Skirtumas: props gaunami iš išorės ir nesikeičia komponente; state yra vidinis ir kintamasis. ## Props — perduoti, tik skaitomieji ```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 ``` Props teka **žemyn** iš tėvinio komponento į vaiko. Vaikas juos skaito, tačiau negali jų keisti — norėdamas pakeisti prop reikšmę, tėvinis komponentas turi perduoti naują. ## State — valdomas viduje, kintamasis ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` State yra sukurtas ir kontroliuojamas *komponento viduje*; komponentas jį keičia (per `setCount`/`setState`), o jo keitimas suaktyvina pakartotinį atvaizdavimą. ## Šalia vienas kito ```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 ``` ## Jie dirba kartu ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` Vieno komponento **state** dažnai perduodamas vaikui kaip **prop**. Keliant state ir atsiunčiant jį žemyn — tai tiesiog šis modelis: tėvinis komponentas valdo state, vaikai jį gauna kaip props. ## Kodėl tai svarbu Skirtumas tarp state ir props yra pagrindinė komponentin pagrįstų sistemų sąvoka. Jis apibrėžia duomenų nuosavybę ir srautą: props yra išorinis, tik skaitomasis konfigūracija (duomenys žemyn); state yra vidinis, kintamasis duomenys, kuriuos komponentas valdo. Jų sumaišymas — props keitimas arba props dubliavimas į state — sukelia klasikinės klaidos. Supratimas, kad duomenys teka žemyn kaip props, o kiekvienas komponentas turi savo state, yra React/Vue/Angular komponentin pagrįsto dizaino pagrindas.