ما هو الـ Virtual DOM في React؟

ببساطة، الـ Virtual DOM (الشجرة الظاهرية للعناصر) هو جزء أساسي من كيفية تحديث وعرض الواجهات في React.

أي عند تحميل واجهة المستخدم لأول مرة، تقوم React بإنشاء نسخة Virtual DOM من DOM الحقيقي.

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

وتتكون العناصر من مكونات React التي قد تكون قطعًا صغيرة من الواجهة مثل الزر، النص، أو حتى مكونات أكبر مثل قائمة أو نموذج.

ولفهم مفهوم الـ Virtual DOM بشكل بسيط وسهل، تحدث العملية بالمراحل التالية:

1. تمثيل الواجهة (UI) في React عن طريق مكونات (Components)، والتي تتألف من عناصر DOM.
2. عندما يحدث تغيير في البيانات أو الحالة (state) في التطبيق، يقوم React بتحديث الـ Virtual DOM بدلاً من تحديث العناصر الفعلية في DOM.
3. بعد التحديث، يقوم React بمقارنة الـ Virtual DOM الجديد مع الـ Virtual DOM السابق.
4. يتم اكتشاف الفروق (التغييرات) بين الـ Virtual DOM الجديد والقديم باستخدام خوارزمية فعالة.
5. وبالتالي اعتمادًا على الفروق التي تم اكتشافها، يتم تحديث الـ Virtual DOM بشكل انعكاسي، حيث يتم تحديث فقط العناصر التي تغيرت فعليًا.
6. يتم تحديث العناصر في DOM الفعلي بناءًا على التغييرات التي تمثلها الـ Virtual DOM.

وبالتالي تخيل أنك تريد تغيير لون قطعة واحدة على اللوحة، مع الـ Virtual DOM، يمكنك ببساطة تغيير لونها على النسخة الورقية، ثم تحديث اللوحة الحقيقية فقط في تلك المنطقة، وذلك أسرع بكثير من إعادة رسم اللوحة بأكملها.

بنفس المنطق، تخيل أنك تريد إضافة قطعة جديدة إلى اللوحة، ومع الـ Virtual DOM، تستطيع ببساطة إضافة موقعها ولونها على النسخة الورقية، ثم تحديث اللوحة الحقيقية فقط في تلك المنطقة، مما يوفر عليك الوقت والطاقة.

https://wiki.hsoub.com/React/faq_internals

عندما يتعلق الأمر ببناء تطبيقات الويب، فهو مهم جداً فهم الاختلافات بين الـ Virtual DOM والـ Real DOM .

ما هو الـ Real DOM؟

الـ Real DOM، أو ما يعرف أيضاً بالـ DOM الفعلي، هو تمثيل المتصفح لهيكل صفحة الويب HTML. عندما يتفاعل المستخدم مع صفحة الويب، مثل النقر على زر أو ملء نموذج، يقوم المتصفح بتحديث الـ Real DOM ليعكس التغييرات. ثم يقوم المتصفح بإعادة رسم الصفحة لعرض الـ HTML المحدث.

ما هو الـ Virtual DOM؟

الـ Virtual DOM هو تجريد عن الـ Real DOM، والذي يتم إنشاؤه وصيانته بواسطة مكتبات JavaScript مثل React. الـ Virtual DOM هو نسخة خفيفة من الـ Real DOM، مما يتيح التحديثات الأسرع والأداء المحسن. عندما يتفاعل المستخدم مع صفحة الويب، يقوم React بتحديث الـ Virtual DOM، ثم يقارنه مع الإصدار السابق فقط ويقوم بتحديث الـ Real DOM بالتغييرات اللازمة. هذه العملية تعرف بالتصالح (Reconciliation).

الاختلافات بين الـ Virtual DOM والـ Real DOM

الـ Virtual DOM والـ Real DOM يختلفان في عدة طرق. أولاً، الـ Real DOM أبطأ بكثير من الـ Virtual DOM، حيث يتطلب كل تحديث تعيين من المتصفح إعادة حساب تخطيط المستند بأكمله. على الجانب الآخر، الـ Virtual DOM هو نسخة خفيفة من الـ Real DOM، مما يتيح التحديثات الأسرع والأداء المحسن.

ثانياً، الـ Real DOM هو هيكل شجري، وكل عقدة فيه تحتوي على مستمع حدث مرتبط. عندما يتفاعل المستخدم مع صفحة الويب، يقوم المتصفح بتنفيذ مستمعي الأحداث المقابلة. يمكن أن تكون هذه العملية بطيئة وتستهلك موارد كبيرة. على العكس، تحديثات الـ Virtual DOM أكثر كفاءة، حيث يتم تثبيت مستمعي الأحداث فقط على العقدة الجذرية وليس على كل عقدة فردية.

أخيراً، الـ Virtual DOM مرن للغاية ويمكن استخدامه مع أي لغة برمجة تستطيع تشغيل JavaScript. بينما الـ Real DOM مرتبط تماماً بالمتصفح ويمكن التلاعب به فقط باستخدام JavaScript.

الختام:

في الختام، الـ Virtual DOM والـ Real DOM هما مكونان حاسمان في تطوير تطبيقات الويب. بينما الـ Real DOM هو تمثيل المتصفح لهيكل صفحة الويب HTML، الـ Virtual DOM هو تجريد عن الـ Real DOM يتم إنشاؤه وصيانته بواسطة مكتبات JavaScript مثل React. من خلال فهم الاختلافات بين الـ DOMين، يمكن للمطورين تحسين أداء تطبيقات الويب وتحسين تجربة المستخدم.

هذه الصوره يمكنها مساعدتك في الفهم اكثر 

يمكن شرح مبدأ عمل Virtual DOM على أنها تلعب دور حاجز بين تطبيق React والـ DOM الفعلي، مما يتيح للتطبيق التفاعل مع نسخة افتراضية من الواجهة بدلاً من التفاعل المباشر مع الـ DOM.

وهذا ما يسهم في تحسين أداء التطبيق عند تحديث الواجهة.

فعند تحديث الـ Virtual DOM، يتم إجراء عمليات مقارنة فعالة لتحديد الفروق بين النسخة الجديدة والنسخة السابقة. يعتمد هذا التحليل على خوارزميات فعالة مثل "خوارزمية الفرق الذكية"، مثلما يساعد في تقليل الوقت والموارد المستهلكة.

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

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

ولتوضيح ذلك أكثر هذا مثال بسيط لشرح كيفية عملها:

import React, { useState } from 'react';

const App = () => {
  const [items, setItems] = useState(['عنصر 1', 'عنصر 2', 'عنصر 3']);

  const addItem = () => {
    // نقوم بنسخ قائمة العناصر باستخدام ال spread operator
    const newItems = [...items, `عنصر ${items.length + 1}`];
    setItems(newItems);
  };

  return (
    <div>
      <h1>قائمة العناصر</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>إضافة عنصر جديد</button>
    </div>
  );
};

export default App;

بالإضافة للشرح الرائع في التعليقات السابقة سأحاول شرح الـ Virtual DOM (DOM الافتراضي) في React بشكل أبسط كالتالي

الـ Virtual DOM هو عبارة عن تمثيل برمجي للـ Real DOM (DOM الحقيقي).

بشكل مبسط:

• عندما نقوم ببناء تطبيق React فإننا نكتب تعليمات الـ JSX .
• هذه التعليمات تنشئ شجرة من العناصر الافتراضية (Virtual DOM).
• عندما يحدث تغيير في المكونات أو البيانات، يقارن React بين الـ Virtual DOM القديم والجديد.
• يحدد React التغييرات المطلوبة فقط ويقوم بتحديث الـ Real DOM بشكل أكثر كفاءة.

فببساطة، الـ Virtual DOM هو عبارة عن تمثيل برمجي للصفحة، يساعد في تحديد التغييرات وتحديث الـ Real DOM بكفاءة عالية.