ორივე იმ თარიღს ინახავს, რომელიც გავლენას ახდენს იმაზე, რა რენდერდება კომპონენტმა, მაგრამ განსხვავდება ვინ არის ესა მონაცემის მფლობელი და შეიძლება თუ არა მისი შეცვლა.
// `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} />
მონაცემები ედინება ქვემოთ (მშობელი → შვილი props-ის მეშვეობით) და ცვლილებები ედინება ზემოთ (შვილი ითხოვს მშობელს რაღაც შეცვალოს callback prop-ის მეშვეობით, როგორც onChange). ეს ერთმხრივი ნაკადი ის, რაც React ადგილობებს მოსალოდნელ ხდის.
props.x = 1) ხარვეზია — React ხელახალი რენდერირება არ მოხდება და თქვენ დაამსხვრეთ მშობელის მფლობელობა. "prop-ის შეცვლისთვის", დაურეკეთ callback-ს, რომელიც მშობელმა გაწერა, ისე რომ მშობელი შეცვლის მის წინა state-ს და ახალი მნიშვნელობა ქვემოთ გადააბრძოლოს.