في هذا الدرس 6تصفّح المواضيع
في التطبيقات العملية، يؤدي تكديس خطافات useState ووسوم <Context.Provider> مباشرة داخل المكون الجذري App إلى تضخم ملف البداية واختلاط منطق الإعداد ببنية الشاشة. الأسلوب الهندسي النظيف في React هو استخراج مكون مزود مستقل (Dedicated Provider Component) مثل ThemeProvider يدير حالته داخلياً ويستقبل { children }.
بفضل تمرير الأبناء عبر خاصية children، يبقى مكون App مقروءاً ومركزاً على هيكل الواجهة العام، بينما يتكفل المزود المستقل بتهيئة الحالة ودوال التبديل في مكان واحد منظم.
const ThemeContext = createContext('light');
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const value = { theme, setTheme };
return (
<ThemeContext.Provider value={value}>
{children}
</ThemeContext.Provider>
);
}يُعد مبدل الوضع الفاتح والداكن (Light & Dark Theme Context) المثال العملي الأوضح لاستخدام السياق، لأن معظم عناصر الواجهة من أشرطة علوية وبطاقات دروس وأزرار تحتاج إلى معرفة نمط الألوان النشط في اللحظة نفسها.
بمجرد استدعاء دالة التبديل من شريط التحكم، يحدّث المزود قيمة الحالة theme مرة واحدة، فتستجيب جميع البطاقات المشتركة في السياق عبر useContext فوراً وتعدل ألوان خلفياتها ونصوصها بتناسق تام.
function ThemeCard() {
const { theme, toggle } = useContext(ThemeContext);
const bg = theme === 'dark' ? '#1e293b' : '#f8fafc';
return (
<div style={{ background: bg, padding: '12px' }}>
<p>Active mode: {theme}</p>
<button onClick={toggle}>Switch Theme</button>
</div>
);
}تحتاج المنصات ثنائية اللغة التي تدعم العربية والإنجليزية إلى مزود للغة والاتجاه (Locale & Direction Provider) على مستوى التطبيق. فالتبديل بين العربية (ar) والإنجليزية (en) لا يغير النصوص فحسب، بل يقلب اتجاه تخطيط العناصر بين اليمين لليسار (dir="rtl") واليسار لليمين (dir="ltr").
عند حساب متغير الاتجاه داخل LocaleProvider وتمريره مع رمز اللغة ودالة التبديل في السياق، تنعكس محاذاة الصفوف المرنة والحواف والنصوص تلقائياً في جميع المكونات المتداخلة.
function DirectionBanner() {
const { locale, flip } = useContext(LocaleContext);
const isRtl = locale === 'ar';
return (
<section dir={isRtl ? 'rtl' : 'ltr'}>
<p>{isRtl ? 'RTL Mode' : 'LTR Mode'}</p>
<button onClick={flip}>Switch Locale</button>
</section>
);
}من الأخطاء الشائعة استدعاء مكون يستهلك السياق خارج حدود وسم <Provider> الخاص به، كما يحدث عند وضع شريط علوي فوق المزود عن طريق الخطأ. إذا أنشأت السياق بقيمة فارغة ثم حاولت تفكيك الكائن مباشرة عبر const { theme } = useContext(ThemeContext) فسيظهر خطأ وقت تشغيل غامض.
لحماية مكوناتك بوضوح يمكنك إما تمرير كائن افتراضي آمن داخل createContext يصلح للعرض المستقل، أو تهيئته بالقيمة null وفحص وجود القيمة عبر if (!ctx) لإظهار رسالة تنبيهية صريحة تحدد اسم المزود المفقود.
const ThemeContext = createContext(null);
function SafeStatusBadge() {
const ctx = useContext(ThemeContext);
if (!ctx) {
return <p>Missing ThemeProvider wrapper!</p>;
}
return <span>Theme: {ctx.theme}</span>;
}قبل إنشاء سياق جديد لأي ميزة، اختر الأداة الأنسب لنطاق البيانات. يتألق السياق في البيانات العابرة للشاشة بأكملها مثل السمات اللونية، واللغة واتجاه RTL/LTR، والحساب المسجل حالياً، وتفضيلات كثافة العرض، بينما تبقى البيانات المحدودة بين أب وابن مباشر أو تراكيب التغليف عبر children أنظف وأبسط بالخصائص العادية. يلخص الجدول التالي حالات الاستخدام العملية:
| فئة البيانات | النمط الهندسي الموصى به | السبب المعماري |
|---|---|---|
| الوضع الفاتح والداكن | مزود مستقل ThemeProvider | تقرؤه البطاقات والأشرطة والأزرار في آن واحد |
| اللغة واتجاه RTL وLTR | مزود مستقل LocaleProvider | يضبط اتجاه التخطيط والنصوص في كامل الشجرة |
| بيانات المستخدم المسجل | مزود منفصل UserProvider | يتغير نادراً وينفصل عن تبديل الألوان المتكرر |
| عنوان وأيقونة بطاقة مفردة | خصائص Props اعتيادية | تدفق محلي صريح يبقي المكون قابلاً لإعادة الاستخدام |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس كيفية استخراج مكونات مزودات مستقلة باستخدام children، وبناء مزودي الوضع الفاتح والداكن واللغة ثنائية الاتجاه RTL وLTR، وحماية المكونات عند غياب المزود، وفصل السياقات المستقلة لتحسين الهيكلة والأداء. الخطوة التالية: انتقل الآن إلى الدرس رقم 31 «دمج useReducer مع Context لهندسة حالة قابلة للتوسع» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Provider Component مكون المزود
- مكون تغليف مستقل يدير الحالة داخله ويزود شجرة الأبناء المحاطة به بقيمة السياق عبر خاصية value.
- للمراجعة
- 02 Theme Context سياق المظهر اللوني
- سياق عام في التطبيق يبث نمط الألوان النشط مثل الوضع الفاتح أو الداكن مع دالة التبديل الخاصة به.
- للمراجعة
- 03 Locale Context سياق اللغة والاتجاه
- سياق مشترك يوفر رمز اللغة النشطة واتجاه تخطيط الصفحة من اليمين لليسار أو العكس لجميع المكونات.
- للمراجعة
- 04 Context Splitting فصل السياقات
- تقسيم القيم العامة غير المترابطة إلى مزودات منفصلة بحيث لا يعيد تحديث إحداها تصيير المستهلكين الآخرين.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 RTL RTL
- Right-to-Left
- اتجاه انسياب التخطيط والنصوص بدءاً من الحافة اليمنى للشاشة وهو المعيار الأصيل للواجهات العربية.
- للمراجعة
- 02 LTR LTR
- Left-to-Right
- اتجاه انسياب التخطيط والنصوص بدءاً من الحافة اليسرى للشاشة وهو المعيار القياسي للواجهات الإنجليزية.
- للمراجعة
- 03 UI UI
- User Interface
- الطبقة البصرية المكونة من البطاقات والأشرطة والأزرار التي تتكيف لحظياً مع مزودات الثيم واللغة.
- للمراجعة
- 04 API API
- Application Programming Interface
- الواجهة البرمجية وعقود الدوال المصدرة مثل createContext وuseContext التي تتعامل معها المكونات.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال مبدل الوضع الفاتح والداكن في محرر التجريب وعدّل حالة المزود للتبديل بين ثلاثة أنماط لونية.
-
شغّل مثال سياق اللغة والاتجاه في محرر التجريب واضغط زر التبديل لملاحظة تغير السمة dir ومحاذاة النص فوراً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
لماذا يستخرج المهندسون مكون ThemeProvider مستقلاً يستقبل { children } بدلاً من تكديس كل الحالات داخل App؟
يعزل المكون المستقل منطق الحالة والسياق في وحدة نظيفة ويبقي المكون الجذري App مرتباً ومقروءاً.
عندما يحدّث ThemeProvider حالته من الفاتح إلى الداكن، تعيد المكونات الفرعية المستهلكة لـ ThemeContext تصيير نفسها بالثيم الجديد.
صواب؛ فتحديث الحالة داخل المزود يمرر قيمة جديدة للسياق ويحفز جميع المستهلكين المشتركين على التحديث.
ما السمة القياسية في HTML التي يضبطها مزود اللغة لعكس اتجاه التخطيط بين العربية والإنجليزية؟
تضبط السمة dir بالقيمة rtl للعربية وltr للإنجليزية فينعكس اتجاه انسياب الصفوف والنصوص أصلياً في المتصفح.
ماذا تعيد دالة useContext(ThemeContext) إذا استُدعي المكون خارج أي غلاف <ThemeContext.Provider>؟
عند غياب المزود الأعلى في الشجرة تعيد useContext القيمة الافتراضية التي مُررت عند استدعاء createContext.
تساعد تهيئة السياق بالقيمة null وفحص if (!ctx) عند الاستهلاك على اكتشاف نسيان تغليف المزود مبكراً.
صواب؛ إذ يتيح فحص القيمة null إظهار تنبيه واضح للمطور بدلاً من انهيار غامض عند محاولة تفكيك قيمة غير معرفة.
لماذا يُفضّل فصل ThemeContext عن UserContext بدلاً من جمعهما في كائن AppContext واحد ضخم؟
يمنع فصل السياقات غير المترابطة إعادة تصيير المكونات المهتمة بالمستخدم فقط عند كل تبديل للوضع اللوني.
يُعد تغليف <ThemeProvider> حول <LocaleProvider> في جذر التطبيق نمط تركيب قياسياً وصحيحاً في React.
صواب؛ فتداخل المزودات المتخصصة الصغيرة يبقي كل سياق مستقلاً وسهل الصيانة والاختبار.
أيّ نوع من البيانات التالية يُعد المرشح الأنسب لمزود سياق عام على مستوى التطبيق؟
التفضيلات العابرة للشاشة مثل المظهر اللوني ولغة الواجهة تقرؤها عشرات المكونات المتباعدة في الشجرة.
ينبغي استبدال جميع الخصائص Props في مشروع React بالسياق حتى بين الأب وابنه المباشر.
خطأ؛ فتمرير الخصائص العادية وتركيب children يظلان أوضح وأكثر مرونة للبيانات المحلية المباشرة.
داخل مكون ThemeProvider التفاعلي، كيف نمرر قيمة الثيم الحالية ودالة تبديلها معاً إلى المستهلكين؟
تمرير كائن مثل value={{ theme, toggleTheme }} يمنح المستهلكين قراءة القيمة الحالية واستدعاء التبديل بوضوح.