شرح صفوف ومحتوى الفقرة
رغم أن المكون الأب يستدعي المكونات الأبناء داخل جملة return بشكل طبيعي، إياك أن تُعرّف دالة مكون داخل جسم دالة مكون آخر! فكتابة function ChildBadge() {} بداخل function ParentPanel() {} تنشئ دالة بعنوان ذاكرة جديد تماماً في كل مرة يُعاد فيها رسم الأب، مما يجبر React على هدم عناصر الابن في المتصفح وإعادة بنائها من الصفر وفقدان تركيز المؤشر.
القاعدة الذهبية الصارمة هي تعريف جميع دوال المكونات في المستوى الأعلى للملف.
HTML
function StatusPill() {
return <span className="rx-badge">Top-Level</span>;
}
function ServerPanel() {
return (
<section className="rx-card">
<StatusPill />
<p>Stable identity on every render.</p>
</section>
);
}