useContext قراءة Context
آخر تحديث: 2026-11-03
useContext قراءة Context
يأخذ useContext كائن Context أنشأه createContext ويعيد قيمة أقرب Provider فوقه، أو القيمة الافتراضية حين لا يوجد Provider. وهو يتيح لمكوّن عميق أن يقبض البيانات مباشرة، متجاوزاً كل طبقة وسيطة، فينهي تمرير props بلا نهاية عبر الشجرة. والاستدعاء نفسه لا يقبل اعتمادية، لكن كل مستهلك يعيد العرض كلما تغيّرت القيمة، لذا تستحق القيمة أن تبقى ثابتة.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | خطاف |
| منذ الإصدار | React 16.8 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
const value = useContext(MyContext)
// MyContext يجب أن يكون الكائن الذي تعيده createContext نفسها
// القيمة دائماً هي v الموجودة في <MyContext.Provider value={v}> أعلاه⚙️ المعاملات
| Context object | الكائن الذي تعيده createContext. لاحظ أنك تمرّر الكائن نفسه لا مكوّن Provider. |
|---|
القيمة المرجعة：يعيد قيمة أقرب Provider حالي؛ وحين لا يوجد Provider في الأعلى يعيد القيمة الافتراضية المعطاة إلى createContext.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
تعرض الصفحة «Current user: Alice»؛ وإن غيّرت قيمة Provider إلى null، يعود Avatar تلقائياً إلى «Not signed in».💡 النقاط الأساسية
💡 نصيحة استدعِ useContext في المستوى الأعلى من المكوّن؛ وحين تتغيّر القيمة، يعيد كل مكوّن يستهلك ذلك Context عرضه تلقائياً.
ℹ️ ملاحظة إذا كان على المستهلكين أن يحدّثوا البيانات أيضاً، فضع دالة setState في القيمة أيضاً: { user, setUser }.
⚠️ تحذير إذا كانت القيمة كائناً يُنشأ في كل عرض، يعيد عرض كل مستهلكيه مع Provider — استخدم useMemo لتثبيت المرجع.
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل يُطلق useContext إعادة عرض؟
ج حين تتغيّر القيمة، يعيد عرض كل مكوّن يقرأ ذلك Context عبر useContext؛ وحين تبقى القيمة كما هي لا يحدث شيء.
س هل يمكنني استخدام عدة سياقات معاً؟
ج نعم، استدعِ useContext مرة لكل سياق؛ وبدلاً من ذلك يبقي سياق واحد يعيد كائناً مركّباً الأمور أبسط.
س لماذا أمرّر كائن Context بدل Provider؟
ج يعثر useContext على Provider المطابق عبر هوية الكائن، فمرّرك مكوّناً لا معنى له ويرمي React خطأً.
