React Context لحالة السمة

ابدأ باستدعاء createContext() مع قيمة افتراضية تطابق بنية السياق لديك: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). لا تُستخدم القيمة الافتراضية إلا عندما يقرأ مكوّن ما السياق من دون Provider أب، وهذا يفيد في اختبار المكوّنات المعزولة.

مكوّن ThemeProvider هو غلاف يحتوي على كل منطق السمة. يقرأ تفضيل النظام عند تركيبه، ويدير حالة theme، ويوفّر دالة toggleTheme، ويغلّف المكوّنات الأبناء داخل ThemeContext.Provider value={{ theme, toggleTheme }}. ضعه بالقرب من أعلى شجرة المكوّنات.

يمكن لأي مكوّن تابع الوصول إلى السمة باستدعاء useContext(ThemeContext). يعيد هذا الاستدعاء قيمة السياق الحالية، بما في ذلك theme وtoggleTheme. يُعاد تصيير المكوّن تلقائيًا عند تغيّر السمة، لتظل متزامنة دائمًا من دون تمرير الخصائص عبر المكوّنات.

تعتمد متغيرات CSS على سمة data-theme في العنصر الجذر. أضف داخل ThemeProvider تأثيرًا useEffect يُنفّذ كلما تغيّرت theme: document.documentElement.setAttribute('data-theme', theme). يربط هذا بسلاسة بين حالة React وطبقة CSS.

للحفاظ على اختيار المستخدم بعد إعادة تحميل الصفحات، اكتب القيمة في localStorage كلما تغيّرت السمة: localStorage.setItem('theme', theme). يمكنك تغليف هذا المنطق في خطاف مخصّص باسم useLocalStorage يعيد زوجًا شبيهًا بالحالة ويحفظ كل تحديث تلقائيًا.

عند تهيئة حالة السمة، اقرأ من localStorage أولًا: localStorage.getItem('theme'). إذا لم توجد قيمة مخزّنة، فاستخدم تفضيل النظام عبر window.matchMedia('(prefers-color-scheme: dark)').matches كخيار بديل. تُنفّذ هذه التهيئة مرة واحدة فقط عند التركيب.

الترتيب الصحيح للأولوية من الأعلى إلى الأدنى هو: تفضيل المستخدم المخزّن في localStorage، ثم تفضيل نظام التشغيل، ثم قيمة افتراضية محددة مسبقًا في الشيفرة، وعادةً ما تكون السمة الفاتحة. يضمن هذا الترتيب أن تكون للمستخدم الكلمة الأخيرة دائمًا، مع احترام إعدادات نظام التشغيل إذا لم يختر المستخدم سمة صراحةً داخل التطبيق.

إن استدعاء useContext(ThemeContext) مباشرةً في كل مكوّن يكشف تفاصيل التنفيذ. بدلًا من ذلك، صدّر خطافًا باسم useTheme: function useTheme() { return useContext(ThemeContext); }. يمكن للمكوّنات الآن استيراد useTheme واستدعائه من دون معرفة السياق الأساسي.

تبدّل دالة toggleTheme بين light وdark: setTheme(prev => prev === 'light' ? 'dark' : 'light'). اعرضها من خلال السياق كي يتمكّن أي زر في أي موضع من الشجرة من تشغيلها. توجد الحالة في موضع واحد، بينما يُشارك منطق التبديل في جميع المواضع.

يُعاد إنشاء كائن قيمة السياق في كل تصيير لـ ThemeProvider. لفّه داخل useMemo لمنع إعادة التصيير غير الضرورية لجميع مستهلكي السياق: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). يُعد هذا تحسينًا شائعًا للأداء لدى موفّرات السياق.

في الاختبارات، غلّف عمليات التصيير بأداة مخصّصة باسم renderWithTheme تستخدم ThemeProvider كغلاف. يمكنك أيضًا إنشاء سياق وهمي بسيط للاختبار المعزول: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. يتيح لك هذا اختبار المكوّنات في حالة سمة محددة.

ما ترتيب الأولوية الصحيح لتهيئة سمة التطبيق، من الأولوية الأعلى إلى الأدنى؟

أنشئ ThemeContext وThemeProvider لإدارة حالة السمة، ومزامنتها مع localStorage، وتعيين data-theme في المستند. استخدم خطاف useTheme المساعد لاستهلاك السياق بطريقة واضحة. ترتيب الأولوية هو: التفضيل المخزّن، ثم تفضيل النظام، ثم القيمة الافتراضية.