आधुनिक वेब एप्लिकेशन बनाते समय, ऐप्स को तेज़ और प्रतिक्रियाशील बनाए रखने के लिए यूआई (यूजर इंटरफ़ेस) को कुशलतापूर्वक अपडेट करना आवश्यक है। कई फ़्रेमवर्क (जैसे रिएक्ट) में उपयोग की जाने वाली एक सामान्य रणनीति वर्चुअल DOM और घटकों का उपयोग करना है। यह आलेख समझाएगा कि वर्चुअल DOM का उपयोग करके घटकों को कैसे प्रस्तुत किया जाता है और हम कैसे री-रेंडरिंग को अनुकूलित कर सकते हैं ताकि वेब ऐप धीमा न हो।

1. वर्चुअल डोम क्या है?

DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) एक पेड़ जैसी संरचना है जो एक वेबपेज पर सभी तत्वों का प्रतिनिधित्व करती है। हर बार जब आप किसी वेबपेज के साथ इंटरैक्ट करते हैं—बटन क्लिक करते हैं, टेक्स्ट टाइप करते हैं—ब्राउज़र को DOM को अपडेट करना पड़ता है, जो धीमा हो सकता है।

ए वर्चुअल डोम वास्तविक डोम की एक प्रति की तरह है लेकिन केवल मेमोरी में रहता है। हर बार कुछ बदलाव होने पर वास्तविक DOM को सीधे अपडेट करने के बजाय, हम पहले वर्चुअल DOM को अपडेट करते हैं। एक बार परिवर्तन किए जाने के बाद, वर्चुअल DOM खुद की तुलना पुराने संस्करण से करता है, अंतर पाता है (इसे diffing कहा जाता है), और वास्तविक DOM के केवल उन हिस्सों को अपडेट करता है जिन्हें बदलने की आवश्यकता होती है।

2. घटक क्या हैं?

एक आधुनिक वेब ऐप में, घटक यूआई के निर्माण खंड हैं। इन्हें किसी वेबपेज के छोटे, पुन: प्रयोज्य भागों के रूप में सोचें। उदाहरण के लिए:

• एक बटन एक घटक हो सकता है।
• एक हेडर एक घटक हो सकता है।
• एक आइटमों की सूची एक घटक हो सकती है।

प्रत्येक घटक बताता है कि यूआई का कौन सा भाग कैसा दिखना चाहिए। एक घटक फ़ंक्शन एक वर्चुअल DOM पेड़ लौटाता है जो उस यूआई का प्रतिनिधित्व करता है।

3. उदाहरण: एक बटन घटक बनाना

आइए स्यूडोकोड का उपयोग करके एक सरल बटन घटक बनाएं। यह घटक टेक्स्ट वाला एक बटन और एक फ़ंक्शन लौटाएगा जो बटन क्लिक करने पर चलता है।

// 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 नोड लौटाता है जो दिए गए टेक्स्ट और ऑनक्लिक इवेंट हैंडलर के साथ एक तत्व का प्रतिनिधित्व करता है।

4. अनेक घटकों का प्रतिपादन

मान लें कि हम एक ऐप बनाना चाहते हैं जिसमें एक हेडर और एक बटन हो। इनमें से प्रत्येक भाग को घटकों के रूप में दर्शाया जा सकता है। ऐप की संरचना इस तरह दिख सकती है:

// 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. घटकों को कॉल करता है: ऐप(), हेडर(), और बटन() निष्पादित होते हैं।
2. वर्चुअल DOM बनाता है: परिणाम वर्चुअल DOM नोड्स का एक पेड़ है जो UI का प्रतिनिधित्व करता है।
3. असली DOM को अपडेट करता है: वर्चुअल DOM का उपयोग वास्तविक DOM में वास्तविक HTML तत्वों को बनाने के लिए किया जाता है।

// 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
}

6. पुनः प्रतिपादन और हमें अनुकूलन की आवश्यकता क्यों है

मान लीजिए कि ऐप में कुछ बदलता है, जैसे बटन टेक्स्ट। आम तौर पर, पूरे ऐप को दोबारा प्रस्तुत किया जाएगा, लेकिन अगर ऐप बड़ा है तो यह धीमा हो सकता है। इसके बजाय, हम केवल बदले हुए हिस्सों को अपडेट करके री-रेंडरिंग को अनुकूलित कर सकते हैं।

यहां बताया गया है कि जब पुनः प्रतिपादन होता है तो क्या होता है:

1. अंतर: हम पुराने वर्चुअल DOM की तुलना नए से करते हैं और पता लगाते हैं कि क्या बदल गया है।
2. पैचिंग: वास्तविक DOM के केवल वे भाग जिन्हें अद्यतन करने की आवश्यकता होती है, बदले जाते हैं (इस प्रक्रिया को पैचिंग कहा जाता है)।

उदाहरण: बटन टेक्स्ट बदलना

मान लें कि बटन टेक्स्ट "मुझे क्लिक करें" से "क्लिक किया गया!" में बदल जाता है। यहां बताया गया है कि हम बटन को फिर से कैसे प्रस्तुत करेंगे:

// 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)

7. पुन: रेंडरिंग को अनुकूलित करना: घटक को अपडेट करना चाहिए

री-रेंडरिंग को अनुकूलित करने का एक प्रमुख तरीका यह जांचना है कि किसी घटक को वास्तव में अपडेट करने की आवश्यकता है या नहीं। यदि घटक के props या state में कुछ भी नहीं बदला है, तो हम उस घटक को पुन: प्रस्तुत करना छोड़ सकते हैं। यहीं पर shouldComponentUpdate तर्क आता है।

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

अब, पुन: प्रस्तुत करने से पहले, हम जांचते हैं कि क्या घटक को अद्यतन करना चाहिए:

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

8. सूची अनुकूलन के लिए कुंजियों का उपयोग करना

आइटमों की सूची प्रस्तुत करते समय (उदाहरण के लिए, बटनों की एक सूची), हम प्रत्येक आइटम को विशिष्ट रूप से पहचानने के लिए कुंजियों का उपयोग करके अनुकूलित कर सकते हैं। इससे अलग-अलग एल्गोरिदम को सूची में पुराने और नए आइटमों का मिलान करने और केवल आवश्यक परिवर्तन लागू करने में मदद मिलती है।

// 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. राज्य परिवर्तन का अनुकूलन

घटकों का अपना राज्य भी हो सकता है। जब किसी घटक की स्थिति बदलती है, तो हम केवल उस विशिष्ट घटक को फिर से प्रस्तुत करना चाहते हैं, संपूर्ण ऐप को नहीं। यहां स्थिति वाले बटन का एक उदाहरण दिया गया है:

// 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. मूल घटकों को पुनः प्रस्तुत करने से बचें

एक अन्य अनुकूलन केवल चाइल्ड घटक में परिवर्तन होने पर मूल घटकों को पुन: प्रस्तुत करने से बचना है। उदाहरण के लिए, यदि बटन बदलता है लेकिन हेडर वही रहता है, तो हम हेडर को दोबारा प्रस्तुत करना छोड़ सकते हैं।

// 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
    ])
}

11. निष्कर्ष: वर्चुअल डोम के साथ कुशल यूआई अपडेट

संक्षेप में, हम वर्चुअल DOM का उपयोग करके घटकों को प्रस्तुत करने और अनुकूलित करने की प्रक्रिया को इन चरणों में विभाजित कर सकते हैं:

1. प्रारंभिक रेंडरिंग: पहली बार ऐप रेंडर होने पर, हम वर्चुअल DOM ट्री बनाते हैं और इसे वास्तविक DOM में परिवर्तित करते हैं।
2. री-रेंडरिंग: जब कुछ बदलता है (जैसे बटन टेक्स्ट या स्थिति), तो हम वर्चुअल DOM को अपडेट करते हैं और वास्तविक DOM में केवल आवश्यक परिवर्तन लागू करते हैं।
3. री-रेंडर को ऑप्टिमाइज़ करना: shudComponentUpdate, सूचियों के लिए कुंजी और राज्य-आधारित अपडेट जैसी रणनीतियों का उपयोग करके, हम ऐप को तेज़ और प्रतिक्रियाशील रखते हुए अनावश्यक री-रेंडरिंग से बच सकते हैं।

कब और क्या पुनः प्रस्तुत करना है, इस पर ध्यानपूर्वक विचार करके, हम यह सुनिश्चित कर सकते हैं कि जटिलता बढ़ने पर भी वेब एप्लिकेशन कुशल बने रहें। वर्चुअल डोम एक शक्तिशाली उपकरण है जो सरलता और प्रदर्शन के बीच संतुलन हासिल करने में मदद करता है!