Declarative UI الواجهة التصريحية
آخر تحديث: 2026-11-03
Declarative UI الواجهة التصريحية
الواجهة التصريحية تعني أنك تصف فقط كيف يجب أن تبدو الواجهة في حالة معيّنة، بدل كتابة عمليات DOM خطوة بخطوة؛ وحين تتغيّر الحالة ينقل React الشاشة لتطابقها. وبالمقارنة مع النمط الإلزامي في أسلوب jQuery، يصبح الكود أكثر قابلية للتنبؤ وأسهل صيانة بكثير، لأن هناك مصدراً واحداً للحقيقة: الحالة.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
// الأمر (الطريقة القديمة): تعديل DOM خطوة بخطوة
document.getElementById('tip').textContent = 'Submitted'
// التصريحي (طريقة React): وصف العلاقة بين الحالة والواجهة
{submitted ? <p>Submitted</p> : <p>Not submitted yet</p>}القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
في وسط الشاشة يظهر نص كبير يبيّن حالة المصباح (مضاء أو مطفي) وزر؛ الضغط على الزر يبدّل الاثنين فوراً، ولا تُنفَّذ أي عملية DOM يدوياً في أي لحظة.💡 النقاط الأساسية
💡 نصيحة قبل كتابة المكوّن، حدّد ما هي الحالات وكيف يبدو كل منها — عندئذٍ يكتب الكود التصريحي نفسه.
ℹ️ ملاحظة أكبر تحوّل للمطوّرين القادمين من jQuery هو استبدال تسلسل العمليات بإعلان النتيجة.
⚠️ تحذير تجنّب الكود نصف التصريحي: اعرض التصريحي وأعد كتابة النص عبر ref في الوقت نفسه، فيتصادم مصدرا حقيقة.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين الواجهة التصريحية والواجهة الإلزامية؟
ج الكود الإلزامي يصف كيف تفعل شيئاً (تسلسل عمليات DOM)، والكود التصريحي يصف ما هو (أي واجهة تقابل أي حالة). React يطلب منك تغيير الحالة فقط ويتولى عملية التحديث.
س لماذا اختار React النموذج التصريحي؟
ج كود الواجهة التصريحي مرتبط بالحالة ارتباطاً وثيقاً، فهو قابل للتنبؤ وسهل الاختبار والتعاون؛ أما منطق مزامنة DOM المعقّد فيتولّاه الإطار بصورة موحّدة، ما يقلّص المساحة التي تختبئ فيها الأخطاء.
س كيف أنفّذ الرسوم المتحركة ضمن واجهة تصريحية؟
ج قدّر أسماء أصناف CSS من الحالة، أو استخدم مكتبة رسوم متحركة تصريحية مثل framer-motion، لتصبح الحركة موصوفة بالحالة بدل حركات تداخل مكتوبة يدوياً.
