Virtual DOM DOM الافتراضي
آخر تحديث: 2026-11-03
Virtual DOM DOM الافتراضي
DOM الافتراضي هو شجرة خفيفة من كائنات JavaScript العادية يحتفظ بها React في الذاكرة لوصف الواجهة الحقيقية. وعند تغيّر الحالة يحسب React شجرة جديدة أولاً، ثم يقارنها بالقديمة، ثم لا يلتزم سوى الفروق إلى DOM الحقيقي، فتتحدث الشاشة بأقل كلفة ممكنة. هذه المسار ذو المرحلتين هو جوهر نموذج العرض في React.
| المجموعة | المفاهيم الأساسية |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
تتغيّر الحالة
→ تُنفَّذ دالة المكوّن مجدداً فتنتج شجرة DOM افتراضية جديدة
→ Diff: تُقارَن الشجرتان القديمة والجديدة طبقة بطبقة لإيجاد الفروق
→ Commit: تُطبَّق تلك الفروق فقط على DOM الحقيقيالقيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
سطران موسّطان — «Number» و«re-rendered N times» — إضافة إلى زر. كل نقرة تزيد الرقمين معاً بينما يبقى بقية الصفحة ساكناً تماماً، وهذا يوضّح أن «الدالة تُنفَّذ من جديد، و DOM يحدّث الفروق فقط».💡 النقاط الأساسية
ℹ️ ملاحظة DOM الافتراضي وسيلة لتنفيذ واجهة تصريحية لا رصاصة فضية للأداء؛ ومقارنة الفروق تتبع قواعد استدلالية مثل مقارنة الأشقاء في المستوى نفسه.
💡 نصيحة ثبات الـ key يؤثر مباشرة في جودة المقارنة: الـ key الثابت يتيح لـ React إعادة استخدام العقد الموجودة وتجنّب العمل بلا داعٍ.
⚠️ تحذير لا تتعامل مع DOM الحقيقي يدوياً داخل دالة العرض، فهذا يتجاوز آلية التحديث ويجعل الحالة والواجهة غير متزامنتين.
🏷️ المزيد من المفاهيم الأساسية
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل DOM الافتراضي أسرع دائماً من التعامل مع DOM مباشرة؟
ج ليس دائماً. قد تكون عملية DOM واحدة مضبوطة يدوياً أسرع؛ لكن قيمة DOM الافتراضي في أن تبقى التحديثات الكثيرة والمتكررة سريعة وقابلة للصيانة بحمل ذهني أقل بكثير.
س كيف تعمل خوارزمية المقارنة في React؟
ج تعتمد استراتيجيات استدلالية: عناصر من نوع مختلف تُعاد بناؤها، وعناصر من النوع نفسه لا يُحدَّث منها إلا ما تغيّر من سماتها؛ أما قوائم الأشقاء فيُطابَق بينها عبر key لتحديد إعادة الاستخدام أو النقل أو الحذف.
س ما علاقة الـ key بـ DOM الافتراضي؟
ج عند مقارنة قائمة يعتمد React على key لمطابقة العقد القديمة والجديدة واحدة بواحدة؛ والـ key الثابت يتيح إعادة استخدام العقد بشكل صحيح، بينما استخدام index قد يحدّث العنصر الخطأ.
