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

1. ما هو Virtual DOM؟

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

A DOM الافتراضي يشبه نسخة من DOM الحقيقي ولكنه يعيش فقط في الذاكرة. بدلاً من تحديث DOM الحقيقي مباشرةً في كل مرة يتغير فيها شيء ما، نقوم بتحديث Virtual DOM أولاً. بمجرد إجراء التغييرات، يقارن Virtual DOM نفسه بالإصدار القديم، ويبحث عن الاختلافات (وهذا ما يسمى diffing)، ويقوم فقط بتحديث أجزاء DOM الحقيقية التي تحتاج إلى التغيير.

2. ما هي المكونات؟

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

زر
• يمكن أن يكون مكونًا.
يمكن أن يكون العنوان
• الرأس مكونًا.
قائمة العناصر
• يمكن أن تكون مكونًا.
يصف كل مكون الشكل الذي يجب أن يبدو عليه جزء واجهة المستخدم. تُرجع وظيفة المكون

شجرة Virtual DOM التي تمثل واجهة المستخدم تلك. 3. مثال: إنشاء مكون زر

فلنقم بإنشاء مكون

بسيط باستخدام الكود الكاذب. سيعود هذا المكون زرًا يحتوي على نص ووظيفة يتم تشغيلها عند النقر فوق الزر.
// مكون لعرض الزر زر الوظيفة (الدعائم) { // يقوم مكون الزر بإرجاع عقدة DOM افتراضية لعنصر إرجاع VirtualNode جديد ("button"، {onClick:props.onClick }، [props.text]) }

// Component to display a button
function Button(props) {
    // The Button component returns a Virtual DOM node for a  element
    return new VirtualNode("button", { onClick: props.onClick }, [props.text])
}

الدعائم
• (الخصائص)، مثل النص الخاص بالزر ومعالج الأحداث عند النقر عليه. تقوم بإرجاع عقدة DOM افتراضية تمثل عنصر مع النص المقدم ومعالج حدث onClick.
4. تقديم مكونات متعددة

لنفترض أننا نريد إنشاء تطبيق يحتوي على

وزر . يمكن تمثيل كل جزء من هذه الأجزاء كمكونات. يمكن أن تبدو بنية التطبيق كما يلي:
// مكون التطبيق برأس وزر وظيفة التطبيق () { إرجاع VirtualNode جديد ("div"، {}، [ رأس جديد ()، // مكون الرأس new Button({ text: "Click Me"، onClick: HandleClick }) // مكون الزر ]) } // مكون الرأس رأس الوظيفة () { إرجاع VirtualNode جديد ("h1"، {}، ["مرحبًا بك في التطبيق!"]) } // وظيفة للتعامل مع نقرات الزر وظيفة التعامل مع النقر () { console.log("تم النقر على الزر!") }

// App component with a header and button
function App() {
    return new VirtualNode("div", {}, [
        new Header(), // The Header component
        new Button({ text: "Click Me", onClick: handleClick }) // The Button component
    ])
}

// Header component
function Header() {
    return new VirtualNode("h1", {}, ["Welcome to the App!"])
}

// Function to handle button clicks
function handleClick() {
    console.log("Button clicked!")
}

شجرة DOM الافتراضية
• التي تحتوي على مكونين: الرأس والزر. يُرجع مكون الرأس عقدة DOM افتراضية تمثل عنصر

  .

• يعمل مكون الزر كما وصفنا سابقًا.
5. كيف يعمل العرض الأولي

عند تشغيل التطبيق لأول مرة، فإنه:

استدعاء المكونات
1. : يتم تنفيذ App() وHeader() وButton().
إنشاء DOM الظاهري
2. : النتيجة هي شجرة من عقد DOM الافتراضية التي تمثل واجهة المستخدم.
تحديث DOM الحقيقي
3. : يتم استخدام Virtual DOM لبناء عناصر HTML الفعلية في DOM الحقيقي.
// العرض الأولي للتطبيق وظيفة تقديم التطبيق () { Let virtualDOM = App() // عرض Virtual DOM الخاص بالتطبيق Let realDOM = createRealDOM(virtualDOM) // تحويل Virtual DOM إلى عناصر DOM حقيقية AttachToPage(realDOM) // قم بإرفاق عناصر DOM الحقيقية بصفحة الويب }

// Initial render of the app
function renderApp() {
    let virtualDOM = App()          // Render the app's Virtual DOM
    let realDOM = createRealDOM(virtualDOM)  // Convert the Virtual DOM into real DOM elements
    attachToPage(realDOM)           // Attach the real DOM elements to the webpage
}

لنفترض أن شيئًا ما في التطبيق يتغير، مثل نص الزر. عادةً، سيتم إعادة عرض التطبيق بأكمله، ولكن قد يكون ذلك بطيئًا إذا كان التطبيق كبيرًا. بدلاً من ذلك، يمكننا

من خلال تحديث الأجزاء التي تم تغييرها فقط. إليك ما يحدث عند حدوث إعادة العرض:

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

لنفترض أن نص الزر تغير من "انقر فوقي" إلى "تم النقر عليه!". إليك كيفية إعادة عرض الزر:

// مكون زر جديد بنص محدث زر الوظيفة (الدعائم) { إرجاع VirtualNode جديد ("button"، {onClick:props.onClick }، [props.text]) } // إعادة العرض بالنص الجديد دع oldButton = Button({ النص: "انقر فوقي"، onClick: HandleClick }) دع newButton = Button({ text: "تم النقر عليه!"، onClick: HandleClick }) // الفرق بين الزر القديم والجديد دع diffResult = diff(oldButton, newButton) // قم بتصحيح DOM الحقيقي بالتغييرات التصحيح (realButtonDOM، diffResult)

// New Button component with updated text
function Button(props) {
    return new VirtualNode("button", { onClick: props.onClick }, [props.text])
}

// Re-rendering with the new text
let oldButton = Button({ text: "Click Me", onClick: handleClick })
let newButton = Button({ text: "Clicked!", onClick: handleClick })

// Diff the old and new Button
let diffResult = diff(oldButton, newButton)

// Patch the real DOM with the changes
patch(realButtonDOM, diffResult)

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

أو state للمكون، فيمكننا تخطي إعادة تصيير هذا المكون. هذا هو المكان الذي يأتي فيه منطق shouldComponentUpdate.
// وظيفة للتحقق مما إذا كان يجب تحديث المكون الدالة يجب ComponentUpdate(oldProps, newProps) { return oldProps !== newProps // التحديث فقط إذا تغيرت الدعائم }

// Function to check if a component should update
function shouldComponentUpdate(oldProps, newProps) {
    return oldProps !== newProps // Only update if the props have changed
}

// مثال: إعادة العرض الأمثل لمكون الزر وظيفة renderButtonIfNeeded(oldButton, newButton) { إذا (shouldComponentUpdate(oldButton.props, newButton.props)) { دع realButton = createRealDOM(newButton) التصحيح (زر حقيقي) } }

// Example: Optimized re-rendering of Button component
function renderButtonIfNeeded(oldButton, newButton) {
    if (shouldComponentUpdate(oldButton.props, newButton.props)) {
        let realButton = createRealDOM(newButton)
        patch(realButton)
    }
}

عند عرض قوائم العناصر (على سبيل المثال، قائمة الأزرار)، يمكننا التحسين باستخدام

لتحديد كل عنصر بشكل فريد. يساعد هذا الخوارزمية المختلفة على مطابقة العناصر القديمة والجديدة في القائمة وتطبيق التغييرات الضرورية فقط.
// قائمة الأزرار ذات المفاتيح الفريدة وظيفة ButtonList(العناصر) { إرجاع VirtualNode جديد ("div"، {}، items.map(item => زر جديد ({مفتاح: item.id، نص: item.text، onClick: HandleClick }) )) }

// List of buttons with unique keys
function ButtonList(items) {
    return new VirtualNode("div", {}, items.map(item => 
        new Button({ key: item.id, text: item.text, onClick: handleClick })
    ))
}

، إذا تغير أحد العناصر في القائمة (مثل إضافة زر أو إزالته)، فيمكن للخوارزمية التعرف بسرعة على الزر الذي تم تغييره وتحديث هذا الزر فقط. 9. تحسين تغييرات الحالة

يمكن أن يكون للمكونات أيضًا

الخاصة بها. عندما تتغير حالة أحد المكونات، نريد فقط إعادة عرض هذا المكون المحدد، وليس التطبيق بأكمله. فيما يلي مثال لزر بالحالة:
// مكون الزر مع الحالة وظيفة ButtonWithState() { Let [clicked, setClicked] = useState(false) // إنشاء حالة للزر وظيفة التعامل مع النقر () { setClicked(true) // تحديث الحالة عند النقر عليها } إرجاع VirtualNode الجديد ("button"، { onClick: HandleClick }، [تم النقر عليه؟ "تم النقر عليه!" : "انقر فوقي"]) }

// Button component with state
function ButtonWithState() {
    let [clicked, setClicked] = useState(false) // Create state for button

    function handleClick() {
        setClicked(true) // Update state when clicked
    }

    return new VirtualNode("button", { onClick: handleClick }, [clicked ? "Clicked!" : "Click Me"])
}

• يتم إعادة عرض مكون ButtonWithState فقط، ويقوم DOM الحقيقي بتحديث نص الزر فقط.
10. تجنب إعادة عرض المكونات الرئيسية

التحسين الآخر هو تجنب إعادة عرض المكونات الأصلية عند تغيير مكون فرعي فقط. على سبيل المثال، إذا تغير الزر لكن الرأس بقي كما هو، فيمكننا تخطي إعادة عرض الرأس.

// مكون التطبيق الأمثل وظيفة التطبيق () { إذا (!shouldComponentUpdate(oldHeaderProps, newHeaderProps)) { return oldHeader // أعد استخدام الرأس القديم إذا لم يتغير } إرجاع VirtualNode جديد ("div"، {}، [ new Header(), // أعد عرض الرأس فقط إذا لزم الأمر new ButtonWithState() // يُعاد عرض الزر بناءً على الحالة ]) }

// Optimized App component
function App() {
    if (!shouldComponentUpdate(oldHeaderProps, newHeaderProps)) {
        return oldHeader // Reuse the old Header if it hasn't changed
    }

    return new VirtualNode("div", {}, [
        new Header(), // Re-render the Header only if necessary
        new ButtonWithState() // Button re-renders based on state
    ])
}

للتلخيص، يمكننا تقسيم عملية عرض المكونات وتحسينها باستخدام Virtual DOM إلى الخطوات التالية:

العرض الأولي
1. : في المرة الأولى التي يتم فيها عرض التطبيق، نقوم ببناء شجرة DOM الافتراضية وتحويلها إلى DOM الحقيقي.
إعادة العرض
2. : عندما يتغير شيء ما (مثل نص الزر أو حالته)، نقوم بتحديث Virtual DOM ونطبق فقط التغييرات الضرورية على DOM الحقيقي.
تحسين عمليات إعادة العرض
3. : باستخدام إستراتيجيات مثل mustComponentUpdate، ومفاتيح القوائم، والتحديثات المستندة إلى الحالة، يمكننا تجنب إعادة العرض غير الضرورية، والحفاظ على سرعة التطبيق واستجابةه.
من خلال التفكير بعناية في متى وماذا يجب إعادة العرض، يمكننا التأكد من أن تطبيقات الويب تظل فعالة حتى مع نموها في التعقيد. يعد Virtual DOM أداة قوية تساعد على تحقيق هذا التوازن بين البساطة والأداء!