Props هي مدخلات يتم تمريرها إلى المكون من قبل والده (قراءة فقط من وجهة نظر المكون الفرعي). State هي بيانات يمتلكها المكون ويديرها داخليًا (يمكنه تغييرها). التمييز: props تأتي من الخارج ولا تتغير داخل المكون؛ state داخلية وقابلة للتغيير.
() {
;
}
< name= />
Props تتدفق لأسفل من الوالد إلى الطفل. يقرأها الطفل لكن لا يمكنه تغييرها — لتغيير قيمة prop، يجب على الوالد تمرير واحدة جديدة.
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
يتم إنشاء State والتحكم به داخل المكون؛ المكون يغيره (عبر setCount/setState)، وتغييره يؤدي إلى إعادة عرض.
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
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
غالبًا ما يتم تمرير state لمكون واحد إلى مكون فرعي كـ prop. رفع state وتمريره لأسفل هو بالضبط هذا النمط — الوالد يمتلك state، والأطفال يتلقونها كـ props.
التمييز بين state و props أساسي في أطر العمل القائمة على المكونات.
يحدد ملكية البيانات والتدفق: props هي تكوين خارجي قراءة فقط (بيانات لأسفل)؛ state هي بيانات داخلية قابلة للتغيير يدير المكون.
الخلط بينهما — تغيير props، أو نسخ props إلى state — يسبب أخطاء كلاسيكية.
فهم أن البيانات تتدفق لأسفل كـ props بينما يمتلك كل مكون state الخاص به هو أساس تصميم المكونات في React/Vue/Angular.