DOM الافتراضي والكائنات الداخلية

ما هو DOM الافتراضي (Virtual DOM)؟

DOM الافتراضي (أو اختصارًا VDOM) هو مفهوم برمجي نحتفظ فيه بالتمثيل المثالي أو الافتراضي لواجهة المستخدم ضمن الذاكرة مع مزامنته مع DOM الحقيقي عن طريق مكتبة مثل React DOM. تُدعى هذه العمليّة بالمطابقة (reconciliation).

تُمكِّن هذه الطريقة واجهة برمجة التطبيق التصريحية في React، حيث تُخبِر React الحالة التي تريد أن تكون بها واجهة المستخدم لديك، فتحرص React على مطابقة DOM مع تلك الحالة. يُجرِّد هذا التعامل مع الخاصيّات، ومعالجة الأحداث، وتحديث DOM اليدوي الذي يجب عليك استخدامه لبناء تطبيقك.

لمّا كانت كلمة “DOM الافتراضي” عبارة عن نمط أكثر من كونها تقنيّة محدّدة، فأحيانًا يقول بعض الناس هذه الكلمة ليقصدوا بها أشياء مختلفة. يرتبط المصطلح “DOM الافتراضي” في عالم React بعناصر React بما أنّها عبارة عن كائنات تُمثِّل واجهة المستخدم. على أيّة حالة تستخدم React أيضًا كائنات الداخليّة تُدعى بـ”الألياف” (fibers) للاحتفاظ بمعلومات إضافيّة حول شجرة المكونات. قد تُعتبر هذه الألياف جزءًا من تنفيذ “DOM الافتراضي” في React.

هل DOM الخيالي (Shadow DOM) هو نفسه DOM الافتراضي (Virtual DOM)؟

لا، إنّهما مختلفان. حيث إنّ DOM الخيالي هو تقنية في المتصفّح مُصمَّمة بشكل أساسي لتحديد نطاق المتغيّرات وCSS في مكوّنات الويب. أمّا DOM الافتراضي هو مفهوم مُنفَّذ عن طريق مكتبات في JavaScript بناءً على واجهات برمجة تطبيق المتصفّح.

ما هو “React Fiber”؟

Fiber هو مُحرِّك المطابقة الجديد في React 16. هدفه الأساسي هو تمكين التصيير التراكمي في DOM الافتراضي. اقرأ المزيد من هنا.