كلاهما يحتفظ ببيانات تؤثر على ما يقدمه المكون، لكنهما يختلفان في من يملك البيانات وما إذا كان يمكن تغييرها.
// `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 مثل onChange). هذا التدفق أحادي الاتجاه هو ما يجعل تطبيقات React قابلة للتنبؤ.
props.x = 1) هو خطأ — React لن تعيد التصيير وكسرت ملكية الأب. لـ "تغيير prop"، استدعِ دالة callback أعطاك إياها الأب حتى يحدث الأب حالته الخاصة ويمرر قيمة جديدة لأسفل.