Provider Pattern نمط Provider

آخر تحديث: 2026-11-03

Provider Pattern نمط Provider

يحزم نمط Provider البيانات وطرق تغييرها في مكوّن Provider حامل للحالة مع خطّاف مخصّص مقابل: تعيش الحالة داخل useState أو useReducer، وتُسلَّم إلى الأسفل عبر Context، ولا يتعامل العالم الخارجي إلا مع قراءات وكتابات useXxx(). يملك Provider الحالة ويقرّر أين تنطبق، ويكشف الخطّاف واجهة مرتّبة، أما المكوّنات في الوسط فلا تعلم أصلاً بأن سياقاً موجود.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

const Ctx = createContext(null)

export function AppProvider({ children }) {
  const [state, setState] = useState(initial)
  return <Ctx.Provider value={{ state, setState }}>{children}</Ctx.Provider>
}

export const useApp = () => useContext(Ctx)   // خطّاف القراءة المقابل

القيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

بعد الضغط على الزر تقرأ سلة التسوق «Cart (1): Apple» فوراً — تُدار الحالة في CartProvider بينما تقرأ ItemList وتكتبها عبر useContext.

💡 النقاط الأساسية

🏷️ المزيد من أنماط المكونات

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن