createContext إنشاء Context
آخر تحديث: 2026-11-03
createContext إنشاء Context
ينشئ createContext كائن Context يتيح للبيانات أن تعبر مستويات الشجرة دون تمرير props عبر كل مكوّن وسيط. ويأتي مع مكوّن Provider يبثّ قيمة إلى الأسفل، ويرافقه useContext في جانب القراءة. ويناسب البيانات العامة حقاً كالنمط أو اللغة أو المستخدم الحالي. والكائن نفسه هو المفتاح: يعثر useContext على Provider المطابق عبر الهوية، فيمكن إنشاء السياق مرة واحدة على مستوى الوحدة واستخدامه من أي مكان.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | واجهة برمجية |
| منذ الإصدار | React 16.3 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
import { createContext } from 'react'
// القيمة الافتراضية تُطبَّق عندما لا يوجد Provider في الأعلى
const ThemeContext = createContext('light')
<ThemeContext.Provider value="dark">
…every component downstream can read 'dark'…
</ThemeContext.Provider>⚙️ المعاملات
| defaultValue | القيمة الاحتياطية التي يعيدها useContext حين لا يُعثر على Provider مطابق في الأسفل؛ وتمرير undefined صراحةً يجعل Provider إلزامياً. |
|---|
القيمة المرجعة：يعيد كائن Context: يحمل مكوّني Provider و Consumer، وهو نفسه المفتاح الذي يقرأه useContext.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
تعرض الصفحة «Hello!» — يستخدم App الـ Provider لبثّ en إلى مكوّن عميق، ويقرأه Greeting دون أن يتلقّى prop واحدة.💡 النقاط الأساسية
💡 نصيحة وسيط createContext قيمة احتياطية لا قيمة ابتدائية: ما إن يوجد Provider في الأعلى، تفوز قيمة ذلك Provider.
ℹ️ ملاحظة تغيير قيمة السياق يعيد عرض كل المستهلكين، ولهذا يُضمَّن دالة setState غالباً داخل قيمة Provider.
⚠️ تحذير لا تحوّل كل prop إلى سياق — استخدمه للبيانات العامة حقاً فقط، وإلا تضرّت قابلية إعادة الاستخدام وقراءة مكوّناتك.
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل وسيط createContext قيمة ابتدائية؟
ج هو قيمة احتياطية فقط حين لا يوجد Provider في الأعلى؛ وحين يوجد Provider، تفوز قيمته على الافتراضي تماماً.
س هل يجب أن يكون Provider فوق المكوّن المستهلك؟
ج نعم. يصعد useContext في شجرة المكوّنات حتى أقرب Provider، ولا يعود إلى القيمة الافتراضية إلا حين لا يجد واحداً.
س كيف أختار بين Context و props؟
ج ضمن مستويين من التداخل مرّر props؛ ولا تلجأ إلى Context إلا حين تعبر البيانات مستويات كثيرة وتُشارَك عالمياً، كالنمط أو المستخدم أو اللغة.
