रिऍक्ट मधील व्हर्च्युअल DOM काय आहे?

वर्चुअल DOM ही एक रिऍक्ट ची मूलभूत संकल्पना आहे.

तुम्ही गेल्या काही वर्षांत रिऍक्टचा कोड लिहिला असेल तर कदाचित तुम्ही वर्चुअल DOM हा शब्द ऐकला असेल.

तथापि, ते कसे कार्य करते आणि React ते का वापरते हे कदाचित तुम्हाला माहित नसेल.

व्हर्च्युअल DOM म्हणजे काय, रिऍक्ट मधील त्याचे फायदे आणि ही संकल्पना स्पष्ट या आर्टिकल मध्ये आपण बघूया.

मुळात DOM काय आहे?

व्हर्च्युअल DOM समजून घेण्यासाठी आणि React त्याची अंमलबजावणी का करते हे जाणून घेण्यासाठी, वास्तविक ब्राउझर DOM बद्दलचे आपले ज्ञान रीफ्रेश करूया.

जेव्हा जेव्हा वेब डॉक्युमेंट — जसे की HTML — ब्राउझरमध्ये लोड केले जाते, तेव्हा त्या HTMLच्या घटकांचे ऑब्जेक्ट-आधारित प्रतिनिधित्व झाडासारख्या संरचनेत म्हणजेच ट्री स्ट्रक्चर तयार केले जाते.

या ऑब्जेक्टच्या मांडणीला डॉक्युमेंट ऑब्जेक्ट मॉडेल म्हणतात, ज्याला DOM देखील म्हणतात.

त्याच्या ऑब्जेक्ट-आधारित स्वरूपामुळे, JavaScript आणि इतर स्क्रिप्टिंग भाषा DOM समजू शकतात आणि document बरोबर संवाद साधू शकतात आणि हाताळू शकतात.

उदाहरणार्थ, DOM वापरून डेव्हलपर ऑब्जेक्ट जोडू किंवा काढू शकतात, त्यांचे स्वरूप बदलू शकतात.

DOM क्वेरी करणे आणि अपडेट करणे यासारखे DOM ऑपरेशन पटकन होतात. परंतु, जेव्हा जेव्हा काही बदल होतो पेज वर तेव्हा तेव्हा पेज परत रेंडर होतो.

री-रेंडरिंग परफॉर्मन्सवर कसा परिणाम करते ?

DOM मध्येे झालेले बदल री-रेंडर करणे महाग आहे आणि यामुळे परफॉर्मन्स वर परिणाम होतो कारण ब्राउझरला CSS चे परत कॅलक्युलेशन करावे लागते, प्रत्येक व्हिजिबल ऑब्जेक्टसाठी लेआउट पुन्हा बनवावा लागतो आणि वेब पेज पुन्हा रेंडर करावे लागते.

React मध्ये री-रेंडरिंग: व्हर्चुअल DOM का वापरले जाते 

आपल्याला माहिती आहे की, रिऍक्ट ही कॉम्पोनन्ट बेस्ड लायब्ररी आहे. आणि रिऍक्ट कॉम्पोनन्ट नैसर्गिकरित्या पुन्हा रेंडर होतो जेव्हा जेव्हा त्याचे props चेंज होतात किंवा पॅरेण्ट कॉम्पोनन्ट चेंज होतो.

प्रत्येक री-रेंडरनंतर सर्व DOM नोड्स पुन्हा रेंडर करण्याची किंमत अप्लिकेशनला परवडत नाही. या आव्हानावर मात करण्यासाठी, React ने व्हर्च्युअल DOM ही संकल्पना राबवली.

प्रत्येक री-रेंडर किंवा DOM अपडेटनंतर ब्राउझरला सर्व घटक पुन्हा रेंडरची परवानगी देण्याऐवजी, खऱ्या DOM मध्ये समाविष्ट न करता नेमके काय बदलले आहे हे शोधण्यासाठी React व्हर्चुअल DOM ची संकल्पना वापरतो आणि जेवढा भाग बदलला आहे तेवढाच फक्त खऱ्या DOM मध्ये बदलला जातो.

रिऍक्ट मध्ये व्हर्चुअल DOM 

React मधील व्हर्चुअल DOM हे वास्तविक DOM चे "आभासी" प्रतिनिधित्व आहे.

वास्तविक DOM ची प्रतिकृती तयार करण्यासाठी तयार केलेल्या डेटा स्ट्रक्चरशिवाय हे दुसरे काहीही नाही.

वास्तविक DOM च्या विपरीत, आभासी DOM तयार करणे कॉम्पुटर साठी सोपे आणि वेळ कमी खाणारे आहे कारण ते स्क्रीनवर लिहित नाही.

हे केवळ री-रेंडर दरम्यान वेब पेज वरील अनावश्यक घटकांचे पुन्हा रेंडर टाळण्यासाठी एक धोरण म्हणून वापरले आहे.

जेव्हा आपण युजर इंटरफेस रेंडर करतो, तेव्हा त्या रेंडरसाठी एक आभासी DOM तयार केला जातो आणि मेमरीमध्ये ठेवला जातो.

रेंडरमध्ये अपडेट आढळल्यास, रिऍक्ट आपोआप अपडेटसाठी नवीन आभासी DOM ट्री तयार करते.

खालील विडिओ द्वारे तुम्ही व्हर्चुअल DOM कसा चालेल हे बघू शकता.

तथापि, हे विसरू नका की आभासी DOM ही UI चे प्रतिनिधित्व करणारी एक साधे डेटा स्ट्रक्चर आहे. स्क्रीनवर काहीही काढले जात नाही आणि म्हणून ते तयार करणे सोपे आहे.

रिएक्टने नवीन व्हर्च्युअल DOM ट्री तयार केल्यानंतर, कोणते बदल आवश्यक आहेत हे शोधण्यासाठी ते diffing अल्गोरिदम वापरून मागील स्नॅपशॉटशी त्याची तुलना करते.

वास्तविक DOM केवळ बदललेल्या गोष्टी उपडेट करते आणि कुठल्या गोष्टी बदलल्या आहेत हे बघण्यासाठी  ReactDOM नावाची लायब्ररी वापरते. या प्रक्रियेला reconciliation म्हणतात.

जेव्हा रिऍक्ट diffing अल्गोरिदम लागू करते, तेव्हा दोन्ही स्नॅपशॉटमध्ये समान मूळ घटक आहेत की नाही याची तुलना केली जाते.

त्यांच्याकडे समान घटक असल्यास, प्रतिक्रिया पुढे सरकते आणि विशेषता आणि नंतर DOM नोडच्या रूट वर पुनरावृत्ती होते. जर रूट घटक वेगवेगळ्या प्रकारचे असती तर रिऍक्ट जुने DOM नोड्स नष्ट करेल आणि नवीन DOM ट्री तयार करेल.

व्हर्च्युअल डीओएम हे दुसरे काहीही नसून रिऍक्ट अप्लिकेशनचे काम ऑप्टिमाइझ करण्यासाठी वापरते.

हे एक यंत्रणा प्रदान करते जी दोन रेंडर ट्रींची तुलना करून नेमके काय बदलले आहे हे जाणून घेते आणि वास्तविक DOM वर जे आवश्यक आहे तेच अपडेट करते.