ReactDOM

यदि आप एक <script> टैग से React को लोड करते हैं, तो ये टॉप-लेवल API ‘ReactDOM’ ग्लोबल पर उपलब्ध हैं। यदि आप ES6 का उपयोग npm के साथ करते हैं, तो आप 'react-dom' से ReactDOM आयात कर सकते हैं। यदि आप npm के साथ ES5 का उपयोग करते हैं, तो आप var ReactDOM = require('react-dom') को लिख सकते हैं।

निरीक्षण

react-dom पैकेज DOM-विशिष्ट तरीके प्रदान करता है जो आपके ऐप के टॉप लेवल पर उपयोग किए जा सकते हैं और यदि आवश्यक हो तो React मॉडल के बाहर निकलने के लिए एक एस्केप हैच के रूप में। आपके अधिकांश कौम्पोनॅन्ट को इस मॉड्यूल का उपयोग करने की आवश्यकता नहीं होनी चाहिए।

ब्राउज़र का समर्थन

React, Internet Explorer 9 और इसके बाद के संस्करण सहित सभी लोकप्रिय ब्राउज़रों का समर्थन करती है, हालांकि IE 9 और IE 10 जैसे पुराने ब्राउज़रों के लिए कुछ पॉलीफ़िल की आवश्यकता है

नोट:

हम पुराने ब्राउज़रों का समर्थन नहीं करते हैं जो ES5 विधियों का समर्थन नहीं करते हैं, लेकिन आप पा सकते हैं कि यदि आपके ऐप्स पुराने ब्राउज़रों में काम करते हैं, तो पॉलीफ़िल जैसे कि es5-shim और es5-sham पृष्ठ में शामिल हैं। यदि आप इस रास्ते को लेना चाहते हैं तो आप अपने दम पर हैं।


संदर्भ

render()

ReactDOM.render(element, container[, callback])

DOM में एक React element को आपूर्ति किए गए container में रेंडर करें और कौम्पोनॅन्ट को एक संदर्भ लौटाएं (या स्टेटलेस कौम्पोनॅन्ट) के लिए null)।

यदि React element को पहले container में render किया गया था, तो यह उस पर एक अपडेट करेगा और नवीनतम React element को प्रतिबिंबित करने के लिए केवल DOM को आवश्यक रूप से परिवर्तित करेगा।

यदि वैकल्पिक कॉलबैक प्रदान किया जाता है, तो कौम्पोनॅन्ट के प्रतिपादन या अद्यतन होने के बाद इसे निष्पादित किया जाएगा।

नोट:

ReactDOM.render () आपके द्वारा पास किए गए कंटेनर नोड की सामग्री को नियंत्रित करता है। अंदर मौजूद किसी भी मौजूदा DOM तत्वों को प्रतिस्थापित किया जाता है। बाद के कॉल कुशल अपडेट के लिए React के DOM डिफरिंग एल्गोरिदम का उपयोग करते हैं।

ReactDOM.render () कंटेनर नोड को संशोधित नहीं करता है (केवल कंटेनर के बच्चों को संशोधित करता है)। मौजूदा बच्चों को अधिलेखित किए बिना एक मौजूदा DOM नोड में एक कौम्पोनॅन्ट सम्मिलित करना संभव हो सकता है।

ReactDOM.render () वर्तमान में रूट ReactComponent उदाहरण के लिए एक संदर्भ देता है। हालांकि, इस वापसी मूल्य का उपयोग करना विरासत है और इससे बचा जाना चाहिए क्योंकि प्रतिक्रिया के भविष्य के संस्करण कुछ मामलों में अतुल्यकालिक रूप से कौम्पोनॅन्ट को प्रस्तुत कर सकते हैं। यदि आपको रूट ReactComponent उदाहरण के संदर्भ की आवश्यकता है, तो पसंदीदा समाधान संलग्न करना है जड़ तत्व को कॉलबैक रेफ

सर्वर-रेंडर किए गए कंटेनर को hydrate करने के लिए ReactDOM.render() का उपयोग करके हटा दिया जाता है और इसे React 17 में हटा दिया जाएगा। इसके बजाय hydrate() का उपयोग करें।


hydrate()

ReactDOM.hydrate(element, container[, callback])

[render()] (#render) के समान, लेकिन एक कंटेनर को hydrate करने के लिए उपयोग किया जाता है, जिसकी HTML सामग्री ReactDOMServer द्वारा प्रदान की गई थी। React इवेंट श्रोताओं को मौजूदा मार्कअप से जोड़ने का प्रयास करेगा।

React की उम्मीद है कि प्रदान की गई सामग्री सर्वर और क्लाइंट के बीच समान है। यह पाठ सामग्री में अंतर को पैच कर सकता है, लेकिन आपको बेमेल के रूप में बग्स का इलाज करना चाहिए और उन्हें ठीक करना चाहिए। विकास मोड में, React हाइड्रेशन के दौरान बेमेल के बारे में चेतावनी देता है। इस बात की कोई गारंटी नहीं है कि बेमेल के मामले में विशेषता अंतर अलग-अलग होंगे। प्रदर्शन के कारणों के लिए यह महत्वपूर्ण है क्योंकि अधिकांश ऐप में बेमेल दुर्लभ हैं, और इसलिए सभी मार्कअप को मान्य करना निषेधात्मक रूप से महंगा होगा।

यदि सर्वर और क्लाइंट (उदाहरण के लिए, टाइमस्टैम्प) के बीच किसी एकल तत्व की विशेषता या पाठ सामग्री अपरिहार्य रूप से भिन्न है, तो आप तत्व में suppressHydrationWarning = {true} को जोड़कर चेतावनी को मौन कर सकते हैं। यह केवल एक स्तर गहरा काम करता है, और एक पलायन हैच होने का इरादा है। इसका अधिक उपयोग न करें। जब तक यह पाठ सामग्री नहीं है, तब तक रिएक्ट इसे पैच अप करने का प्रयास नहीं करेगा, इसलिए यह भविष्य के अपडेट तक असंगत रह सकता है।

यदि आपको जानबूझकर सर्वर और क्लाइंट पर कुछ अलग करने की आवश्यकता है, तो आप दो-पास प्रतिपादन कर सकते हैं। कौम्पोनॅन्ट जो क्लाइंट पर कुछ अलग प्रस्तुत करते हैं, वह this.state.isClient जैसे एक स्टेट वैरिएबल को पढ़ सकते हैं, जिसे आप componentDidMount() में true पर सेट कर सकते हैं। इस तरह प्रारंभिक रेंडर पास, बेमेल से बचते हुए सर्वर के समान सामग्री प्रदान करेगा, लेकिन हाइड्रेशन के लिए एक अतिरिक्त पास समकालिक रूप से सही होगा। ध्यान दें कि यह दृष्टिकोण आपके कौम्पोनॅन्ट को धीमा कर देगा क्योंकि उन्हें दो बार प्रस्तुत करना होगा, इसलिए सावधानी के साथ इसका उपयोग करें।

धीमे कनेक्शन पर उपयोगकर्ता अनुभव के प्रति सचेत रहना याद रखें। प्रारंभिक HTML रेंडर की तुलना में जावास्क्रिप्ट कोड काफी बाद में लोड हो सकता है, इसलिए यदि आप क्लाइंट-ओनली पास में कुछ अलग रेंडर करते हैं, तो ट्रांस्फ़ॉर्म जर्किंग हो सकता है। हालांकि, अगर अच्छी तरह से निष्पादित किया जाता है, तो सर्वर पर एप्लिकेशन के “शेल” को रेंडर करना फायदेमंद हो सकता है, और केवल क्लाइंट पर कुछ अतिरिक्त विजेट दिखा सकता है। मार्कअप मिसमैच मुद्दों को प्राप्त किए बिना ऐसा करने के लिए सीखने के लिए, पिछले पैराग्राफ में स्पष्टीकरण देखें।


unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

DOM से एक माउंटेड रिएक्ट कंपोनेंट निकालें और उसके इवेंट हैंडलर और स्टेट को क्लीन करें। यदि कोई कौम्पोनॅन्ट कंटेनर में नहीं रखा गया था, तो इस फ़ंक्शन को कॉल करने से कुछ भी नहीं होता है। यदि कोई कौम्पोनॅन्ट अनमाउंट किया गया था और false अगर कोई कौम्पोनॅन्ट नहीं था तो true लौटाता है


findDOMNode()

नोट:

findDOMNode एक अंतर्निहित हैच है जिसका उपयोग अंतर्निहित DOM नोड को एक्सेस करने के लिए किया जाता है। ज्यादातर मामलों में, इस एस्केप हैच के उपयोग को हतोत्साहित किया जाता है क्योंकि यह कौम्पोनॅन्ट अमूर्त को छेदता है। इसे StrictMode में चित्रित किया गया है।

ReactDOM.findDOMNode(component)

यदि इस कौम्पोनॅन्ट को DOM में रखा गया है, तो यह संबंधित मूल ब्राउज़र DOM तत्व देता है। यह विधि DOM से बाहर के मानों को पढ़ने के लिए उपयोगी है, जैसे फ़ील्ड मान और DOM माप प्रदर्शन करना। ज्यादातर मामलों में, आप DOM नोड के लिए एक रेफरी संलग्न कर सकते हैं और findDOMNode का उपयोग करने से बचें।

जब एक कौम्पोनॅन्ट null या false, findDOMNode को null देता है। जब एक कौम्पोनॅन्ट स्ट्रिंग को प्रस्तुत करता है, तो findDOMNode एक पाठ DOM नोड देता है जिसमें वह मान होता है। प्रतिक्रिया 16 के रूप में, एक कौम्पोनॅन्ट कई बच्चों के साथ एक टुकड़ा लौटा सकता है, जिस स्थिति में findDOMNode पहले गैर-खाली बच्चे के समान डोम नोड लौटाएगा।

नोट:

findDOMNode केवल माउंट किए गए कौम्पोनॅन्ट पर काम करता है (अर्थात, कौम्पोनॅन्ट जिन्हें DOM में रखा गया है)। यदि आप इसे एक ऐसे कौम्पोनॅन्ट पर कॉल करने का प्रयास करते हैं जो अभी तक माउंट नहीं किया गया है (जैसे findDOMNode() को render() में उस कौम्पोनॅन्ट पर जिसे अभी बनाया जाना है) को अपवाद के रूप में कहा जाएगा।

findDOMNode फ़ंक्शन कौम्पोनॅन्ट पर उपयोग नहीं किया जा सकता है।


createPortal()

ReactDOM.createPortal(child, container)

एक पोर्टल बनाता है। पोर्टल एक तरीका प्रदान करते हैं बच्चों को एक DOM नोड में प्रस्तुत करना जो DOM कौम्पोनॅन्ट के पदानुक्रम के बाहर मौजूद है।