Koks yra skirtumas tarp props ir state?

Question

Accepted Answer

Abu laiko duomenis, kurie veikia tai, ką komponenta atvaizduoja, tačiau jie skiriasi tuo, **kas yra duomenų savininkas** ir **ar jie gali keistis**. - **props** perduodami *į* komponentą iš jo tėvinio komponento. Jie yra **tik skaitymui** — komponentas jų niekada negali keisti. - **state** yra valdomas ir tvarkytas *viduje* komponento. Jis gali keistis laikui bėgant ir jo keitimas sukelia **iš naujo atvaizduoti**. ## Pavyzdys ```jsx // `step` is a PROP — given by the parent, the child only reads it. // `count` is STATE — owned here, changes on click, causes a re-render. function Counter({ step }) { const [count, setCount] = useState(0); return ( ); } // Parent decides the step and passes it down: ``` Duomenys teka **žemyn** (tėvas → vaikas per props) ir pakeitimai teka **aukštyn** (vaikas paprašo tėvą ką nors keisti per callback prop, tokį kaip `onChange`). Šis vienpusis srautas yra tai, kas daro React programas nuspėjamomis. ## Kaip nuspręsti, kurį naudoti - Ateina iš viršaus ir komponentas neturėtų jo keisti → **prop**. - Komponentas turi jį keisti laikui bėgant → **state**. - Props mutavimas (`props.x = 1`) yra klaida — React nebus iš naujo atvaizduota ir jūs sulaužėte tėvo savybę. Norėdami "pakeisti prop", skambinkite callback, kurį jums davė tėvas, kad tėvas atnaujintų savo state ir perduotų naują reikšmę žemyn.