Zote zinabaki data inayoathiri kile ambacho sehemu inatoa, lakini zinatofautiana katika nani anamiliki data na ikiwa inaweza kubadilika.
- props zinapeleweka ndani ya sehemu kutoka kwa zazi lake. Ni haziandikiki — sehemu lazima haibadilishe kamwe.
Zote zinabaki data inayoathiri kile ambacho sehemu inatoa, lakini zinatofautiana katika nani anamiliki data na ikiwa inaweza kubadilika.
// `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 (
<button onClick={() => setCount(count + step)}>
{count}
</button>
);
}
// Parent decides the step and passes it down:
<Counter step={5} />
Data inapumzika chini (zazi → mtoto kupitia props) na mabadiliko yanapumzika juu (mtoto anaomba zazi kubadilisha kitu kupitia callback prop kama onChange). Mtiririko huu wa njia moja ndio unayofanya React apps kuwa na nadhani.
props.x = 1) ni hitilafu — React haitajasiri upya na umebomoa umilikiwaji wa zazi. Ili "kubadilisha prop", ita callback ambayo zazi ilikupatia ili zazi sasishe hali yake na kupitisha thamani mpya chini.