في هذا الدرس 6تصفّح المواضيع
يُعد تمرير الخصائص الصريح من الأب إلى الابن من أبرز نقاط القوة في React لأنه يجعل مسار البيانات مكشوفاً وواضحاً. غير أن المشقة تظهر عندما تحتاج معلومة مشتركة — مثل العملة المختارة أو صلاحية الحساب أو كثافة العرض — للوصول إلى مكونات عميقة بينما تضطر قوالب التخطيط الوسيطة مثل الإطار العام والعمود الجانبي لاستلامها وتمريرها دون أي استخدام فعلي لها.
يُعرف تمرير نفس الخاصية عبر سلسلة طويلة من الوسطاء بمصطلح حفر الخصائص (Prop Drilling). لمعالجة هذا التضخم، توفر React آلية السياق (Context) لبث البيانات من المكون الأب إلى أي حفيد في الشجرة تحته مباشرة دون إزعاج المكونات الوسيطة.
يسير العمل بالسياق في React دائماً وفق ثلاث خطوات مترابطة:
- إنشاء السياق: استدعاء
createContext('USD')خارج دوال المكونات في نطاق الملف مع تمرير قيمة افتراضية احتياطية منطقية. - توفير القيمة للشجرة: تغليف الجزء المستهدف من الواجهة بالمزود
<CurrencyContext.Provider value={...}>لبث القيمة لأسفل. - قراءة القيمة: استدعاء خطاف
useContext(CurrencyContext)داخل أي مكون فرعي يحتاجها.
import { createContext, useContext } from 'react';
const CurrencyContext = createContext('USD');
function PriceTag() {
const code = useContext(CurrencyContext);
return <span>Currency: {code}</span>;
}يكتسب السياق حيويته الكاملة عند دمجه مع حالة تفاعلية عبر useState أو useReducer في المكون الأب. فكلما تغيرت القيمة المسندة إلى خاصية value={plan} في المزود، تعيد React تلقائياً رسم كل مكون فرعي يستدعي useContext(PlanContext) بأسفله، دون أن تمر أي خاصية عبر المكونات الوسيطة.
function Dashboard() {
const [plan, setPlan] = useState('Pro');
return (
<PlanContext.Provider value={plan}>
<Sidebar />
<button onClick={() => setPlan('Team')}>
Upgrade Plan
</button>
</PlanContext.Provider>
);
}يُخبر استدعاء useContext(RoleContext) مكتبة React بأن هذا المكون مشترك في تغييرات ذلك السياق. لاحظ أننا نمرر كائن السياق نفسه إلى الدالة لا اسماً نصياً ولا عنصر المزود. وكحال جميع الخطافات، يُستدعى useContext في المستوى الأعلى لدالة المكون خارج الشروط والحلقات، ويمكن لعشرات المكونات المتجاورة أو المتباعدة قراءة السياق ذاته في آنٍ واحد.
function AccessBadge() {
const role = useContext(RoleContext);
return (
<p className="badge">
Active Role: <strong>{role}</strong>
</p>
);
}تماماً كما تتجاوز قاعدة تنسيق CSS الداخلية القاعدة العامة للعناصر التي بداخلها فقط، يدعم السياق في React تداخل المزودات وتخصيص الفروع. فعند استدعاء useContext(LevelContext) تبحث React صعوداً في الشجرة وتجلب القيمة من أقرب مزود يعلو المكون مباشرة؛ مما يتيح تغليف قسم فرعي بمزود جديد يخصص قيمته دون التأثير في بقية أقسام الصفحة.
function SubSection({ children }) {
const level = useContext(LevelContext);
return (
<LevelContext.Provider value={level + 1}>
<section>{children}</section>
</LevelContext.Provider>
);
}لسهولة استخدام السياق قد يميل المبتدئ لتطبيقه في كل مكان، لكن التوثيق الهندسي الرسمي يوصي بخطوتين أبسط قبل إنشاء أي سياق جديد: أولاً، ابدأ بتمرير الخصائص العادية للمسافات القصيرة لأنها تجعل تدفق البيانات صريحاً وسهل الصيانة؛ ثانياً، وظف التركيب عبر خاصية children بتمرير المكون الجاهز مباشرة داخل الغلاف فلا يحتاج القالب الوسيط لمعرفة بياناته أصلاً. وادخر السياق للبيانات المشتركة على نطاق واسع عبر مستويات متباعدة كما يلخص الجدول التالي:
| زاوية المقارنة | الخصائص الصريحة والتركيب بـ children | سياق React عبر createContext وuseContext |
|---|---|---|
| وضوح مسار البيانات | صريح ومباشر في معاملات دالة المكون | اشتراك ضمني يُبحث عنه في أسلاف الشجرة |
| استقلالية إعادة الاستخدام | يعمل المكون منفرداً في أي شاشة بتمرير خصائصه | يعتمد على وجود مزود مناسب فوقه أو القيمة الاحتياطية |
| ارتباط الطبقات الوسيطة | ينعدم تماماً عند تمرير العناصر عبر children | ينعدم تمرير الخصائص العابرة في الوسطاء |
| الاستخدام الهندسي الأمثل | البيانات القريبة وقوالب التغليف والتخطيط | السمة اللونية واللغة والحساب النشط والأشجار العميقة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
شخصت في هذا الدرس مشكلة حفر الخصائص العميق، وأتقنت الخطوات الثلاث لإنشاء السياق وتوفيره وقراءته عبر createContext وProvider وuseContext، وجرّبت تخصيص القيم بتداخل المزودات الفرعية، وتعرفت على متى يكون تمرير الخصائص أو التركيب بـ children أنظف من السياق. الخطوة التالية: انتقل الآن إلى الدرس رقم 30 «بناء مزود الثيم واللغة ثنائي الاتجاه عبر Context» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Prop Drilling حفر الخصائص
- تمرير نفس الخصائص عبر عدة طبقات وسيطة لا تستخدمها لمجرد إيصالها إلى مكون حفيد في أسفل الشجرة.
- للمراجعة
- 02 React Context سياق React
- آلية تتيح للمكون الأب إتاحة البيانات مباشرة لأي مكون يقع تحته في الشجرة دون تمرير يدوي عبر الوسطاء.
- للمراجعة
- 03 Context Provider مزود السياق
- مكون التغليف التابع لكائن السياق والذي يبث القيمة المحددة في خاصية value لجميع المكونات الفرعية بداخله.
- للمراجعة
- 04 Context Consumer Hook خطاف استهلاك السياق
- خطاف useContext الذي يقرأ القيمة من أقرب مزود مطابق يعلو المكون ويعيد رسمه تلقائياً عند تغيرها.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 UI UI
- User Interface
- شجرة عناصر الواجهة التي تُبث عبرها التفضيلات المشتركة كاللغة والعملة والسمة اللونية بسلاسة.
- للمراجعة
- 02 JSX JSX
- JavaScript XML
- الصياغة التصريحية المستخدمة لتغليف فروع الواجهة بمزودات السياق أو تمرير الأبناء عبر خاصية children.
- للمراجعة
- 03 API API
- Application Programming Interface
- واجهة خصائص المكون التي تظل نظيفة ومختصرة بفضل الاستغناء عن تمرير البيانات العابرة غير المستخدمة.
- للمراجعة
- 04 SPA SPA
- Single-Page Application
- تطبيقات الصفحة الواحدة التي تعتمد على مزودات السياق الجذرية لمشاركة بيانات المستخدم واللغة عبر الشاشات.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال لوحة التحكم في محرر التجريب وأضف زراً رابعاً يضبط الخطة على Campus وتأكد من تحديث البطاقة العميقة دون لمس المكونات الوسيطة.
-
افتح مثال هيكل المستند في محرر التجريب وأضف طبقة SectionBox إضافية بالداخل ولاحظ كيف يقرأ كل عنوان من أقرب مزود فوقه مباشرة.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ماذا يصف مصطلح حفر الخصائص Prop Drilling في شجرة مكونات React؟
يحدث حفر الخصائص عندما تمرر عدة طبقات وسيطة خصائص لا تستخدمها لمجرد إيصالها لمكونات عميقة.
ما الدالة الرسمية في مكتبة React المخصصة لإنشاء كائن سياق جديد خارج المكونات؟
تنشئ الدالة createContext(defaultValue) كائن سياق جديداً يقبل قيمة افتراضية احتياطية.
متى تعتمد React على القيمة الافتراضية الممررة إلى createContext(defaultValue)؟
تُقرأ القيمة الافتراضية حصرياً عندما يستدعي المكون useContext دون وجود أي مزود مطابق يعلوه في الشجرة.
عند تغير قيمة الحالة الممررة لخاصية value في مزود السياق، تعيد المكونات المستهلكة رسم نفسها بالقيمة الجديدة تلقائياً.
صواب؛ تحدث React كل مكون مشترك عبر useContext فور تغير قيمة المزود دون تمرير خصائص للوسطاء.
ما المعامل الصحيح الذي يجب تمريره إلى خطاف useContext(...) داخل المكون الفرعي؟
يمرر دائماً كائن السياق نفسه مثل CurrencyContext وليس سلسلة نصية أو عنصر المزود.
لا يُسمح إلا لمكون واحد فقط في التطبيق بأكمله بقراءة نفس كائن السياق عبر useContext.
خطأ؛ يمكن لعدد غير محدود من المكونات على مختلف المستويات تحت المزود قراءة نفس السياق معاً.
إذا أُحيط مكون حفيد بمزودين متداخلين لنفس السياق (الخارجي بقيمة 1 والداخلي الأقرب بقيمة 2)، فما القيمة التي يعيدها useContext؟
يجلب خطاف useContext دائماً القيمة من أقرب مزود مطابق يعلو المكون مباشرة في الشجرة، وهي هنا 2.
يمكن تغليف شجرة المكونات نفسها بمزودين لسياقين منفصلين مثل المظهر والصلاحية دون أن يلغي أحدهما الآخر.
صواب؛ كل سياق منشأ باستدعاء مستقل لـ createContext يمثل قناة مستقلة تماماً لا تتعارض مع غيرها.
قبل التسرع في إنشاء سياق جديد لتفادي تمرير بيانات عبر مكون تخطيط واحد، ما الأسلوب الأبسط الذي توصي به React أولاً؟
تمرير العناصر الجاهزة عبر خاصية children يغني قالب التخطيط عن استلام بيانات الأبناء أو تمريرها.
أي نوع من البيانات التالية يُعد مثالاً كلاسيكياً مثالياً لاستخدام سياق React؟
الإعدادات العامة المشتركة بعمق مثل السمة اللونية ولغة الواجهة والحساب النشط هي الاستخدام الأمثل للسياق.