استخدامات رد الفعل الظاهري dom: 1. تحسين أداء رمز رد الفعل Virtual DOM هو كائن js يستهلك أداءً أقل بكثير من إنشاء DOM حقيقي سيكون لـ DOM تأثير كبير على تحسين الأداء. 2. لتحقيق تطبيقات عبر المحطات الطرفية، على جانب المتصفح، يتم تحويل DOM الافتراضي إلى عقد DOM للمتصفح الفردي، أو يمكن تحويله إلى مكونات للتطبيقات الأصلية لتنفيذ المحطات الطرفية. التطبيقات.
بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار التفاعل 17.0.1، كمبيوتر Dell G3.
1. تحسين الأداء بشكل كبير
2. إنه يمكّن التطبيقات المتقاطعة (React Native). من ناحية المتصفح، يتم تحويل DOM الافتراضي إلى عقد DOM فردية للمتصفح. ويمكن أيضًا تحويلها إلى مكونات للتطبيقات الأصلية، ويمكن تحقيق تطبيقات المقطع العرضي.
لماذا يحسن الأداء
إذا لم يكن هناك DOM افتراضي، فسيتم إنشاء DOM حقيقي مباشرةً في كل مرة تتغير فيها البيانات، سيتم إنشاء DOM حقيقي، ثم سيتم مقارنة DOM الحقيقي، ثم سيتم تعديل DOM الحقيقي سوف يستهلك DOM الكثير من الأداء (نظرًا لأن شجرة DOM التي تم إنشاؤها بواسطة JS ستستدعي واجهة برمجة التطبيقات على مستوى تطبيق الويب، فإن فقدان أداء هذا المستوى من واجهة برمجة التطبيقات كبير جدًا)، مما سيستهلك الكثير من الأداء.
الأمر مختلف مع DOM الافتراضي، حيث أن Virtual DOM هو كائن js، حيث يستهلك إنشاء كائن js أداءً أقل بكثير من إنشاء DOM حقيقي.
دوم افتراضي
Virtual DOM هو كائن js
<div id='abc'><span>مرحبًا بالعالم</span></div>// Real DOM['div', {id: 'abc'}, ['span', {}, 'مرحبًا بالعالم' ]]//DOM الافتراضيعملية تحميل وتحديث الصفحة
1. بيانات الحالة
2.قالب جي إس إكس
3. البيانات + القالب تنشئ DOM افتراضيًا
4. استخدم DOM الافتراضي لإنشاء DOM حقيقي
5. تغييرات الحالة
6. يقوم قالب البيانات + بإنشاء DOM افتراضي جديد
7. قارن بين DOM الافتراضي الأصلي وDOM الافتراضي الجديد (خوارزمية الفرق)
8. تشغيل DOM مباشرة وتغيير الأماكن المختلفة
قم بتوسيع معرفتك:
ما هو الغرض من DOM الظاهري؟
من أجل تحقيق التحديث الفعال لعناصر DOM في الصفحة؛
في تطبيقات الويب التقليدية، نقوم غالبًا بتحديث تغييرات البيانات على واجهة المستخدم في الوقت الفعلي، لذا فإن كل تغيير صغير في البيانات سيؤدي إلى إعادة عرض شجرة DOM.
الغرض من DOM الافتراضي هو تجميع جميع العمليات وحساب جميع التغييرات إحصائيًا وتحديث DOM بشكل موحد.
تحسين الأداء بشكل كبير
إنه يتيح التطبيقات المتقاطعة (React Native). من ناحية المتصفح، يتم تحويل DOM الافتراضي إلى عقد DOM فردية للمتصفح. ويمكن أيضًا تحويلها إلى مكونات للتطبيقات الأصلية، ويمكن تحقيق تطبيقات المقطع العرضي.
الفرق بين DOM وDOM الظاهري
1. لن يقوم DOM الافتراضي بإجراء عمليات التنضيد وإعادة الرسم.
2. قم بتعديل DOM الافتراضي بشكل متكرر، ثم قارن وعدل الأجزاء التي تحتاج إلى تغيير في DOM الحقيقي مرة واحدة (ملاحظة!)، وأخيرًا قم بإجراء التنضيد وإعادة الرسم في DOM الحقيقي لتقليل فقدان التنضيد وإعادة الرسم المفرط عقد DOM.
3. كفاءة التنضيد وإعادة رسم DOM الحقيقي بشكل متكرر منخفضة جدًا.
4. يقلل Virtual DOM بشكل فعال من إعادة رسم وتنضيد المساحات الكبيرة (عقد DOM الحقيقية)، لأنه في النهاية يختلف عن DOM الحقيقي ويمكنه عرض جزء منه فقط.