في هذا الدرس 6تصفّح المواضيع
تكتسب المكونات القابلة لإعادة الاستخدام قوتها الحقيقية عندما تستطيع الدالة الواحدة عرض عناوين وأسعار وشارات مختلفة بحسب موضع استدعائها. في مكتبة React، يمرر المكون الأب البيانات إلى المكون الابن عبر الخصائص (props)، وهي تعمل تماماً كالمعاملات الممررة إلى أي دالة JavaScript قياسية.
عند كتابة <CourseCard title="React Foundations" lessons={12} />، تجمع React كافة السمات الممررة في كائن واحد متماسك وتسلمه كمعامل أول إلى دالة CourseCard().
function CourseCard(props) {
return (
<article className="rx-card">
<h3>{props.title}</h3>
<p>Lessons: {props.lessons}</p>
</article>
);
}لا تقتصر الخصائص في React على النصوص الثابتة؛ إذ يتيح لك استخدام الأقواس المعقوفة {} تمرير أي نوع بيانات قياسي في JavaScript بدقة تامة:
- السلاسل النصية: تُكتب مباشرة بين علامتي تنصيص مثل
role="Architect". - الأرقام والقيم المنطقية: تُمرر داخل أقواس مثل
seats={25}وisVerified={true}لكيلا تتحول إلى نصوص. - المصفوفات والكائنات: تُمرر كتعابير برمجية مثل
tags={['UI', 'JSX']}أو كائن داخل قوسين مزدوجينmeta={{ hours: 8 }}.
function WorkstationSpec(props) {
return (
<div className="rx-card">
<h3>{props.device.name}</h3>
<p>Memory: {props.ramGb} GB</p>
<p>Ready: {props.inStock ? 'Yes' : 'No'}</p>
</div>
);
}يؤدي تكرار كتابة البادئة props. قبل كل متغير داخل المكون إلى إطالة الكود دون فائدة. لذلك تعتمد مكونات React الحديثة أسلوب تفكيك الكائنات (Object Destructuring) مباشرة داخل قوسي تعريف الدالة مثل function StudioBadge({ title, subtitle, iconSrc })، مما يوضح مدخلات المكون فور النظر إلى سطره الأول.
function StudioBadge({ title, track, iconSrc }) {
return (
<div className="rx-card">
<img src={iconSrc} alt={title} width="36" />
<h3>{title}</h3>
<p>{track}</p>
</div>
);
}يمكنك إسناد قيم احتياطية آمنة أثناء التفكيك باستخدام علامة المساواة مثل function PricingBadge({ plan = 'Community', price = 0 }). وتعمل هذه القيم الافتراضية تلقائياً عند عدم تمرير الخاصية من الأب أو عند تمرير القيمة undefined.
انتبه إلى أن تمرير null أو الرقم 0 لا يفعّل القيمة الافتراضية، لأن لغة JavaScript تعاملهما كقيم محددة مقصودة وليست غائبة.
function PricingTag({ plan = 'Starter', price = 0 }) {
return (
<div className="rx-card">
<h3>{plan}</h3>
<p>Monthly Cost: ${price}</p>
</div>
);
}تُرسخ مكتبة React قاعدة معمارية صارمة تنص على أن الخصائص المستلمة للقراءة فقط (Read-Only). لا يجوز للمكون الابن مطلقاً تعديل كائن props أو تغيير محتويات الكائنات الممررة إليه مثل كتابة props.price = 0؛ لأن المكون الأب هو المالك الوحيد لتلك البيانات.
إذا احتجت إلى حساب قيمة مشتقة للعرض كالسعر بعد الخصم، احسبها في ثابت محلي جديد داخل الدالة مثل const finalPrice = price * 0.85; دون المساس بالمدخل الأصلي.
عند بناء مكونات واجهة تأسيسية كالأزرار والشارات القابلة للتخصيص، يمكنك فصل الخصائص الخاصة بالمكون وتمرير بقية سمات HTML القياسية دفعة واحدة عبر معامل البقية والانتشار مثل function Badge({ tone = 'info', ...rest }) ثم تطبيقها بـ <span {...rest} />.
استخدم تمرير الانتشار بحكمة في المكونات القاعدية المغلفة لعناصر المتصفح، وتجنب الإفراط فيه بين شاشات التطبيق الكبرى ليبقى تدفق البيانات صريحاً وواضحاً. يلخص الجدول التالي أنماط التعامل مع الخصائص:
| نمط الخصائص | مثال الصياغة البرمجية | الاستخدام الهندسي الأنسب |
|---|---|---|
| التمرير الصريح للخصائص | <Card title="React" price={29} /> | مكونات الأعمال الواضحة ذات المدخلات المحددة والمقروءة |
| التفكيك مع قيم افتراضية | function Card({ price = 0 }) | تأمين قيم بديلة تلقائية عند غياب الخصائص الاختيارية |
| حساب قيم محلية مشتقة | const total = price + tax; | تنسيق أو حساب المخرجات بنقاء تام دون تعديل المدخلات |
| التمرير بمعامل الانتشار | function Btn({ kind, ...rest }) | تمرير سمات الوصول وHTML القياسية للمكونات التأسيسية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس كيف تنتقل البيانات المتنوعة من الأب إلى الابن عبر Props، وكيفية تفكيكها مع القيم الافتراضية، وسبب حظر تعديلها مطلقاً، ومتى نستخدم معامل الانتشار لتمرير السمات بأمان. الخطوة التالية: انتقل الآن إلى الدرس رقم 11 «تركيب المكونات وخاصية المحتوى المتداخل children» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Props الخصائص البرمجية
- مدخلات تهيئة للقراءة فقط يمررها المكون الأب إلى المكون الابن مجمعة داخل كائن واحد.
- للمراجعة
- 02 Parameter Destructuring تفكيك معاملات الدالة
- استخراج الخصائص المطلوبة بالاسم مباشرة داخل قوسي تعريف دالة المكون لكتابة كود أنظف وأكثر وضوحاً.
- للمراجعة
- 03 Default Prop Value القيمة الافتراضية للخاصية
- قيمة احتياطية تُسند تلقائياً للمعامل عند عدم تمرير الخاصية من الأب أو تمرير القيمة undefined.
- للمراجعة
- 04 Immutability عدم القابلية للتعديل
- المبدأ الهندسي القاضي بعدم تغيير قيم المدخلات أو الكائنات المستلمة مباشرة داخل المكون الفرعي.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 UI UI
- User Interface
- طبقة العرض البصرية التي تُرسم ديناميكياً بناءً على خصائص المكونات وبنيتها.
- للمراجعة
- 02 JSX JSX
- JavaScript XML
- الصياغة التصريحية التي تُمكّننا من تمرير خصائص المكونات بأسلوب يشبه سمات HTML.
- للمراجعة
- 03 ES6 ES6
- ECMAScript 2015
- معيار JavaScript الحديث الذي قدّم ميزات تفكيك الكائنات والمعاملات الافتراضية ومعامل الانتشار.
- للمراجعة
- 04 ARIA ARIA
- Accessible Rich Internet Applications
- سمات إتاحة الوصول القياسية التي غالباً ما تُمرر إلى العناصر التأسيسية عبر معامل البقية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال StudioBadge في محرر التجريب وفكك خاصية جديدة باسم duration مع قيمة افتراضية "4 Hours" واعرضها داخل البطاقة.
-
أضف نسخة ثالثة من مكون PricingTag بتمرير plan="Enterprise" مع ترك خاصية support للتحقق من عمل القيمة الافتراضية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
كيف تسلّم React السمات الممررة على وسم المكون إلى دالة المكون الابن؟
تجمع React كافة السمات الممررة في كائن واحد يُمرر كمعامل أول لدالة المكون.
أي صياغة JSX تمرر القيمة الرقمية 42 كرقم فعلي وليس كنص إلى الخاصية lessons؟
تُقيّم الأقواس المعقوفة القيمة كرقم برمجي فعلي في JavaScript بدلاً من معاملتها كنص.
ماذا يمثل القوسان المعقوفان المزدوجان في الصياغة spec={{ ram: 32 }} داخل JSX؟
القوس الخارجي يفتح تعبير JavaScript في JSX بينما ينشئ القوس الداخلي كائناً برمجياً قياسياً.
أي توقيع دالة يفكك الخاصيتين title وprice بنظافة مباشرة من كائن الخصائص؟
يوضع قوسا تفكيك الكائن مباشرة داخل قوسي معاملات الدالة لقراءة الخصائص بالاسم.
في الدالة function Badge({ count = 10 })، متى تأخذ الخاصية count القيمة الافتراضية 10؟
تُطبق القيمة الافتراضية في JavaScript فقط عند غياب الخاصية أو تمرير القيمة undefined إليها.
يُسمح للمكون الابن بتعديل قيمة props.price = 0 مباشرة متى أراد عرض خصم مجاني.
خطأ؛ فالخصائص للقراءة فقط ويُحظر تعديلها، ويجب حساب القيمة المعدلة في متغير محلي جديد.
إنشاء متغير محلي جديد مثل const discounted = price * 0.9 يحترم قاعدة عدم تعديل الخصائص.
صواب؛ لأن قراءة القيمة لإنتاج ثابت محلي جديد لا تمس المدخل الأصلي إطلاقاً.
ما وظيفة المعامل ...rest في التوقيع function IconButton({ label, ...rest })؟
يجمع معامل البقية كافة الخصائص المتبقية غير المفككة في كائن جديد نظيف يحمل الاسم rest.
الإفراط العشوائي في نثر {...props} عبر كافة مكونات الصفحات الكبرى يقلل وضوح البيانات التي يحتاجها كل مكون.
صواب؛ لذا يُفضل حصر تمرير الانتشار في المكونات التأسيسية المغلفة لعناصر الواجهة.
ما الاتجاه الطبيعي لانتقال الخصائص Props داخل شجرة مكونات React؟
تتدفق الخصائص باتجاه واحد من الأعلى إلى الأسفل أي من المكون الأب إلى الأبناء.