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

Question

हाल ही में, मैंने फेसबुक के रिएक्ट ढांचे को देखा। यह "वर्चुअल डोम" नामक एक अवधारणा का उपयोग करता है, जिसे मैं वास्तव में नहीं समझता था।

वर्चुअल डोम क्या है? क्या फायदे हैं?

Comments

मेरा मानना ​​है कि वर्चुअल डोम उन नोड्स के बारे में बात कर रहा है जो सामान्य डोम में नहीं हैं।

— डेरेक 會 會 ere

मैं मॉडरेशन के संबंध में उपरोक्त भावनाओं से सहमत हूं। इसके अलावा, मेरा मानना ​​है कि यह एक बहुत ही मान्य और उपयोगी प्रश्न है। "वर्चुअल डोम" को अक्सर संदर्भित किया जाता है, लेकिन शायद ही कभी परिभाषित किया जाता है।

— btiernay

आरंभ करने के लिए scotch.io ट्यूटोरियल पढ़ने तक मैं अपने सीमित वेब अनुभव के साथ इसे नहीं समझ सका । उन्होंने बहुत अच्छा काम किया है।

— राशेल

Answer 1

प्रतिक्रिया डोम के एक हिस्से का प्रतिनिधित्व करने वाली कस्टम वस्तुओं का एक पेड़ बनाती है। उदाहरण के लिए, कोई वास्तविक DIV तत्व, जिसमें UL तत्व है, बनाने के बजाय, यह एक React.div ऑब्जेक्ट बनाता है जिसमें एक React.ul ऑब्जेक्ट होता है। यह वास्तव में वास्तविक डोम को छूने या DOM एपीआई के माध्यम से जाने के बिना इन वस्तुओं को बहुत जल्दी से हेरफेर कर सकता है। फिर, जब यह एक घटक प्रदान करता है, तो यह इस आभासी डोम का उपयोग यह पता लगाने के लिए करता है कि दो पेड़ों को मिलान करने के लिए वास्तविक डोम के साथ क्या करना है।

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

Comments

क्या इसका उपयोग केवल इसके एक हिस्से के बजाय पूरे DOM के लिए किया जा सकता है?

— hipkiss

यह मूल रूप से अमूर्तता पर अमूर्तता है जो अंत में अपने ऑब्जेक्ट मॉडल ट्री में संदर्भ के लिए क्या प्रतिक्रिया देता है, यह एचटीएमएल में वास्तविक नोड का चयन करें और इसके साथ टिंकर करें। ध्वनि बहुत अच्छी है virtual dom, लेकिन यह फैंसी और ओवरहाइप कुछ भी नहीं है।

— syarul

"इसका मतलब क्या है" यह सभी हैवीवेट भागों की आवश्यकता नहीं है जो एक वास्तविक डोम में जाते हैं "- हैवीवेट भागों?

— अजय एस।

@ संजय असली हेरफेर बहुत कुशल नहीं है, इसीलिए इसे हैवी एपीआई कहा जाता है। मेमोरी में ऑब्जेक्ट्स को हेरफेर करना बहुत तेज़ और अधिक कुशल है, DOM का अपडेट होने वाला हिस्सा भी अधिक कुशल और तेज़ है।

— जकुबिक

Answer 2

चलो एक उदाहरण लेते हैं - हालांकि एक बहुत ही भोला व्यक्ति: यदि आपने अपने घर के एक कमरे में कुछ गड़बड़ किया है और आपको इसे साफ करने की आवश्यकता है, तो आपका पहला कदम क्या होगा? क्या आप अपने कमरे की सफाई कर रहे हैं जो गड़बड़ है या पूरे घर में है? जवाब यह निश्चित रूप से है कि आप केवल उस कमरे की सफाई करेंगे जो सफाई की आवश्यकता है। यही वर्चुअल डोम करता है।

साधारण जेएस केवल उस हिस्से को रेंडर करने के बजाय पूरे DOM को ट्रेस करता है या रेंडर करता है जिसके लिए बदलाव की आवश्यकता होती है।

इसलिए जब भी आपके पास कोई परिवर्तन होता है, जैसा कि आप <div>अपने DOM में एक और जोड़ना चाहते हैं तो वर्चुअल DOM बनाया जाएगा जो वास्तव में वास्तविक DOM में कोई बदलाव नहीं करता है। अब इस वर्चुअल DOM के साथ, आप इसके और आपके मौजूदा DOM के बीच अंतर की जाँच करेंगे। और केवल वह हिस्सा जो अलग है (इस मामले में नया <div>) पूरे डोम को फिर से प्रस्तुत करने के बजाय जोड़ा जाएगा।

Answer 3

वर्चुअल DOM क्या है?

वर्चुअल DOM पेज पर किए जाने से पहले रिएक्ट घटकों द्वारा उत्पन्न वास्तविक DOM तत्वों का एक इन-मेमोरी प्रतिनिधित्व है।

यह एक चरण है जो रेंडर फ़ंक्शन को कॉल करने और स्क्रीन पर तत्वों के प्रदर्शन के बीच होता है।

एक घटक का रेंडर तरीका कुछ मार्कअप देता है, लेकिन यह अभी तक अंतिम HTML नहीं है। यह वास्तविक तत्वों बन जाएगा की स्मृति में प्रतिनिधित्व है (यह चरण 1 है)। फिर उस आउटपुट को वास्तविक HTML में बदल दिया जाएगा, जो कि ब्राउज़र में प्रदर्शित होता है (यह चरण 2 है)।

तो एक आभासी डोम उत्पन्न करने के लिए यह सब क्यों करें? सरल उत्तर - यह वह है जो प्रतिक्रिया को तेज करने की अनुमति देता है। यह आभासी डोम भिन्न के माध्यम से ऐसा करता है। दो आभासी पेड़ों की तुलना - पुराने और नए - और वास्तविक डोम में केवल आवश्यक परिवर्तन करें।

Intro से React # 2 का स्रोत

Answer 4

A virtual DOM(VDOM) एक नई अवधारणा नहीं है: https://github.com/Matt-Esch/virtual-dom ।

VDOM रणनीतिक रूप से DOM को एक ही पृष्ठ के अनुप्रयोग में सभी नोड्स को फिर से अपडेट किए बिना अद्यतन करता है। एक पेड़ की संरचना में एक नोड को ढूंढना आसान है लेकिन एसपीए ऐप के लिए डोम ट्री काफी बड़ा हो सकता है। किसी घटना के मामले में नोड / नोड को ढूंढना और अपडेट करना समय के लिए कारगर नहीं है।

VDOM वास्तविक डोम के एक उच्च लेबल अमूर्त बनाकर इस समस्या को हल करता है। वीडीओएम एक उच्च स्तर का लाइट-इन-ट्री ट्री है जो वास्तविक डोम का प्रतिनिधित्व करता है।

उदाहरण के लिए, DOM में एक नोड जोड़ने पर विचार करें; प्रतिक्रिया स्मृति में VDOM की एक प्रति रखें

1. एक नए राज्य के साथ VDOM बनाएं
2. पुराने VDOM के साथ इसकी तुलना करें।
3. वास्तविक DOM में केवल विभिन्न नोड्स अपडेट करें।
4. नए VDOM को पुराने VDOM के रूप में असाइन करें।

Answer 5

यह एक संक्षिप्त वर्णन है और अक्सर ReactJS के साथ उल्लिखित वर्चुअल डोम का पुनर्मिलन होता है।

DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) संरचित पाठ का एक अमूर्त हिस्सा है, जिसका अर्थ है कि यह HTML कोड और css से बना है। ये HTML तत्व DOM में नोड हो जाते हैं। DOM में हेरफेर करने के पिछले तरीकों की सीमाएँ हैं। वर्चुअल डोम रिएक्ट बनाने या उपयोग करने से पहले अच्छी तरह से बनाया गया शाब्दिक HTML डोम का एक अमूर्त हिस्सा है, लेकिन हमारे उद्देश्यों के लिए हम इसे ReactJS के साथ संगीत कार्यक्रम में उपयोग करेंगे। वर्चुअल DOM, ब्राउज़र में DOM के कार्यान्वयन से हल्का और अलग है। वर्चुअल DOM मूल रूप से एक निश्चित समय पर DOM का स्क्रीनशॉट (या कॉपी) है। डेवलपर्स के नजरिए से इसे देखने का एक तरीका है डोम उत्पादन वातावरण और वर्चुअल डोम स्थानीय (देव) वातावरण है। हर बार जब रिएक्ट ऐप में डेटा बदलता है तो यूजर इंटरफेस का एक नया वर्चुअल डोम प्रतिनिधित्व बनाया जाता है।

ReactJS में एक स्थिर घटक बनाने के लिए सबसे बुनियादी विधि की आवश्यकता है:

आपको रेंडर विधि से कोड वापस करना होगा। जावास्क्रिप्ट में वर्ग आरक्षित शब्द होने से आपको हर वर्ग को वर्गनाम में बदलना होगा। अधिक बड़े परिवर्तनों के अलावा दो डोम के बीच मामूली अंतर हैं जिनमें वर्चुअल डोम में दिखाई देने वाली तीन विशेषताएँ शामिल हैं, लेकिन HTML DOM (कुंजी, रेफरी और खतरनाक रूप सेSetInHTMLHTML) में नहीं।

वर्चुअल डोम के साथ काम करते समय समझने वाली एक महत्वपूर्ण बात ReactElement और ReactComponent के बीच अंतर है।

ReactElement

• एक ReactElement एक DOM एलीमेंट का एक हल्का, स्टेटलेस, अपरिवर्तनीय, आभासी प्रतिनिधित्व है।
• ReactElement - यह React में प्राथमिक प्रकार है और वर्चुअल DOM में रहता है।

• ReactElements को HTML DOM में रेंडर किया जा सकता है

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX ReactElements में HTML टैग संकलित करता है

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• ReactComponent - ReactComponent के स्टेटफुल घटक हैं।
• React.createClass को एक ReactComponent माना जाता है।
• जब भी स्थिति में परिवर्तन होता है, घटक फिर से जमा हो जाता है।

जब भी किसी ReactComponent में कोई राज्य परिवर्तन होता है, तो हम HTML DOM में कम से कम परिवर्तन चाहते हैं, इसलिए ReactComponent को ReactElement में बदल दिया जाता है, जिसे तब वर्चुअल DOM में सम्मिलित किया जा सकता है, तुलना और तेजी से और आसानी से अपडेट किया जा सकता है।

जब React अंतर को जानता है - यह निम्न-स्तर (HTML DOM) कोड में बदल जाता है, जिसे DOM में निष्पादित किया जाता है।

Answer 6

यह एक स्वच्छ अवधारणा है: DOM को सीधे हेरफेर करने के बजाय, जो एरर प्रोन है और म्यूटेबल स्टेट पर निर्भर करता है, आप इसके बजाय वर्चुअल DOM नामक मान को आउटपुट करते हैं। वर्चुअल डोम तो है diffed किये जाने वाले डोम, जो डोम कार्य है कि नया एक की तरह वर्तमान डोम देखो बनाना होगा की एक सूची उत्पन्न की वर्तमान स्थिति से। उन ऑपरेशनों को एक बैच में जल्दी से लागू किया जाता है।

यहां से ले गए ।

Answer 7

वर्चुअल डोम HTML डोम का एक अमूर्त हिस्सा है जो राज्य परिवर्तनों के आधार पर चुनिंदा नोड्स के उपप्रकारों को प्रस्तुत करता है। यह आपके घटकों को अद्यतित रखने के लिए कम से कम डोम हेरफेर संभव है।

Comments

अमूर्तता के साथ क्या करना है? शब्द अमूर्त यहाँ अप्रासंगिक है

— eladcm

Answer 8

Virtual Dom को Dom की एक कॉपी बनाया जाता है। वर्चुअल डोम की तुलना डोम से की जाती है, और वर्चुअल डोम केवल डोम में उस हिस्से को अपडेट करते हैं जो बदल गया। यह पूरे डोम का प्रतिपादन नहीं कर रहा है यह सिर्फ डोम में डोम के अद्यतन हिस्से को बदल दिया है। यह बहुत समय लेने वाला है और इस कार्यक्षमता से, हमारा ऐप तेजी से काम करता है।

Answer 9

सभी उत्तर महान हैं। मैं बस एक सादृश्य के साथ आया था जो शायद एक वास्तविक दुनिया का रूपक दे सकता है।

असली डोम आपके कमरे की तरह है, नोड्स आपके कमरे में फर्नीचर हैं। वर्चुअल डोम ऐसा है जैसे हम इस वर्तमान कमरे का खाका खींचते हैं।

हम सभी को फर्नीचर हिलाने का अनुभव है, यह बहुत थका देने वाला है (कंप्यूटर में अपडेट विचारों के रूप में एक ही अवधारणा)। इसलिए, जब भी हम स्थिति को बदलना चाहते हैं / फर्नीचर (नोड्स) जोड़ना चाहते हैं, तो हम केवल बहुत आवश्यक परिवर्तन करना चाहते हैं।

बचाव के लिए ब्लूप्रिंट इसे हासिल करने के लिए आया था। हम एक नया खाका खींचते हैं और मूल एक के साथ अंतर की तुलना करते हैं। इससे हमें पता चल जाता है कि किस हिस्से को बदल दिया गया है और कौन सा हिस्सा एक जैसा रहता है। फिर हम वास्तविक कमरे में आवश्यक परिवर्तन करते हैं (वास्तविक डोम पर परिवर्तित नोड्स को अपडेट करें)। हुर्रे।

(कुछ लोग सोच सकते हैं, हमें आभासी पर भरोसा क्यों करना है और असली डोम की तुलना सीधे नहीं करनी है? ठीक है, सादृश्य में, असली डोम की तुलना करने का मतलब है कि आपको एक और वास्तविक कमरा बनाना होगा और अपने मूल एक से तुलना करनी होगी। । यह बहुत महंगा है।)

Answer 10

चलो इस मामले में आदेश और समझ बनाते हैं। प्रतिक्रिया (या कोई अन्य पुस्तकालय) जावास्क्रिप्ट पर एक "परत" है।

वर्चुअल डोम जैसी कोई चीज नहीं है, वहाँ अनअटैच्ड डोम है।

मुझे सरल जावास्क्रिप्ट में समझाने दो:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

इस बिंदु पर हमने एक डिव बनाया है जो डोम पर नहीं दिखाया गया है, क्योंकि यह संलग्न नहीं है

लेकिन हम इसे एक्सेस कर सकते हैं, विशेषताएँ, मूल्य, परिवर्तन आदि जोड़ सकते हैं।

एक बार जब हम कॉल करते हैं: (पूर्व के लिए, इसे शरीर में जोड़ें)

    document.body.appendChild(vDom['newDiv'])

फिर हम इसे देखेंगे;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)

Comments

"वर्चुअल डोम जैसी कोई चीज नहीं है" - वहाँ है। यह एक मुख्य विशेषता है कि रिएक्ट कैसे काम करता है। इस सवाल पर स्वीकृत जवाब इसे काफी अच्छी तरह से समझाता है।

— क्वेंटिन