React • المستوى الرابع • الدرس 1
العودة لفهرس المستوىإدارة الحالة الشاملة بـ Context API
أهداف الدرس العلمية
- حل مشكلة تمرير البيانات المتكرر (Prop Drilling).
- إنشاء ومشاركة سياق بيانات عام (Context Provider) متاح لجميع المكونات.
- استهلاك السياق من أي مكوّن فرعي عبر
useContext. - بناء مستودع حالة مركزي مشترك للتطبيق بأكمله.
1. ما هو Context API؟
Context API هو حل مدمج في React لمشاركة البيانات بين مكونات متعددة دون الحاجة لتمرير الـ Props يدوياً في كل مستوى. يوفر مستودعاً مركزياً يمكن لأي مكوّن الوصول إليه مباشرة.
javascript
// 1️⃣ إنشاء السياق
const ThemeContext = createContext();
// 2️⃣ توفير البيانات (في الأب)
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<Child />
</ThemeContext.Provider>
// 3️⃣ استهلاك البيانات (في أي ابن)
const { theme, toggleTheme } = useContext(ThemeContext);2. مشكلة Prop Drilling
بدون Context، تضطر لتمرير الـ Props عبر طبقات متعددة من المكونات الوسيطة رغم أنها لا تستخدمها:
❌ بدون Context
App → Header → Menu → Item ← يحتاج theme
4 مستويات من التمرير لخاصية واحدة!
✅ مع Context
App ← Provider → Item ← useContext
الوصول مباشر من أي مكوّن!
التطبيق العملي المباشر
تحدي الدرس الأول: إضافة مكوّن عرض المظهر
قم بالتعديل على الكود في المحرر أدناه:
- أنشئ مكوّناً جديداً باسم
ThemeDisplay. - داخله، استخدم
useContext(ThemeContext)لقراءة قيمةthemeفقط. - أعد عنصر
<div>يعرض النص: "🎨 المظهر النشط حالياً: [dark/light]". - استدعِ
<ThemeDisplay />داخلAppبعد<ThemeButton />.
⏳ جارٍ تحميل المحرر التفاعلي...