Render Props
آخر تحديث: 2026-11-03
Render Props Render Props
تعني render props تمرير JSX الذي تريد عرضه إلى مكوّن كـ prop دالة: يملك المكوّن المنطق والحالة، بينما يستقبل المستدعي البيانات كوسيط ويقرّر ما يُعرض. هذا يفصل إعادة استخدام المنطق عن تخصيص الواجهة، وكان أكثر أنماط إعادة الاستخدام شيوعاً قبل ظهور الخطافات. ولأن البيانات تصل كوسيط عادي، تستطيع تنفيذ واحدة أن تخدم واجهات مختلفة جداً دون أن تعرف شيئاً عن أيّ منها.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function DataProvider({ render }) {
const data = /* البيانات التي ينتجها المنطق */
return render(data) // استدعِ دالة العرض وسلّم البيانات مرة أخرى
}
// الاستخدام: <DataProvider render={data => <List items={data} />} />القيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
يُعرض منطق العدّاد نفسه في واجهتين مختلفتين تماماً، ويتراكم العدّادان بشكل مستقل دون أن يتداخلا.💡 النقاط الأساسية
ℹ️ ملاحظة يمكن أن يكون children دالة أيضاً — <Counter>{count => …}</Counter> — وهي الآلية نفسها التي تقوم عليها render prop.
💡 نصيحة استخراج المنطق في خطّاف مخصّص مثل useCounter usually أكثر إيجازاً من render props، ويمكن للاثنتين أن يتعايشا.
⚠️ تحذير تداخل مكوّنات render props بعمق ينتج هرم تداخل؛ ومنذ ظهور الخطافات حُلّت معظم تلك الحالات.
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل render props و children من نوع دالة هما الشيء نفسه؟
ج الآلية واحدة: تمرّر دالة كـ prop فيستدعيها المكوّن بالبيانات. وchildren من نوع دالة هو مجرد صياغة أكثر اختصاراً.
س هل ما زلنا نحتاج render props بعد وجود الخطافات؟
ج الخطافات أفضل لمعظم حالات إعادة استخدام المنطق، لكن render props ما زالت مناسبة حين يجب على جزء واحد من المنطق أن يعرض واجهات مختلفة جداً وترغب في تولي العرض كلياً.
س هل تُعاد بناء دالة العرض في كل عرض؟
ج نعم، فهي دالة سهمية مضمّنة. ويكتفى مكوّن render props باستدعائها دون مقارنة سطحية بـ memo، لذا لا تصبح غالباً مشكلة أداء.
