DOM الظاهري

Virtual DOM هي تقنية تستخدمها React لتحسين التفاعل مع المتصفح

كانت العديد من الأطر الموجودة ، قبل ظهور React على الساحة ، تتلاعب مباشرة بـ DOM عند كل تغيير.

أولاً ، ما هو DOM؟

DOM (طراز كائن المستند) هو تمثيل شجرة الصفحة ، بدءًا من<html>علامة ، النزول إلى كل طفل ، والتي تسمى العقد.

يتم الاحتفاظ بها في ذاكرة المتصفح ، ومرتبطة مباشرة بما تراه في الصفحة. يحتوي DOM على واجهة برمجة تطبيقات يمكنك استخدامها لاجتيازها والوصول إلى كل عقدة وتصفيتها وتعديلها.

واجهة برمجة التطبيقات (API) هي الصيغة المألوفة التي شاهدتها على الأرجح عدة مرات ، إذا لم تكن تستخدم واجهة برمجة التطبيقات المجردة التي يوفرها jQuery والأصدقاء:

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

تحتفظ React بنسخة من تمثيل DOM ، لما يتعلق بتصيير React: DOM الظاهري

شرح DOM الافتراضي

في كل مرة يتغير DOM ، يتعين على المتصفح إجراء عمليتين مكثفتين: إعادة الرسم (التغييرات المرئية أو تغييرات المحتوى لعنصر لا يؤثر على التخطيط والموضع بالنسبة إلى العناصر الأخرى) وإعادة التدفق (إعادة حساب تخطيط جزء من الصفحة - أو تخطيط الصفحة بالكامل).

يستخدم React نموذج DOM افتراضي لمساعدة المتصفح على استخدام موارد أقل عند الحاجة إلى إجراء تغييرات على الصفحة.

عندما تتصلsetState()على أحد المكونات ، مع تحديد حالة مختلفة عن الحالة السابقة ، تضع React علامة على هذا المكون على أنهقذر. هذا هو المفتاح: يتم تحديث React فقط عندما يغير المكون الحالة بشكل صريح.

ما سيحدث بعد ذلك هو:

  • تقوم React بتحديث DOM الظاهري بالنسبة للمكونات التي تم تمييزها على أنها متسخة (مع بعض عمليات الفحص الإضافية ، مثل التشغيلshouldComponentUpdate())
  • يقوم بتشغيل خوارزمية التباين لتسوية التغييرات
  • يحدّث DOM الحقيقي

لماذا يعد Virtual DOM مفيدًا: التجميع

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

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: