Rendering Model نموذج العرض
آخر تحديث: 2026-11-03
Rendering Model نموذج العرض
يحدّث React على خطوتين: ينفّذ أولاً دالة المكوّن لإنتاج JSX جديد (العرض)، ثم يلتزم الفروق مقارنةً بالنتيجة السابقة إلى DOM الحقيقي (الالتزام). وتشمل مُحفِّزات ذلك تحديثات الحالة وتغيّر Context مُشترك وتحديث المكوّن الأب. وفهم هذا النموذج بمرحلتين يجعل معظم أسئلة إعادة العرض سهلة الإجابة، ويشرح لماذا قد لا يتغيّر DOM بعد عملية عرض.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
Trigger an update (setState / changed props / parent re-render)
→ Render: run the component function to get the new JSX (virtual DOM)
→ Commit: apply the differences against the previous result to the real DOM
// ملاحظة: العرض ≠ لمس DOM؛ مرحلة العرض لا تقرأ الصفحة ولا تكتبها أبداًالقيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
تعرض الصفحة عدّاد المكوّن الأب ونص المكوّن الابن؛ كل نقرة تزيد الرقمين، وتطبع الطرفية سجلات عرض الأب والابن — أي نموذج «إعادة تنفيذ الدالة، ثم التزام الفروق».💡 النقاط الأساسية
ℹ️ ملاحظة «العرض» يعني إعادة تنفيذ دالة المكوّن، لا أن الصفحة تغيّرت: بعد عرض بلا فروق لا يتحرّك بايت واحد في DOM.
⚠️ تحذير يجب أن تكون دوال المكوّنات دوالاً نقية: لا طلبات ولا تعديل لمتغيّرات خارجية ولا كتابة في DOM أثناء مرحلة العرض — ضع تلك الآثار الجانبية في useEffect.
💡 نصيحة لوحة Profiler في DevTools توضّح أي المكوّنات عُرضت في كل التزام وكم استغرق ذلك.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س متى يعيد React عرض مكوّن؟
ج حين تتغيّر حالته الخاصة، أو يتغيّر Context مُشترك، أو تتغيّر خصائصه، أو حين يعيد المكوّن الأب عرض نفسه — وعرض الأب يجعل كل ابن يُعرض افتراضياً.
س هل يُعرض الابن دائماً حين يُحدَّث الأب؟
ج تُنفَّذ دالته افتراضياً، لكن الابن المغلَّف بـ memo يتخطّى ذلك العرض إذا بقيت مراجع الخصائص كما هي.
س ما الفرق بين العرض والالتزام؟
ج العرض هو المرحلة التي تنفّذ فيها دالة المكوّن وتحسب JSX جديداً، ويمكن مقاطعتها وإعادة تنفيذها. أما الالتزام فهو المرحلة التي تكتب فيها الفروق في DOM، وهناك تتغيّر الصفحة فعلياً.
