React createRef: प्रत्यक्ष कॉम्पोनेंट और DOM एलिमेंट इंटरैक्शन के लिए एक विस्तृत गाइड

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

हालांकि, वेब एप्लिकेशन की वास्तविक दुनिया शायद ही कभी पूरी तरह से डिक्लेरेटिव होती है। कुछ विशिष्ट, फिर भी सामान्य, परिदृश्य हैं जहां अंतर्निहित DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) एलिमेंट या क्लास कॉम्पोनेंट इंस्टेंस के साथ सीधा इंटरेक्शन न केवल सुविधाजनक, बल्कि बिल्कुल आवश्यक हो जाता है। रिएक्ट के डिक्लेरेटिव फ्लो से इन "एस्केप हैच" को रेफ्स (refs) के रूप में जाना जाता है। इन रेफरेंसेज को बनाने और प्रबंधित करने के लिए रिएक्ट द्वारा प्रदान किए जाने वाले विभिन्न तंत्रों में, React.createRef() एक मूलभूत API के रूप में खड़ा है, जो विशेष रूप से क्लास कॉम्पोनेंट्स के साथ काम करने वाले डेवलपर्स के लिए प्रासंगिक है।

यह व्यापक गाइड React.createRef() को समझने, लागू करने और उसमें महारत हासिल करने के लिए आपका निश्चित संसाधन बनने का लक्ष्य रखता है। हम इसके उद्देश्य का विस्तृत अन्वेषण करेंगे, इसके सिंटैक्स और व्यावहारिक अनुप्रयोगों में गहराई से उतरेंगे, इसकी सर्वोत्तम प्रथाओं पर प्रकाश डालेंगे, और इसे अन्य रेफ प्रबंधन रणनीतियों से अलग करेंगे। चाहे आप एक अनुभवी रिएक्ट डेवलपर हों जो इम्परेटिव इंटरेक्शन की अपनी समझ को मजबूत करना चाहते हैं या एक नवागंतुक जो इस महत्वपूर्ण अवधारणा को समझना चाहता है, यह लेख आपको अधिक मजबूत, प्रदर्शनकारी और विश्व स्तर पर सुलभ रिएक्ट एप्लिकेशन बनाने के ज्ञान से लैस करेगा जो आधुनिक उपयोगकर्ता अनुभवों की जटिल मांगों को शालीनता से संभालते हैं।

रिएक्ट में रेफ्स को समझना: डिक्लेरेटिव और इम्परेटिव दुनिया को जोड़ना

अपने मूल में, रिएक्ट प्रोग्रामिंग की एक डिक्लेरेटिव शैली का समर्थन करता है। आप अपने कॉम्पोनेंट्स, उनकी स्टेट, और वे कैसे रेंडर होते हैं, यह परिभाषित करते हैं। फिर रिएक्ट आपके घोषित UI को प्रतिबिंबित करने के लिए वास्तविक ब्राउज़र DOM को कुशलतापूर्वक अपडेट करने का काम संभालता है। यह एब्स्ट्रैक्शन लेयर अत्यधिक शक्तिशाली है, जो डेवलपर्स को सीधे DOM मैनिपुलेशन की जटिलताओं और प्रदर्शन की कमियों से बचाती है। यही कारण है कि रिएक्ट एप्लिकेशन अक्सर बहुत सहज और प्रतिक्रियाशील महसूस होते हैं।

एक-दिशीय डेटा प्रवाह और इसकी सीमाएं

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

इन जैसे परिदृश्यों पर विचार करें:

• जब कोई उपयोगकर्ता किसी फॉर्म पर नेविगेट करता है तो प्रोग्रामेटिक रूप से एक इनपुट फ़ील्ड पर फ़ोकस करना।
• एक <video> एलिमेंट पर play() या pause() विधियों को ट्रिगर करना।
• लेआउट को गतिशील रूप से समायोजित करने के लिए रेंडर किए गए <div> के सटीक पिक्सेल आयामों को मापना।
• एक जटिल थर्ड-पार्टी जावास्क्रिप्ट लाइब्रेरी (जैसे, D3.js जैसी चार्टिंग लाइब्रेरी या एक मैप विज़ुअलाइज़ेशन टूल) को एकीकृत करना जो एक DOM कंटेनर तक सीधी पहुंच की अपेक्षा करती है।

ये क्रियाएं स्वाभाविक रूप से इम्परेटिव हैं – इनमें किसी एलिमेंट को कुछ करने के लिए सीधे आदेश देना शामिल है, न कि केवल उसकी वांछित स्थिति घोषित करना। जबकि रिएक्ट का डिक्लेरेटिव मॉडल अक्सर कई इम्परेटिव विवरणों को दूर कर सकता है, यह उनकी आवश्यकता को पूरी तरह से समाप्त नहीं करता है। यहीं पर रेफ्स काम आते हैं, जो इन सीधे इंटरेक्शन को करने के लिए एक नियंत्रित एस्केप हैच प्रदान करते हैं।

रेफ्स का उपयोग कब करें: इम्परेटिव बनाम डिक्लेरेटिव इंटरेक्शन को नेविगेट करना

रेफ्स के साथ काम करते समय सबसे महत्वपूर्ण सिद्धांत यह है कि उन्हें संयम से और केवल जब बिल्कुल आवश्यक हो तब उपयोग करें। यदि कोई कार्य रिएक्ट के मानक डिक्लेरेटिव तंत्र (स्टेट और प्रॉप्स) का उपयोग करके पूरा किया जा सकता है, तो वह हमेशा आपका पसंदीदा दृष्टिकोण होना चाहिए। रेफ्स पर अत्यधिक निर्भरता से ऐसा कोड बन सकता है जिसे समझना, बनाए रखना और डीबग करना कठिन होता है, जो रिएक्ट द्वारा प्रदान किए गए लाभों को ही कमजोर करता है।

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

• फोकस, टेक्स्ट चयन, और मीडिया प्लेबैक का प्रबंधन: ये क्लासिक उदाहरण हैं जहां आपको एलिमेंट्स के साथ इम्परेटिव रूप से इंटरैक्ट करने की आवश्यकता होती है। पेज लोड होने पर एक सर्च बार को ऑटो-फोकस करने, एक इनपुट फ़ील्ड में सभी टेक्स्ट का चयन करने, या एक ऑडियो या वीडियो प्लेयर के प्लेबैक को नियंत्रित करने के बारे में सोचें। ये क्रियाएं आमतौर पर उपयोगकर्ता की घटनाओं या कॉम्पोनेंट लाइफसाइकिल विधियों द्वारा ट्रिगर की जाती हैं, न कि केवल प्रॉप्स या स्टेट को बदलने से।
• इम्परेटिव एनिमेशन को ट्रिगर करना: जबकि कई एनिमेशन को CSS ट्रांज़िशन/एनिमेशन या रिएक्ट एनिमेशन लाइब्रेरी के साथ डिक्लेरेटिव रूप से नियंत्रित किया जा सकता है, कुछ जटिल, उच्च-प्रदर्शन वाले एनिमेशन, विशेष रूप से HTML कैनवास API, WebGL, या एलिमेंट गुणों पर बारीक नियंत्रण की आवश्यकता वाले एनिमेशन जिन्हें रिएक्ट के रेंडर चक्र के बाहर सबसे अच्छा प्रबंधित किया जाता है, के लिए रेफ्स की आवश्यकता हो सकती है।
• थर्ड-पार्टी DOM लाइब्रेरी के साथ एकीकरण: कई प्रतिष्ठित जावास्क्रिप्ट लाइब्रेरी (जैसे, D3.js, मैप्स के लिए Leaflet, विभिन्न विरासत UI टूलकिट) को विशिष्ट DOM एलिमेंट्स को सीधे मैनिपुलेट करने के लिए डिज़ाइन किया गया है। रेफ्स आवश्यक ब्रिज प्रदान करते हैं, जिससे रिएक्ट एक कंटेनर एलिमेंट को रेंडर कर सकता है, और फिर थर्ड-पार्टी लाइब्रेरी को अपने स्वयं के इम्परेटिव रेंडरिंग लॉजिक के लिए उस कंटेनर तक पहुंच प्रदान करता है।
• एलिमेंट के आयामों या स्थिति को मापना: उन्नत लेआउट, वर्चुअलाइजेशन, या कस्टम स्क्रॉल व्यवहार को लागू करने के लिए, आपको अक्सर एक एलिमेंट के आकार, व्यूपोर्ट के सापेक्ष उसकी स्थिति, या उसकी स्क्रॉल ऊंचाई के बारे में सटीक जानकारी की आवश्यकता होती है। getBoundingClientRect() जैसे API केवल वास्तविक DOM नोड्स पर ही सुलभ होते हैं, जो इस तरह की गणनाओं के लिए रेफ्स को अनिवार्य बनाते हैं।

इसके विपरीत, आपको उन कार्यों के लिए रेफ्स का उपयोग करने से बचना चाहिए जिन्हें डिक्लेरेटिव रूप से प्राप्त किया जा सकता है। इसमें शामिल हैं:

• किसी कॉम्पोनेंट की शैली को संशोधित करना (सशर्त स्टाइलिंग के लिए स्टेट का उपयोग करें)।
• किसी एलिमेंट की टेक्स्ट सामग्री को बदलना (प्रॉप के रूप में पास करें या स्टेट को अपडेट करें)।
• जटिल कॉम्पोनेंट संचार (प्रॉप्स और कॉलबैक आम तौर पर बेहतर होते हैं)।
• कोई भी परिदृश्य जहां आप स्टेट प्रबंधन की कार्यक्षमता को दोहराने की कोशिश कर रहे हैं।

React.createRef() में गोता लगाना: क्लास कॉम्पोनेंट्स के लिए आधुनिक दृष्टिकोण

React.createRef() को रिएक्ट 16.3 में पेश किया गया था, जो पुराने तरीकों जैसे स्ट्रिंग रेफ्स (अब पदावनत) और कॉलबैक रेफ्स (अभी भी मान्य है लेकिन अक्सर अधिक शब्दाडंबरपूर्ण) की तुलना में रेफ्स को प्रबंधित करने का एक अधिक स्पष्ट और स्वच्छ तरीका प्रदान करता है। इसे क्लास कॉम्पोनेंट्स के लिए प्राथमिक रेफ निर्माण तंत्र के रूप में डिज़ाइन किया गया है, जो एक ऑब्जेक्ट-ओरिएंटेड API प्रदान करता है जो क्लास संरचना के भीतर स्वाभाविक रूप से फिट बैठता है।

सिंटैक्स और मूल उपयोग: एक तीन-चरणीय प्रक्रिया

createRef() का उपयोग करने का वर्कफ़्लो सीधा है और इसमें तीन प्रमुख चरण शामिल हैं:

1. एक Ref ऑब्जेक्ट बनाएं: अपने क्लास कॉम्पोनेंट के कंस्ट्रक्टर में, React.createRef() को कॉल करके एक ref इंस्टेंस को इनिशियलाइज़ करें और इसके रिटर्न मान को एक इंस्टेंस प्रॉपर्टी (जैसे, this.myRef) को असाइन करें।
2. Ref संलग्न करें: अपने कॉम्पोनेंट के render मेथड में, बनाए गए ref ऑब्जेक्ट को रिएक्ट एलिमेंट (या तो एक HTML एलिमेंट या एक क्लास कॉम्पोनेंट) के ref एट्रिब्यूट में पास करें जिसे आप संदर्भित करना चाहते हैं।
3. लक्ष्य तक पहुंचें: एक बार जब कॉम्पोनेंट माउंट हो जाता है, तो संदर्भित DOM नोड या कॉम्पोनेंट इंस्टेंस आपके ref ऑब्जेक्ट की .current प्रॉपर्टी (जैसे, this.myRef.current) के माध्यम से उपलब्ध होगा।

import React from 'react';

class FocusInputOnMount extends React.Component {
constructor(props) {
super(props);

this.inputElementRef = React.createRef(); // चरण 1: कंस्ट्रक्टर में एक ref ऑब्जेक्ट बनाएं
console.log('Constructor: Ref current value is initially:', this.inputElementRef.current); // null
}

componentDidMount() {

if (this.inputElementRef.current) {
this.inputElementRef.current.focus();
console.log('ComponentDidMount: Input focused. Current value:', this.inputElementRef.current.value);
}
}

handleButtonClick = () => {

if (this.inputElementRef.current) {
alert(`Input value: ${this.inputElementRef.current.value}`);
}
};

render() {
console.log('Render: Ref current value is:', this.inputElementRef.current); // प्रारंभिक रेंडर पर अभी भी null है
return (
<div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
<h3>ऑटो-फोकसिंग इनपुट फ़ील्ड</h3>
<label htmlFor="focusInput">अपना नाम दर्ज करें:</label><br />
<input
id="focusInput"
type="text"
ref={this.inputElementRef} // चरण 2: <input> एलिमेंट से ref संलग्न करें
placeholder="आपका नाम यहाँ..."
style={{ margin: '10px 0', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
/><br />
<button
onClick={this.handleButtonClick}
style={{ padding: '10px 15px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
इनपुट मान दिखाएं
</button>
<p><em>यह इनपुट कॉम्पोनेंट लोड होने पर स्वचालित रूप से फोकस प्राप्त कर लेगा।</em></p>
</div>
);
}
}

इस उदाहरण में, this.inputElementRef एक ऑब्जेक्ट है जिसे रिएक्ट आंतरिक रूप से प्रबंधित करेगा। जब <input> एलिमेंट रेंडर होता है और DOM में माउंट होता है, तो रिएक्ट उस वास्तविक DOM नोड को this.inputElementRef.current को असाइन करता है। componentDidMount लाइफसाइकिल मेथड refs के साथ इंटरैक्ट करने के लिए आदर्श स्थान है क्योंकि यह गारंटी देता है कि कॉम्पोनेंट और उसके बच्चे DOM में रेंडर हो चुके हैं और .current प्रॉपर्टी उपलब्ध और पॉपुलेटेड है।

DOM एलिमेंट से Ref संलग्न करना: सीधी DOM पहुँच

जब आप एक मानक HTML एलिमेंट (जैसे, <div>, <p>, <button>, <img>) से एक ref संलग्न करते हैं, तो आपके ref ऑब्जेक्ट की .current प्रॉपर्टी में वास्तविक अंतर्निहित DOM एलिमेंट होगा। यह आपको सभी मानक ब्राउज़र DOM API तक अबाध पहुँच प्रदान करता है, जिससे आप ऐसे कार्य कर सकते हैं जो आमतौर पर रिएक्ट के डिक्लेरेटिव नियंत्रण से बाहर होते हैं। यह विशेष रूप से वैश्विक अनुप्रयोगों के लिए उपयोगी है जहां विविध उपयोगकर्ता वातावरण और डिवाइस प्रकारों में सटीक लेआउट, स्क्रॉलिंग, या फोकस प्रबंधन महत्वपूर्ण हो सकता है।

import React from 'react';

class ScrollToElementExample extends React.Component {
constructor(props) {
super(props);
this.targetDivRef = React.createRef();
this.state = { showScrollButton: false };
}

componentDidMount() {
// स्क्रॉल बटन केवल तभी दिखाएं जब स्क्रॉल करने के लिए पर्याप्त सामग्री हो
// यह जांच यह भी सुनिश्चित करती है कि ref पहले से ही current है।
if (this.targetDivRef.current && window.innerHeight < document.body.scrollHeight) {
this.setState({ showScrollButton: true });
}
}

handleScrollToTarget = () => {
if (this.targetDivRef.current) {
// स्मूथ स्क्रॉलिंग के लिए scrollIntoView का उपयोग करना, जो विश्व स्तर पर ब्राउज़रों में व्यापक रूप से समर्थित है।
this.targetDivRef.current.scrollIntoView({
behavior: 'smooth', // बेहतर उपयोगकर्ता अनुभव के लिए स्क्रॉल को एनिमेट करता है
block: 'start' // एलिमेंट के शीर्ष को व्यूपोर्ट के शीर्ष पर संरेखित करता है
});
console.log('Scrolled to target div!');
} else {
console.warn('Target div not yet available for scrolling.');
}
};

render() {
return (
<div style={{ padding: '15px' }}>
<h2>Ref के साथ एक विशिष्ट एलिमेंट पर स्क्रॉल करना</h2>
<p>यह उदाहरण दिखाता है कि कैसे एक DOM एलिमेंट पर प्रोग्रामेटिक रूप से स्क्रॉल किया जाए जो ऑफ-स्क्रीन है।</p>

{this.state.showScrollButton && (
<button
onClick={this.handleScrollToTarget}
style={{ marginBottom: '20px', padding: '10px 20px', background: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
लक्ष्य क्षेत्र तक नीचे स्क्रॉल करें
</button>
)}

<div style={{ height: '1500px', background: '#f8f9fa', padding: '20px', marginBottom: '20px', border: '1px dashed #6c757d' }}>
<p>ऊर्ध्वाधर स्क्रॉल स्थान बनाने के लिए प्लेसहोल्डर सामग्री।</p>
<p>लंबे लेख, जटिल फॉर्म, या विस्तृत डैशबोर्ड की कल्पना करें जिनके लिए उपयोगकर्ताओं को व्यापक सामग्री नेविगेट करने की आवश्यकता होती है। प्रोग्रामेटिक स्क्रॉलिंग यह सुनिश्चित करती है कि उपयोगकर्ता मैन्युअल प्रयास के बिना प्रासंगिक अनुभागों तक जल्दी पहुंच सकें, जिससे सभी उपकरणों और स्क्रीन आकारों में पहुंच और उपयोगकर्ता प्रवाह में सुधार होता है।</p>
<p>यह तकनीक विशेष रूप से बहु-पृष्ठ फ़ॉर्म, चरण-दर-चरण विज़ार्ड, या गहरी नेविगेशन वाले एकल-पृष्ठ अनुप्रयोगों में उपयोगी है।</p>
</div>

<div
ref={this.targetDivRef} // Ref को यहाँ संलग्न करें
style={{ minHeight: '300px', background: '#e9ecef', padding: '30px', border: '2px solid #007bff', borderRadius: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}
>
<h3>आप लक्ष्य क्षेत्र तक पहुँच गए हैं!</h3>
<p>यह वह अनुभाग है जिसे हमने प्रोग्रामेटिक रूप से स्क्रॉल किया है।</p>
<p>स्क्रॉलिंग व्यवहार को सटीक रूप से नियंत्रित करने की क्षमता उपयोगकर्ता अनुभव को बढ़ाने के लिए महत्वपूर्ण है, खासकर मोबाइल उपकरणों पर जहां स्क्रीन रियल एस्टेट सीमित है और सटीक नेविगेशन सर्वोपरि है।</p>
</div>
</div>
);
}
}

यह उदाहरण खूबसूरती से दिखाता है कि कैसे createRef ब्राउज़र-स्तरीय इंटरैक्शन पर नियंत्रण प्रदान करता है। इस तरह की प्रोग्रामेटिक स्क्रॉलिंग क्षमताएं कई अनुप्रयोगों में महत्वपूर्ण हैं, लंबे दस्तावेज़ों को नेविगेट करने से लेकर जटिल वर्कफ़्लो के माध्यम से उपयोगकर्ताओं का मार्गदर्शन करने तक। scrollIntoView में behavior: 'smooth' विकल्प एक सुखद, एनिमेटेड संक्रमण सुनिश्चित करता है, जो सार्वभौमिक रूप से उपयोगकर्ता अनुभव को बढ़ाता है।

एक क्लास कॉम्पोनेंट से Ref संलग्न करना: इंस्टेंस के साथ इंटरेक्ट करना

देशी DOM एलिमेंट्स के अलावा, आप एक क्लास कॉम्पोनेंट के इंस्टेंस से भी एक ref संलग्न कर सकते हैं। जब आप ऐसा करते हैं, तो आपके ref ऑब्जेक्ट की .current प्रॉपर्टी में वास्तविक इंस्टेंशिएटेड क्लास कॉम्पोनेंट ही होगा। यह एक पैरेंट कॉम्पोनेंट को सीधे चाइल्ड क्लास कॉम्पोनेंट के भीतर परिभाषित विधियों को कॉल करने या इसकी इंस्टेंस प्रॉपर्टी तक पहुंचने की अनुमति देता है। शक्तिशाली होते हुए भी, इस क्षमता का उपयोग अत्यधिक सावधानी के साथ किया जाना चाहिए, क्योंकि यह पारंपरिक एक-दिशीय डेटा प्रवाह को तोड़ने की अनुमति देता है, जिससे संभावित रूप से कम पूर्वानुमेय एप्लिकेशन व्यवहार हो सकता है।

import React from 'react';

// चाइल्ड क्लास कॉम्पोनेंट
class DialogBox extends React.Component {
constructor(props) {
super(props);
this.state = { isOpen: false, message: '' };
}

// Ref के माध्यम से पैरेंट को उजागर की गई विधि
open(message) {
this.setState({ isOpen: true, message });
}

close = () => {
this.setState({ isOpen: false, message: '' });
};

render() {
if (!this.state.isOpen) return null;

return (
<div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', padding: '25px 35px', background: 'white', border: '1px solid #ddd', borderRadius: '8px', boxShadow: '0 5px 15px rgba(0,0,0,0.2)', zIndex: 1000, maxWidth: '400px', width: '90%', textAlign: 'center' }}>
<h4>पैरेंट से संदेश</h4>
<p>{this.state.message}</p>
<button
onClick={this.close}
style={{ marginTop: '15px', padding: '8px 15px', background: '#dc3545', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
बंद करें
</button>
</div>
);
}
}

// पैरेंट क्लास कॉम्पोनेंट
class AppWithDialog extends React.Component {
constructor(props) {
super(props);
this.dialogRef = React.createRef();
}

handleOpenDialog = () => {
if (this.dialogRef.current) {
// चाइल्ड कॉम्पोनेंट इंस्टेंस तक पहुंचें और उसकी 'open' विधि को कॉल करें
this.dialogRef.current.open('पैरेंट कॉम्पोनेंट से नमस्ते! यह डायलॉग इम्परेटिव रूप से खोला गया था।');
}
};

render() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Ref के माध्यम से पैरेंट-चाइल्ड संचार</h2>
<p>यह दर्शाता है कि कैसे एक पैरेंट कॉम्पोनेंट अपने चाइल्ड क्लास कॉम्पोनेंट की एक विधि को इम्परेटिव रूप से नियंत्रित कर सकता है।</p>
<button
onClick={this.handleOpenDialog}
style={{ padding: '12px 25px', background: '#007bff', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontSize: '1.1em' }}
>
इम्परेटिव डायलॉग खोलें
</button>
<DialogBox ref={this.dialogRef} /> // एक क्लास कॉम्पोनेंट इंस्टेंस से ref संलग्न करें
</div>
);
}
}

यहां, AppWithDialog सीधे DialogBox कॉम्पोनेंट की open विधि को उसके ref के माध्यम से लागू कर सकता है। यह पैटर्न एक मोडल दिखाने, एक फॉर्म को रीसेट करने, या एक चाइल्ड कॉम्पोनेंट के भीतर संलग्न बाहरी UI एलिमेंट्स को प्रोग्रामेटिक रूप से नियंत्रित करने जैसी क्रियाओं को ट्रिगर करने के लिए उपयोगी हो सकता है। हालांकि, अधिकांश परिदृश्यों के लिए प्रॉप-आधारित संचार का पक्ष लेने की आम तौर पर सिफारिश की जाती है, जिसमें एक स्पष्ट और पूर्वानुमेय डेटा प्रवाह बनाए रखने के लिए पैरेंट से चाइल्ड तक डेटा और कॉलबैक पास किए जाते हैं। चाइल्ड कॉम्पोनेंट विधियों के लिए केवल तब refs का सहारा लें जब वे क्रियाएं वास्तव में इम्परेटिव हों और सामान्य प्रॉप/स्टेट प्रवाह में फिट न हों।

एक फंक्शनल कॉम्पोनेंट से Ref संलग्न करना (एक महत्वपूर्ण अंतर)

यह एक आम ग़लतफ़हमी है, और अंतर का एक महत्वपूर्ण बिंदु है, कि आप एक फंक्शनल कॉम्पोनेंट से सीधे createRef() का उपयोग करके एक ref संलग्न नहीं कर सकते। फंक्शनल कॉम्पोनेंट्स, अपनी प्रकृति से, क्लास कॉम्पोनेंट्स की तरह इंस्टेंस नहीं रखते हैं। यदि आप सीधे एक फंक्शनल कॉम्पोनेंट को एक ref असाइन करने का प्रयास करते हैं (जैसे, <MyFunctionalComponent ref={this.myRef} />), तो रिएक्ट डेवलपमेंट मोड में एक चेतावनी जारी करेगा क्योंकि .current को असाइन करने के लिए कोई कॉम्पोनेंट इंस्टेंस नहीं है।

यदि आपका लक्ष्य एक पैरेंट कॉम्पोनेंट (जो createRef का उपयोग करने वाला एक क्लास कॉम्पोनेंट, या useRef का उपयोग करने वाला एक फंक्शनल कॉम्पोनेंट हो सकता है) को एक फंक्शनल चाइल्ड कॉम्पोनेंट के अंदर रेंडर किए गए DOM एलिमेंट तक पहुंचने में सक्षम बनाना है, तो आपको React.forwardRef का उपयोग करना होगा। यह हायर-ऑर्डर कॉम्पोनेंट फंक्शनल कॉम्पोनेंट्स को एक विशिष्ट DOM नोड या अपने भीतर एक इम्परेटिव हैंडल के लिए एक ref को उजागर करने की अनुमति देता है।

वैकल्पिक रूप से, यदि आप एक फंक्शनल कॉम्पोनेंट के भीतर काम कर रहे हैं और एक ref बनाने और प्रबंधित करने की आवश्यकता है, तो उपयुक्त तंत्र useRef हुक है, जिस पर बाद के तुलना अनुभाग में संक्षेप में चर्चा की जाएगी। यह याद रखना महत्वपूर्ण है कि createRef मौलिक रूप से क्लास कॉम्पोनेंट्स और उनकी इंस्टेंस-आधारित प्रकृति से जुड़ा हुआ है।

DOM नोड या कॉम्पोनेंट इंस्टेंस तक पहुंचना: `.current` प्रॉपर्टी की व्याख्या

ref इंटरेक्शन का मूल React.createRef() द्वारा बनाए गए ref ऑब्जेक्ट की .current प्रॉपर्टी के इर्द-गिर्द घूमता है। इसके जीवनचक्र को समझना और यह क्या धारण कर सकता है, प्रभावी ref प्रबंधन के लिए सर्वोपरि है।

`.current` प्रॉपर्टी: इम्परेटिव नियंत्रण का आपका प्रवेश द्वार

.current प्रॉपर्टी एक म्यूटेबल ऑब्जेक्ट है जिसे रिएक्ट प्रबंधित करता है। यह संदर्भित एलिमेंट या कॉम्पोनेंट इंस्टेंस के लिए सीधे लिंक के रूप में कार्य करता है। इसका मान कॉम्पोनेंट के जीवनचक्र के दौरान बदलता है:

• इनिशियलाइज़ेशन: जब आप पहली बार कंस्ट्रक्टर में React.createRef() को कॉल करते हैं, तो ref ऑब्जेक्ट बनाया जाता है, और इसकी .current प्रॉपर्टी को null में इनिशियलाइज़ किया जाता है। ऐसा इसलिए है क्योंकि इस स्तर पर, कॉम्पोनेंट अभी तक रेंडर नहीं हुआ है, और ref को इंगित करने के लिए कोई DOM एलिमेंट या कॉम्पोनेंट इंस्टेंस मौजूद नहीं है।
• माउंटिंग: एक बार जब कॉम्पोनेंट DOM में रेंडर हो जाता है और ref एट्रिब्यूट वाला एलिमेंट बन जाता है, तो रिएक्ट वास्तविक DOM नोड या क्लास कॉम्पोनेंट इंस्टेंस को आपके ref ऑब्जेक्ट की .current प्रॉपर्टी को असाइन करता है। यह आमतौर पर render मेथड के पूरा होने के तुरंत बाद और componentDidMount को कॉल करने से पहले होता है। इसलिए, componentDidMount .current तक पहुंचने और उसके साथ इंटरैक्ट करने के लिए सबसे सुरक्षित और सबसे आम जगह है।
• अनमाउंटिंग: जब कॉम्पोनेंट DOM से अनमाउंट हो जाता है, तो रिएक्ट स्वचालित रूप से .current प्रॉपर्टी को वापस null पर रीसेट कर देता है। यह मेमोरी लीक को रोकने और यह सुनिश्चित करने के लिए महत्वपूर्ण है कि आपका एप्लिकेशन उन एलिमेंट्स के रेफरेंसेज को न रखे जो अब DOM में मौजूद नहीं हैं।
• अपडेटिंग: दुर्लभ मामलों में जहां एक अपडेट के दौरान एक एलिमेंट पर ref एट्रिब्यूट बदल दिया जाता है, पुराने ref की current प्रॉपर्टी को नए ref की current प्रॉपर्टी सेट होने से पहले null पर सेट कर दिया जाएगा। यह व्यवहार कम आम है लेकिन जटिल गतिशील ref असाइनमेंट के लिए ध्यान रखना महत्वपूर्ण है।

import React from 'react';

class RefLifecycleLogger extends React.Component {
constructor(props) {
super(props);
this.myDivRef = React.createRef();
console.log('1. Constructor: this.myDivRef.current is', this.myDivRef.current); // null
}

componentDidMount() {
console.log('3. componentDidMount: this.myDivRef.current is', this.myDivRef.current); // वास्तविक DOM एलिमेंट
if (this.myDivRef.current) {
this.myDivRef.current.style.backgroundColor = '#d4edda'; // प्रदर्शन के लिए इम्परेटिव स्टाइलिंग
this.myDivRef.current.innerText += ' - Ref सक्रिय है!';
}
}

componentDidUpdate(prevProps, prevState) {
console.log('4. componentDidUpdate: this.myDivRef.current is', this.myDivRef.current); // वास्तविक DOM एलिमेंट (अपडेट के बाद)
}

componentWillUnmount() {
console.log('5. componentWillUnmount: this.myDivRef.current is', this.myDivRef.current); // वास्तविक DOM एलिमेंट (null होने से ठीक पहले)
// इस बिंदु पर, यदि आवश्यक हो तो आप सफाई कर सकते हैं
}

render() {
// प्रारंभिक रेंडर पर, this.myDivRef.current अभी भी null है क्योंकि DOM अभी तक नहीं बना है।
// बाद के रेंडर पर (माउंट के बाद), यह एलिमेंट को धारण करेगा।
console.log('2. Render: this.myDivRef.current is', this.myDivRef.current);
return (
<div
ref={this.myDivRef}
style={{ padding: '20px', border: '1px solid #28a745', margin: '20px', minHeight: '80px', display: 'flex', alignItems: 'center' }}
>
<p>यह एक div है जिससे एक ref जुड़ा हुआ है।</p>
</div>
);
}
}

RefLifecycleLogger के लिए कंसोल आउटपुट का अवलोकन करने से स्पष्ट जानकारी मिलती है कि this.myDivRef.current कब उपलब्ध होता है। इसके साथ इंटरैक्ट करने का प्रयास करने से पहले हमेशा यह जांचना महत्वपूर्ण है कि this.myDivRef.current null नहीं है, विशेष रूप से उन विधियों में जो माउंटिंग से पहले या अनमाउंटिंग के बाद चल सकती हैं।

`.current` क्या धारण कर सकता है? आपके Ref की सामग्री की खोज

current जिस प्रकार का मान रखता है, वह इस पर निर्भर करता है कि आप ref को किससे जोड़ते हैं:

• जब एक HTML एलिमेंट से जुड़ा हो (जैसे, <div>, <input>): .current प्रॉपर्टी में वास्तविक अंतर्निहित DOM एलिमेंट होगा। यह एक देशी जावास्क्रिप्ट ऑब्जेक्ट है, जो अपने DOM API की पूरी श्रृंखला तक पहुंच प्रदान करता है। उदाहरण के लिए, यदि आप एक <input type="text"> से एक ref जोड़ते हैं, तो .current एक HTMLInputElement ऑब्जेक्ट होगा, जो आपको .focus() जैसे तरीकों को कॉल करने, .value जैसी प्रॉपर्टी पढ़ने, या .placeholder जैसे एट्रिब्यूट्स को संशोधित करने की अनुमति देता है। यह refs के लिए सबसे आम उपयोग का मामला है।

  this.inputRef.current.focus();
  this.videoRef.current.play();
  const { width, height } = this.divRef.current.getBoundingClientRect();

• जब एक क्लास कॉम्पोनेंट से जुड़ा हो (जैसे, <MyClassComponent />): .current प्रॉपर्टी उस क्लास कॉम्पोनेंट के इंस्टेंस को धारण करेगी। इसका मतलब है कि आप सीधे उस चाइल्ड कॉम्पोनेंट के भीतर परिभाषित तरीकों को कॉल कर सकते हैं (जैसे, childRef.current.someMethod()) या यहां तक कि इसकी स्टेट या प्रॉप्स तक पहुंच सकते हैं (हालांकि एक ref के माध्यम से एक बच्चे से सीधे स्टेट/प्रॉप्स तक पहुंचना आम तौर पर प्रॉप्स और स्टेट अपडेट के पक्ष में हतोत्साहित किया जाता है)। यह क्षमता चाइल्ड कॉम्पोनेंट्स में विशिष्ट व्यवहारों को ट्रिगर करने के लिए शक्तिशाली है जो मानक प्रॉप-आधारित इंटरेक्शन मॉडल में फिट नहीं होते हैं।

  this.childComponentRef.current.resetForm();
  // दुर्लभ, लेकिन संभव: console.log(this.childComponentRef.current.state.someValue);

• जब एक फंक्शनल कॉम्पोनेंट से जुड़ा हो (forwardRef के माध्यम से): जैसा कि पहले उल्लेख किया गया है, refs को सीधे फंक्शनल कॉम्पोनेंट्स से नहीं जोड़ा जा सकता है। हालांकि, यदि एक फंक्शनल कॉम्पोनेंट को React.forwardRef के साथ लपेटा जाता है, तो .current प्रॉपर्टी उस मान को धारण करेगी जिसे फंक्शनल कॉम्पोनेंट फॉरवर्ड किए गए ref के माध्यम से स्पष्ट रूप से उजागर करता है। यह आमतौर पर फंक्शनल कॉम्पोनेंट के भीतर एक DOM एलिमेंट होता है, या इम्परेटिव तरीकों वाला एक ऑब्जेक्ट होता है (forwardRef के साथ संयोजन में useImperativeHandle हुक का उपयोग करके)।

  // पैरेंट में, myForwardedRef.current उजागर DOM नोड या ऑब्जेक्ट होगा
  this.myForwardedRef.current.focus();
  this.myForwardedRef.current.customResetMethod();

`createRef` के व्यावहारिक उपयोग के मामले

React.createRef() की उपयोगिता को वास्तव में समझने के लिए, आइए अधिक विस्तृत, विश्व स्तर पर प्रासंगिक परिदृश्यों का पता लगाएं जहां यह अनिवार्य साबित होता है, जो साधारण फोकस प्रबंधन से परे है।

1. संस्कृतियों में फोकस, टेक्स्ट चयन, या मीडिया प्लेबैक का प्रबंधन

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

import React from 'react';

class DynamicFocusForm extends React.Component {
constructor(props) {
super(props);
this.firstNameRef = React.createRef();
this.lastNameRef = React.createRef();
this.emailRef = React.createRef();
this.state = { currentStep: 1 };
}

componentDidMount() {
// कॉम्पोनेंट माउंट होने पर पहले इनपुट पर फोकस करें
this.firstNameRef.current.focus();
}

handleNextStep = (nextRef) => {
this.setState(prevState => ({ currentStep: prevState.currentStep + 1 }), () => {
// स्टेट अपडेट और कॉम्पोनेंट फिर से रेंडर होने के बाद, अगले इनपुट पर फोकस करें
if (nextRef.current) {
nextRef.current.focus();
}
});
};

render() {
const { currentStep } = this.state;
const formSectionStyle = { border: '1px solid #0056b3', padding: '20px', margin: '15px 0', borderRadius: '8px', background: '#e7f0fa' };
const inputStyle = { width: '100%', padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px' };
const buttonStyle = { padding: '10px 20px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginTop: '10px' };

return (
<div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', borderRadius: '10px', background: 'white' }}>
<h2>Ref-प्रबंधित फोकस के साथ बहु-चरणीय फॉर्म</h2>
<p>वर्तमान चरण: <strong>{currentStep}</strong></p>

{currentStep === 1 && (
<div style={formSectionStyle}>
<h3>व्यक्तिगत विवरण</h3>
<label htmlFor="firstName">पहला नाम:</label>
<input id="firstName" type="text" ref={this.firstNameRef} style={inputStyle} placeholder="उदा., जॉन" />

<label htmlFor="lastName">अंतिम नाम:</label>
<input id="lastName" type="text" ref={this.lastNameRef} style={inputStyle} placeholder="उदा., डो" />

<button onClick={() => this.handleNextStep(this.emailRef)} style={buttonStyle}>अगला &rarr;</button>
</div>
)}

{currentStep === 2 && (
<div style={formSectionStyle}>
<h3>संपर्क जानकारी</h3>
<label htmlFor="email">ईमेल:</label>
<input id="email" type="email" ref={this.emailRef} style={inputStyle} placeholder="उदा., john.doe@example.com" />

<p>... अन्य संपर्क फ़ील्ड ...</p>

<button onClick={() => alert('फॉर्म सबमिट किया गया!')} style={buttonStyle}>सबमिट करें</button>
</div>
)}

<p><em>यह इंटरेक्शन पहुंच और उपयोगकर्ता अनुभव को महत्वपूर्ण रूप से बढ़ाता है, खासकर उन उपयोगकर्ताओं के लिए जो विश्व स्तर पर कीबोर्ड नेविगेशन या सहायक तकनीकों पर निर्भर हैं।</em></p>
</div>
);
}
}

यह उदाहरण एक व्यावहारिक बहु-चरणीय फॉर्म दिखाता है जहां createRef का उपयोग फोकस को प्रोग्रामेटिक रूप से प्रबंधित करने के लिए किया जाता है। यह एक सहज और सुलभ उपयोगकर्ता यात्रा सुनिश्चित करता है, जो विविध भाषाई और सांस्कृतिक संदर्भों में उपयोग किए जाने वाले अनुप्रयोगों के लिए एक महत्वपूर्ण विचार है। इसी तरह, मीडिया प्लेयर के लिए, refs आपको कस्टम नियंत्रण (प्ले, पॉज़, वॉल्यूम, सीक) बनाने की अनुमति देते हैं जो सीधे HTML5 <video> या <audio> एलिमेंट्स के देशी API के साथ इंटरैक्ट करते हैं, जो ब्राउज़र डिफ़ॉल्ट से स्वतंत्र एक सुसंगत अनुभव प्रदान करते हैं।

2. इम्परेटिव एनिमेशन और कैनवास इंटरेक्शन को ट्रिगर करना

जबकि डिक्लेरेटिव एनिमेशन लाइब्रेरी कई UI प्रभावों के लिए उत्कृष्ट हैं, कुछ उन्नत एनिमेशन, विशेष रूप से HTML5 कैनवास API, WebGL का लाभ उठाने वाले, या एलिमेंट गुणों पर बारीक नियंत्रण की आवश्यकता वाले जिन्हें रिएक्ट के रेंडर चक्र के बाहर सबसे अच्छा प्रबंधित किया जाता है, refs से बहुत लाभ उठाते हैं। उदाहरण के लिए, एक कैनवास एलिमेंट पर एक रीयल-टाइम डेटा विज़ुअलाइज़ेशन या एक गेम बनाना सीधे एक पिक्सेल बफर पर ड्राइंग करना शामिल है, जो एक स्वाभाविक रूप से इम्परेटिव प्रक्रिया है।

import React from 'react';

class CanvasAnimator extends React.Component {
constructor(props) {
super(props);
this.canvasRef = React.createRef();
this.animationFrameId = null;
}

componentDidMount() {
this.startAnimation();
}

componentWillUnmount() {
this.stopAnimation();
}

startAnimation = () => {
const canvas = this.canvasRef.current;
if (!canvas) return;

const ctx = canvas.getContext('2d');
let angle = 0;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height); // कैनवास साफ़ करें

// एक घूमता हुआ वर्ग बनाएं
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle);
ctx.fillStyle = '#6f42c1';
ctx.fillRect(-radius / 2, -radius / 2, radius, radius);
ctx.restore();

angle += 0.05; // रोटेशन के लिए कोण बढ़ाएं

this.animationFrameId = requestAnimationFrame(animate);
};

this.animationFrameId = requestAnimationFrame(animate);
};

stopAnimation = () => {
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #ced4da', padding: '20px', borderRadius: '8px', background: '#f8f9fa' }}>
<h3>createRef के साथ इम्परेटिव कैनवास एनिमेशन</h3>
<p>यह कैनवास एनिमेशन सीधे एक ref के माध्यम से ब्राउज़र API का उपयोग करके नियंत्रित किया जाता है।</p>
<canvas ref={this.canvasRef} width="300" height="200" style={{ border: '1px solid #adb5bd', background: 'white' }}>
आपका ब्राउज़र HTML5 कैनवास टैग का समर्थन नहीं करता है।
</canvas>
<p><em>इस तरह का सीधा नियंत्रण उच्च-प्रदर्शन वाले ग्राफिक्स, गेम, या विश्व स्तर पर विभिन्न उद्योगों में उपयोग किए जाने वाले विशेष डेटा विज़ुअलाइज़ेशन के लिए महत्वपूर्ण है।</em></p>
</div>
);
}
}

यह कॉम्पोनेंट एक कैनवास एलिमेंट प्रदान करता है और उसके 2D रेंडरिंग कॉन्टेक्स्ट तक सीधी पहुंच प्राप्त करने के लिए एक ref का उपयोग करता है। एनिमेशन लूप, `requestAnimationFrame` द्वारा संचालित, फिर इम्परेटिव रूप से एक घूमते हुए वर्ग को बनाता और अपडेट करता है। यह पैटर्न इंटरैक्टिव डेटा डैशबोर्ड, ऑनलाइन डिज़ाइन टूल, या यहां तक कि आकस्मिक गेम बनाने के लिए मौलिक है जो उपयोगकर्ता के भौगोलिक स्थान या डिवाइस क्षमताओं की परवाह किए बिना, सटीक, फ्रेम-बाय-फ्रेम रेंडरिंग की मांग करते हैं।

3. थर्ड-पार्टी DOM लाइब्रेरी के साथ एकीकरण: एक निर्बाध ब्रिज

refs का उपयोग करने के सबसे सम्मोहक कारणों में से एक रिएक्ट को बाहरी जावास्क्रिप्ट लाइब्रेरी के साथ एकीकृत करना है जो सीधे DOM को मैनिपुलेट करती हैं। कई शक्तिशाली लाइब्रेरी, विशेष रूप से पुरानी या विशिष्ट रेंडरिंग कार्यों पर केंद्रित (जैसे चार्टिंग, मैपिंग, या रिच टेक्स्ट एडिटिंग), एक DOM एलिमेंट को एक लक्ष्य के रूप में लेकर और फिर उसकी सामग्री को स्वयं प्रबंधित करके काम करती हैं। रिएक्ट, अपने डिक्लेरेटिव मोड में, अन्यथा उसी DOM सबट्री को नियंत्रित करने का प्रयास करके इन लाइब्रेरी के साथ संघर्ष करेगा। Refs बाहरी लाइब्रेरी के लिए एक निर्दिष्ट 'कंटेनर' प्रदान करके इस संघर्ष को रोकते हैं।

import React from 'react';
import * as d3 from 'd3'; // यह मानते हुए कि D3.js इंस्टॉल और आयातित है

class D3BarChart extends React.Component {
constructor(props) {
super(props);
this.chartContainerRef = React.createRef();
}

// जब कॉम्पोनेंट माउंट होता है, तो चार्ट बनाएं
componentDidMount() {
this.drawChart();
}

// जब कॉम्पोनेंट अपडेट होता है (जैसे, props.data बदलता है), चार्ट को अपडेट करें
componentDidUpdate(prevProps) {
if (prevProps.data !== this.props.data) {
this.drawChart();
}
}

// जब कॉम्पोनेंट अनमाउंट होता है, तो मेमोरी लीक को रोकने के लिए D3 एलिमेंट्स को साफ करें
componentWillUnmount() {
d3.select(this.chartContainerRef.current).selectAll('*').remove();
}

drawChart = () => {
const data = this.props.data || [40, 80, 20, 100, 60, 90]; // डिफ़ॉल्ट डेटा
const node = this.chartContainerRef.current;
if (!node) return; // सुनिश्चित करें कि ref उपलब्ध है

// D3 द्वारा बनाए गए किसी भी पिछले चार्ट एलिमेंट्स को साफ़ करें
d3.select(node).selectAll('*').remove();

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 460 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

const svg = d3.select(node)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);

// स्केल सेट अप करें
const x = d3.scaleBand()
.range([0, width])
.padding(0.1);

const y = d3.scaleLinear()
.range([height, 0]);

x.domain(data.map((d, i) => i)); // सरलता के लिए डोमेन के रूप में इंडेक्स का उपयोग करें
y.domain([0, d3.max(data)]);

// बार जोड़ें
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', (d, i) => x(i))
.attr('width', x.bandwidth())
.attr('y', d => y(d))
.attr('height', d => height - y(d))
.attr('fill', '#17a2b8');

// X अक्ष जोड़ें
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));

// Y अक्ष जोड़ें
svg.append('g')
.call(d3.axisLeft(y));
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #00a0b2', padding: '20px', borderRadius: '8px', background: '#e0f7fa' }}>
<h3>रिएक्ट createRef के साथ D3.js चार्ट एकीकरण</h3>
<p>यह डेटा विज़ुअलाइज़ेशन D3.js द्वारा एक रिएक्ट-प्रबंधित कंटेनर के भीतर रेंडर किया गया है।</p>
<div ref={this.chartContainerRef} /> // D3.js इस div में रेंडर करेगा
<p><em>ऐसी विशेष लाइब्रेरी को एकीकृत करना डेटा-भारी अनुप्रयोगों के लिए महत्वपूर्ण है, जो विभिन्न उद्योगों और क्षेत्रों में उपयोगकर्ताओं को शक्तिशाली विश्लेषणात्मक उपकरण प्रदान करता है।</em></p>
</div>
);
}
}

यह विस्तृत उदाहरण एक रिएक्ट क्लास कॉम्पोनेंट के भीतर एक D3.js बार चार्ट के एकीकरण को प्रदर्शित करता है। chartContainerRef D3.js को उस विशिष्ट DOM नोड के साथ प्रदान करता है जिसकी उसे अपनी रेंडरिंग करने की आवश्यकता होती है। रिएक्ट कंटेनर <div> के जीवनचक्र को संभालता है, जबकि D3.js इसकी आंतरिक सामग्री का प्रबंधन करता है। `componentDidUpdate` और `componentWillUnmount` विधियां डेटा बदलने पर चार्ट को अपडेट करने और आवश्यक सफाई करने के लिए महत्वपूर्ण हैं, मेमोरी लीक को रोकने और एक उत्तरदायी अनुभव सुनिश्चित करने के लिए। यह पैटर्न सार्वभौमिक रूप से लागू है, जो डेवलपर्स को वैश्विक डैशबोर्ड और एनालिटिक्स प्लेटफॉर्म के लिए रिएक्ट के कॉम्पोनेंट मॉडल और विशेष, उच्च-प्रदर्शन विज़ुअलाइज़ेशन लाइब्रेरी दोनों का सर्वश्रेष्ठ लाभ उठाने की अनुमति देता है।

4. गतिशील लेआउट के लिए एलिमेंट आयामों या स्थिति को मापना

अत्यधिक गतिशील या उत्तरदायी लेआउट के लिए, या वर्चुअलाइज्ड सूचियों जैसी सुविधाओं को लागू करने के लिए जो केवल दृश्यमान आइटम रेंडर करते हैं, एलिमेंट्स के सटीक आयामों और स्थिति को जानना महत्वपूर्ण है। Refs आपको getBoundingClientRect() विधि तक पहुंचने की अनुमति देते हैं, जो यह महत्वपूर्ण जानकारी सीधे DOM से प्रदान करती है।

import React from 'react';

class ElementDimensionLogger extends React.Component {
constructor(props) {
super(props);
this.measurableDivRef = React.createRef();
this.state = {
width: 0,
height: 0,
top: 0,
left: 0,
message: 'मापने के लिए बटन पर क्लिक करें!'
};
}

componentDidMount() {
// प्रारंभिक माप अक्सर उपयोगी होता है, लेकिन उपयोगकर्ता क्रिया द्वारा भी ट्रिगर किया जा सकता है
this.measureElement();
// गतिशील लेआउट के लिए, आप विंडो आकार बदलने की घटनाओं को सुन सकते हैं
window.addEventListener('resize', this.measureElement);
}

componentWillUnmount() {
window.removeEventListener('resize', this.measureElement);
}

measureElement = () => {
if (this.measurableDivRef.current) {
const rect = this.measurableDivRef.current.getBoundingClientRect();
this.setState({
width: Math.round(rect.width),
height: Math.round(rect.height),
top: Math.round(rect.top),
left: Math.round(rect.left),
message: 'आयाम अपडेट किए गए।'
});
} else {
this.setState({ message: 'एलिमेंट अभी तक रेंडर नहीं हुआ है।' });
}
};

render() {
const { width, height, top, left, message } = this.state;
const boxStyle = {
width: '70%',
minHeight: '150px', border: '3px solid #ffc107', margin: '25px auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', background: '#fff3cd', borderRadius: '8px', textAlign: 'center' };
return (
<div style={{ maxWidth: '700px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', borderRadius: '10px', background: 'white' }}>
<h3>createRef के साथ एलिमेंट आयामों को मापना</h3>
<p>यह उदाहरण एक लक्ष्य एलिमेंट के आकार और स्थिति को गतिशील रूप से प्राप्त और प्रदर्शित करता है।</p>
<div ref={this.measurableDivRef} style={boxStyle}>
<p><strong>मैं वह एलिमेंट हूं जिसे मापा जा रहा है।</strong></p>
<p>अपने ब्राउज़र विंडो का आकार बदलें ताकि रिफ्रेश/मैन्युअल ट्रिगर पर माप बदलते देख सकें।</p>
</div>
<button
onClick={this.measureElement}
style={{ padding: '10px 20px', background: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginBottom: '15px' }}
>
अभी मापें
</button>
<div style={{ background: '#f0f0f0', padding: '15px', borderRadius: '6px' }}>
<p><strong>लाइव आयाम:</strong></p>
<ul style={{ listStyleType: 'none', padding: 0, textAlign: 'left', margin: '0 auto', maxWidth: '300px' }}>
<li>चौड़ाई: <b>{width}px</b></li>
<li>ऊंचाई: <b>{height}px</b></li>
<li>शीर्ष स्थिति (व्यूपोर्ट): <b>{top}px</b></li>
<li>बाईं स्थिति (व्यूपोर्ट): <b>{left}px</b></li>
</ul>
<p><em>विश्व स्तर पर विविध उपकरणों पर उत्तरदायी डिजाइन और प्रदर्शन को अनुकूलित करने के लिए सटीक एलिमेंट माप महत्वपूर्ण है।</em></p>
</div>
</div>
);
}
}

यह कॉम्पोनेंट एक div एलिमेंट का getBoundingClientRect() प्राप्त करने के लिए createRef का उपयोग करता है, जो इसके रीयल-टाइम आयाम और स्थिति प्रदान करता है। यह जानकारी जटिल लेआउट समायोजन को लागू करने, एक वर्चुअलाइज्ड स्क्रॉल सूची में दृश्यता का निर्धारण करने, या यहां तक कि यह सुनिश्चित करने के लिए कि एलिमेंट्स एक विशिष्ट व्यूपोर्ट क्षेत्र के भीतर हैं, के लिए अमूल्य है। एक वैश्विक दर्शकों के लिए, जहां स्क्रीन आकार, रिज़ॉल्यूशन और ब्राउज़र वातावरण बेतहाशा भिन्न होते हैं, वास्तविक DOM मापों के आधार पर सटीक लेआउट नियंत्रण एक सुसंगत और उच्च-गुणवत्ता वाले उपयोगकर्ता अनुभव प्रदान करने में एक महत्वपूर्ण कारक है।

`createRef` का उपयोग करने के लिए सर्वोत्तम प्रथाएं और चेतावनियां

जबकि createRef शक्तिशाली इम्परेटिव नियंत्रण प्रदान करता है, इसके दुरुपयोग से ऐसा कोड बन सकता है जिसे प्रबंधित करना और डीबग करना मुश्किल है। इसकी शक्ति का जिम्मेदारी से उपयोग करने के लिए सर्वोत्तम प्रथाओं का पालन करना आवश्यक है।

1. डिक्लेरेटिव दृष्टिकोणों को प्राथमिकता दें: सुनहरा नियम

हमेशा याद रखें कि refs एक "एस्केप हैच" हैं, रिएक्ट में इंटरेक्शन का प्राथमिक मोड नहीं। एक ref के लिए पहुंचने से पहले, अपने आप से पूछें: क्या यह स्टेट और प्रॉप्स के साथ प्राप्त किया जा सकता है? यदि उत्तर हां है, तो वह लगभग हमेशा बेहतर, अधिक "रिएक्ट-मुहावरेदार" दृष्टिकोण है। उदाहरण के लिए, यदि आप एक इनपुट का मान बदलना चाहते हैं, तो सीधे inputRef.current.value सेट करने के लिए एक ref का उपयोग करने के बजाय, स्टेट के साथ नियंत्रित कॉम्पोनेंट्स का उपयोग करें।

2. Refs इम्परेटिव इंटरेक्शन के लिए हैं, स्टेट प्रबंधन के लिए नहीं

Refs उन कार्यों के लिए सबसे उपयुक्त हैं जिनमें DOM एलिमेंट्स या कॉम्पोनेंट इंस्टेंस पर सीधी, इम्परेटिव क्रियाएं शामिल हैं। वे कमांड हैं: "इस इनपुट पर फोकस करें," "यह वीडियो चलाएं," "इस अनुभाग पर स्क्रॉल करें।" वे स्टेट के आधार पर एक कॉम्पोनेंट के डिक्लेरेटिव UI को बदलने के लिए नहीं हैं। एक ref के माध्यम से सीधे एक एलिमेंट की शैली या सामग्री में हेरफेर करना जब वह प्रॉप्स या स्टेट द्वारा नियंत्रित किया जा सकता है, तो रिएक्ट के वर्चुअल DOM को वास्तविक DOM के साथ सिंक से बाहर कर सकता है, जिससे अप्रत्याशित व्यवहार और रेंडरिंग समस्याएं हो सकती हैं।

3. Refs और फंक्शनल कॉम्पोनेंट्स: `useRef` और `forwardRef` को अपनाएं

फंक्शनल कॉम्पोनेंट्स के भीतर आधुनिक रिएक्ट डेवलपमेंट के लिए, React.createRef() वह उपकरण नहीं है जिसका आप उपयोग करेंगे। इसके बजाय, आप useRef हुक पर भरोसा करेंगे। useRef हुक createRef के समान एक म्यूटेबल ref ऑब्जेक्ट प्रदान करता है, जिसकी .current प्रॉपर्टी का उपयोग समान इम्परेटिव इंटरेक्शन के लिए किया जा सकता है। यह कॉम्पोनेंट के फिर से रेंडर होने पर अपने मान को बनाए रखता है, बिना खुद को फिर से रेंडर किए, जिससे यह एक DOM नोड या किसी भी म्यूटेबल मान को रखने के लिए एकदम सही है जिसे रेंडर के पार बने रहने की आवश्यकता है।

import React, { useRef, useEffect } from 'react';

function FunctionalComponentWithRef() {
const myInputRef = useRef(null); // null के साथ इनिशियलाइज़ करें

useEffect(() => {
// यह कॉम्पोनेंट माउंट होने के बाद चलता है
if (myInputRef.current) {
myInputRef.current.focus();
console.log('फंक्शनल कॉम्पोनेंट इनपुट फोकस्ड!');
}
}, []); // खाली निर्भरता सरणी यह सुनिश्चित करती है कि यह माउंट पर केवल एक बार चले

const handleLogValue = () => {
if (myInputRef.current) {
alert(`इनपुट मान: ${myInputRef.current.value}`);
}
};

return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #009688', borderRadius: '8px', background: '#e0f2f1' }}>
<h3>एक फंक्शनल कॉम्पोनेंट में useRef का उपयोग करना</h3>
<label htmlFor="funcInput">कुछ टाइप करें:</label><br />
<input id="funcInput" type="text" ref={myInputRef} placeholder="मैं ऑटो-फोकस्ड हूं!" style={{ padding: '8px', margin: '10px 0', borderRadius: '4px', border: '1px solid #ccc' }} /><br />
<button onClick={handleLogValue} style={{ padding: '10px 15px', background: '#009688', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
इनपुट मान लॉग करें
</button>
<p><em>नई परियोजनाओं के लिए, `useRef` फंक्शनल कॉम्पोनेंट्स में refs के लिए मुहावरेदार विकल्प है।</em></p>
</div>
);
}

यदि आपको एक पैरेंट कॉम्पोनेंट को एक फंक्शनल चाइल्ड कॉम्पोनेंट के अंदर एक DOM एलिमेंट का ref प्राप्त करने की आवश्यकता है, तो React.forwardRef आपका समाधान है। यह एक हायर-ऑर्डर कॉम्पोनेंट है जो आपको एक पैरेंट से उसके बच्चों में से एक के DOM एलिमेंट्स में एक ref को "फॉरवर्ड" करने की अनुमति देता है, फंक्शनल कॉम्पोनेंट के एनकैप्सुलेशन को बनाए रखते हुए अभी भी आवश्यकता पड़ने पर इम्परेटिव पहुंच को सक्षम करता है।

import React, { useRef, useEffect } from 'react';

// फंक्शनल कॉम्पोनेंट जो स्पष्ट रूप से अपने देशी इनपुट एलिमेंट को एक ref फॉरवर्ड करता है
const ForwardedInput = React.forwardRef((props, ref) => (
<input type="text" ref={ref} className="forwarded-input" placeholder={props.placeholder} style={{ padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px', width: '100%' }} />
));

class ParentComponentUsingForwardRef extends React.Component {
constructor(props) {
super(props);
this.parentInputRef = React.createRef();
}

componentDidMount() {
if (this.parentInputRef.current) {
this.parentInputRef.current.focus();
console.log('फंक्शनल कॉम्पोनेंट के अंदर का इनपुट पैरेंट (क्लास कॉम्पोनेंट) से फॉरवर्ड किए गए ref के माध्यम से फोकस्ड है!');
}
}

render() {
return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #6f42c1', borderRadius: '8px', background: '#f5eef9' }}>
<h3>createRef के साथ Ref फॉरवर्डिंग उदाहरण (पैरेंट क्लास कॉम्पोनेंट)</h3>
<label>विवरण दर्ज करें:</label>
<ForwardedInput ref={this.parentInputRef} placeholder="यह इनपुट एक फंक्शनल कॉम्पोनेंट के अंदर है" />
<p><em>यह पैटर्न पुन: प्रयोज्य कॉम्पोनेंट लाइब्रेरी बनाने के लिए महत्वपूर्ण है जिन्हें सीधे DOM पहुंच को उजागर करने की आवश्यकता होती है।</em></p>
</div>
);
}
}

यह दर्शाता है कि कैसे createRef का उपयोग करने वाला एक क्लास कॉम्पोनेंट forwardRef का लाभ उठाकर एक फंक्शनल कॉम्पोनेंट के भीतर नेस्टेड एक DOM एलिमेंट के साथ प्रभावी ढंग से इंटरैक्ट कर सकता है। यह फंक्शनल कॉम्पोनेंट्स को आवश्यकता पड़ने पर इम्परेटिव इंटरेक्शन में समान रूप से भाग लेने में सक्षम बनाता है, यह सुनिश्चित करता है कि आधुनिक रिएक्ट कोडबेस अभी भी refs से लाभ उठा सकते हैं।

4. Refs का उपयोग कब न करें: रिएक्ट की अखंडता बनाए रखना

• चाइल्ड कॉम्पोनेंट स्टेट को नियंत्रित करने के लिए: कभी भी एक चाइल्ड कॉम्पोनेंट की स्टेट को सीधे पढ़ने या अपडेट करने के लिए ref का उपयोग न करें। यह रिएक्ट के स्टेट प्रबंधन को बायपास करता है, जिससे आपका एप्लिकेशन अप्रत्याशित हो जाता है। इसके बजाय, स्टेट को प्रॉप्स के रूप में नीचे पास करें, और बच्चों को माता-पिता से स्टेट परिवर्तन का अनुरोध करने की अनुमति देने के लिए कॉलबैक का उपयोग करें।
• प्रॉप्स के प्रतिस्थापन के रूप में: जबकि आप एक ref के माध्यम से एक चाइल्ड क्लास कॉम्पोनेंट पर तरीकों को कॉल कर सकते हैं, विचार करें कि क्या बच्चे को एक इवेंट हैंडलर को प्रॉप के रूप में पास करना एक अधिक "रिएक्ट-मुहावरेदार" तरीके से समान लक्ष्य प्राप्त करेगा। प्रॉप्स स्पष्ट डेटा प्रवाह को बढ़ावा देते हैं और कॉम्पोनेंट इंटरेक्शन को पारदर्शी बनाते हैं।
• सरल DOM मैनिपुलेशन के लिए जिसे रिएक्ट संभाल सकता है: यदि आप एक एलिमेंट के टेक्स्ट, स्टाइल को बदलना चाहते हैं, या स्टेट के आधार पर एक क्लास जोड़ना/हटाना चाहते हैं, तो इसे डिक्लेरेटिव रूप से करें। उदाहरण के लिए, एक क्लास active को टॉगल करने के लिए, इसे JSX में सशर्त रूप से लागू करें: <div className={isActive ? 'active' : ''}>, बजाय divRef.current.classList.add('active') के।

5. प्रदर्शन संबंधी विचार और वैश्विक पहुंच

जबकि createRef स्वयं प्रदर्शनकारी है, current का उपयोग करके किए गए संचालन के महत्वपूर्ण प्रदर्शन निहितार्थ हो सकते हैं। कम-अंत वाले उपकरणों या धीमी नेटवर्क कनेक्शन वाले उपयोगकर्ताओं के लिए (दुनिया के कई हिस्सों में आम), अकुशल DOM मैनिपुलेशन जंक, अनुत्तरदायी UI और खराब उपयोगकर्ता अनुभव का कारण बन सकता है। एनिमेशन, जटिल लेआउट गणना, या भारी थर्ड-पार्टी लाइब्रेरी को एकीकृत करने जैसे कार्यों के लिए refs का उपयोग करते समय:

• इवेंट्स को डिबाउंस/थ्रॉटल करें: यदि आप window.resize या scroll इवेंट्स पर आयामों को मापने के लिए refs का उपयोग कर रहे हैं, तो सुनिश्चित करें कि इन हैंडलर को अत्यधिक फ़ंक्शन कॉल और DOM रीड्स को रोकने के लिए डिबाउंस या थ्रॉटल किया गया है।
• बैच DOM रीड्स/राइट्स: DOM रीड ऑपरेशंस (जैसे, getBoundingClientRect()) को DOM राइट ऑपरेशंस (जैसे, स्टाइल सेट करना) के साथ इंटरलीव करने से बचें। यह लेआउट थ्रैशिंग को ट्रिगर कर सकता है। fastdom जैसे उपकरण इसे कुशलतापूर्वक प्रबंधित करने में मदद कर सकते हैं।
• गैर-महत्वपूर्ण संचालन को स्थगित करें: एनिमेशन के लिए requestAnimationFrame और कम महत्वपूर्ण DOM मैनिपुलेशन के लिए setTimeout(..., 0) या requestIdleCallback का उपयोग करें ताकि यह सुनिश्चित हो सके कि वे मुख्य थ्रेड को ब्लॉक न करें और जवाबदेही को प्रभावित न करें।
• समझदारी से चुनें: कभी-कभी, एक थर्ड-पार्टी लाइब्रेरी का प्रदर्शन एक बाधा हो सकता है। विकल्पों का मूल्यांकन करें या धीमी कनेक्शन वाले उपयोगकर्ताओं के लिए ऐसे कॉम्पोनेंट्स को आलसी-लोडिंग पर विचार करें, यह सुनिश्चित करते हुए कि एक आधारभूत अनुभव विश्व स्तर पर प्रदर्शनकारी बना रहे।

`createRef` बनाम कॉलबैक Refs बनाम `useRef`: एक विस्तृत तुलना

रिएक्ट ने अपने विकास के दौरान refs को संभालने के विभिन्न तरीके पेश किए हैं। प्रत्येक की बारीकियों को समझना आपके विशिष्ट संदर्भ के लिए सबसे उपयुक्त विधि चुनने की कुंजी है।

1. `React.createRef()` (क्लास कॉम्पोनेंट्स - आधुनिक)

• तंत्र: कॉम्पोनेंट इंस्टेंस के कंस्ट्रक्टर में एक ref ऑब्जेक्ट ({ current: null }) बनाता है। रिएक्ट माउंटिंग के बाद DOM एलिमेंट या कॉम्पोनेंट इंस्टेंस को .current प्रॉपर्टी को असाइन करता है।
• प्राथमिक उपयोग: विशेष रूप से क्लास कॉम्पोनेंट्स के भीतर। यह प्रति कॉम्पोनेंट इंस्टेंस एक बार इनिशियलाइज़ किया जाता है।
• Ref पॉपुलेशन: .current को कॉम्पोनेंट माउंट होने के बाद एलिमेंट/इंस्टेंस पर सेट किया जाता है, और अनमाउंट होने पर null पर रीसेट किया जाता है।
• इसके लिए सर्वश्रेष्ठ: क्लास कॉम्पोनेंट्स में सभी मानक ref आवश्यकताओं के लिए जहां आपको एक DOM एलिमेंट या एक चाइल्ड क्लास कॉम्पोनेंट इंस्टेंस को संदर्भित करने की आवश्यकता होती है।
• लाभ: स्पष्ट, सीधा ऑब्जेक्ट-ओरिएंटेड सिंटैक्स। इनलाइन फ़ंक्शन के फिर से निर्माण से अतिरिक्त कॉल होने की कोई चिंता नहीं (जैसा कि कॉलबैक refs के साथ हो सकता है)।
• नुकसान: फंक्शनल कॉम्पोनेंट्स के साथ प्रयोग करने योग्य नहीं। यदि कंस्ट्रक्टर में इनिशियलाइज़ नहीं किया गया है (जैसे, रेंडर में), तो हर रेंडर पर एक नया ref ऑब्जेक्ट बनाया जा सकता है, जिससे संभावित प्रदर्शन समस्याएं या गलत ref मान हो सकते हैं। एक इंस्टेंस प्रॉपर्टी को असाइन करना याद रखने की आवश्यकता है।

2. कॉलबैक Refs (क्लास और फंक्शनल कॉम्पोनेंट्स - लचीला/विरासत)

• तंत्र: आप सीधे ref प्रॉप को एक फ़ंक्शन पास करते हैं। रिएक्ट इस फ़ंक्शन को माउंटेड DOM एलिमेंट या कॉम्पोनेंट इंस्टेंस के साथ कॉल करता है, और बाद में null के साथ जब यह अनमाउंट हो जाता है।
• प्राथमिक उपयोग: क्लास और फंक्शनल दोनों कॉम्पोनेंट्स में इस्तेमाल किया जा सकता है। क्लास कॉम्पोनेंट्स में, कॉलबैक आमतौर पर this से बंधा होता है या एक एरो फ़ंक्शन क्लास प्रॉपर्टी के रूप में परिभाषित होता है। फंक्शनल कॉम्पोनेंट्स में, इसे अक्सर इनलाइन या मेमोइज़ किया जाता है।
• Ref पॉपुलेशन: कॉलबैक फ़ंक्शन को रिएक्ट द्वारा सीधे लागू किया जाता है। आप रेफरेंस को संग्रहीत करने के लिए जिम्मेदार हैं (जैसे, this.myInput = element;)।
• इसके लिए सर्वश्रेष्ठ: उन परिदृश्यों के लिए जिन्हें refs सेट और अनसेट होने पर अधिक बारीक नियंत्रण की आवश्यकता होती है, या गतिशील ref सूचियों जैसे उन्नत पैटर्न के लिए। यह createRef और useRef से पहले refs को प्रबंधित करने का प्राथमिक तरीका था।
• लाभ: अधिकतम लचीलापन प्रदान करता है। आपको ref तक तत्काल पहुंच प्रदान करता है जब यह उपलब्ध हो (कॉलबैक फ़ंक्शन के भीतर)। एलिमेंट्स के गतिशील संग्रह के लिए refs को एक सरणी या मानचित्र में संग्रहीत करने के लिए इस्तेमाल किया जा सकता है।
• नुकसान: यदि कॉलबैक को render विधि के भीतर इनलाइन परिभाषित किया गया है (जैसे, ref={el => this.myRef = el}), तो यह अपडेट के दौरान दो बार कॉल किया जाएगा (एक बार null के साथ, फिर एलिमेंट के साथ), जो प्रदर्शन समस्याओं या अप्रत्याशित दुष्प्रभावों का कारण बन सकता है यदि सावधानी से नहीं संभाला गया (जैसे, कॉलबैक को एक क्लास विधि बनाकर या फंक्शनल कॉम्पोनेंट्स में useCallback का उपयोग करके)।

class CallbackRefDetailedExample extends React.Component {
constructor(props) {
super(props);
this.inputElement = null;
}

// यह विधि रिएक्ट द्वारा ref सेट करने के लिए कॉल की जाएगी
setInputElementRef = element => {
if (element) {
console.log('Ref element is:', element);
}
this.inputElement = element; // वास्तविक DOM एलिमेंट स्टोर करें
};

componentDidMount() {
if (this.inputElement) {
this.inputElement.focus();
}
}

render() {
return (
<div>
<label>कॉलबैक Ref इनपुट:</label>
<input type="text" ref={this.setInputElementRef} />
</div>
);
}
}

3. `useRef` हुक (फंक्शनल कॉम्पोनेंट्स - आधुनिक)

• तंत्र: एक रिएक्ट हुक जो एक म्यूटेबल ref ऑब्जेक्ट ({ current: initialValue }) लौटाता है। लौटाया गया ऑब्जेक्ट फंक्शनल कॉम्पोनेंट के पूरे जीवनकाल के लिए बना रहता है।
• प्राथमिक उपयोग: विशेष रूप से फंक्शनल कॉम्पोनेंट्स के भीतर।
• Ref पॉपुलेशन: createRef के समान, रिएक्ट माउंटिंग के बाद DOM एलिमेंट या कॉम्पोनेंट इंस्टेंस (यदि फॉरवर्ड किया गया है) को .current प्रॉपर्टी को असाइन करता है और इसे अनमाउंट पर null पर सेट करता है। .current मान को मैन्युअल रूप से भी अपडेट किया जा सकता है।
• इसके लिए सर्वश्रेष्ठ: फंक्शनल कॉम्पोनेंट्स में सभी ref प्रबंधन। किसी भी म्यूटेबल मान को रखने के लिए भी उपयोगी है जिसे फिर से रेंडर को ट्रिगर किए बिना रेंडर के पार बने रहने की आवश्यकता है (जैसे, टाइमर आईडी, पिछले मान)।
• लाभ: सरल, हुक के लिए मुहावरेदार। ref ऑब्जेक्ट रेंडर के पार बना रहता है, फिर से निर्माण की समस्याओं से बचता है। किसी भी म्यूटेबल मान को संग्रहीत कर सकता है, न कि केवल DOM नोड्स को।
• नुकसान: केवल फंक्शनल कॉम्पोनेंट्स के भीतर काम करता है। जीवनचक्र-संबंधित ref इंटरेक्शन के लिए स्पष्ट useEffect की आवश्यकता है (जैसे माउंट पर फोकस करना)।

संक्षेप में:

• यदि आप एक क्लास कॉम्पोनेंट लिख रहे हैं और एक ref की आवश्यकता है, तो React.createRef() अनुशंसित और सबसे स्पष्ट विकल्प है।
• यदि आप एक फंक्शनल कॉम्पोनेंट लिख रहे हैं और एक ref की आवश्यकता है, तो useRef हुक आधुनिक, मुहावरेदार समाधान है।
• कॉलबैक refs अभी भी मान्य हैं लेकिन आम तौर पर अधिक शब्दाडंबरपूर्ण होते हैं और यदि सावधानी से लागू नहीं किए गए तो सूक्ष्म मुद्दों के लिए प्रवण होते हैं। वे उन्नत परिदृश्यों के लिए या पुरानी कोडबेस या संदर्भों के साथ काम करते समय उपयोगी होते हैं जहां हुक उपलब्ध नहीं हैं।
• कॉम्पोनेंट्स के माध्यम से refs पास करने के लिए (विशेषकर फंक्शनल वाले), React.forwardRef() आवश्यक है, जिसका उपयोग अक्सर पैरेंट कॉम्पोनेंट में createRef या useRef के साथ किया जाता है।

Refs के साथ वैश्विक विचार और उन्नत पहुंच

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

1. विविध उपकरणों और नेटवर्क के लिए प्रदर्शन अनुकूलन

बंडल आकार पर createRef का प्रभाव न्यूनतम है, क्योंकि यह रिएक्ट कोर का एक छोटा सा हिस्सा है। हालांकि, आप current प्रॉपर्टी के साथ जो ऑपरेशन करते हैं, उनके महत्वपूर्ण प्रदर्शन निहितार्थ हो सकते हैं। कम-अंत वाले उपकरणों या धीमी नेटवर्क कनेक्शन वाले उपयोगकर्ताओं के लिए (दुनिया के कई हिस्सों में आम), अकुशल DOM मैनिपुलेशन जंक, अनुत्तरदायी UI और खराब उपयोगकर्ता अनुभव का कारण बन सकता है। एनिमेशन, जटिल लेआउट गणना, या भारी थर्ड-पार्टी लाइब्रेरी को एकीकृत करने जैसे कार्यों के लिए refs का उपयोग करते समय:

• इवेंट्स को डिबाउंस/थ्रॉटल करें: यदि आप window.resize या scroll इवेंट्स पर आयामों को मापने के लिए refs का उपयोग कर रहे हैं, तो सुनिश्चित करें कि इन हैंडलर को अत्यधिक फ़ंक्शन कॉल और DOM रीड्स को रोकने के लिए डिबाउंस या थ्रॉटल किया गया है।
• बैच DOM रीड्स/राइट्स: DOM रीड ऑपरेशंस (जैसे, getBoundingClientRect()) को DOM राइट ऑपरेशंस (जैसे, स्टाइल सेट करना) के साथ इंटरलीव करने से बचें। यह लेआउट थ्रैशिंग को ट्रिगर कर सकता है। fastdom जैसे उपकरण इसे कुशलतापूर्वक प्रबंधित करने में मदद कर सकते हैं।
• गैर-महत्वपूर्ण संचालन को स्थगित करें: एनिमेशन के लिए requestAnimationFrame और कम महत्वपूर्ण DOM मैनिपुलेशन के लिए setTimeout(..., 0) या requestIdleCallback का उपयोग करें ताकि यह सुनिश्चित हो सके कि वे मुख्य थ्रेड को ब्लॉक न करें और जवाबदेही को प्रभावित न करें।
• समझदारी से चुनें: कभी-कभी, एक थर्ड-पार्टी लाइब्रेरी का प्रदर्शन एक बाधा हो सकता है। विकल्पों का मूल्यांकन करें या धीमी कनेक्शन वाले उपयोगकर्ताओं के लिए ऐसे कॉम्पोनेंट्स को आलसी-लोडिंग पर विचार करें, यह सुनिश्चित करते हुए कि एक आधारभूत अनुभव विश्व स्तर पर प्रदर्शनकारी बना रहे।

2. पहुंच बढ़ाना (ARIA एट्रिब्यूट्स और कीबोर्ड नेविगेशन)

Refs अत्यधिक सुलभ वेब एप्लिकेशन बनाने में सहायक होते हैं, खासकर जब कस्टम UI कॉम्पोनेंट्स बनाते हैं जिनके पास देशी ब्राउज़र समकक्ष नहीं होते हैं या जब डिफ़ॉल्ट व्यवहार को ओवरराइड करते हैं। एक वैश्विक दर्शकों के लिए, वेब सामग्री पहुंच दिशानिर्देशों (WCAG) का पालन न केवल अच्छी प्रथा है, बल्कि अक्सर एक कानूनी आवश्यकता भी है। Refs सक्षम करते हैं:

• प्रोग्रामेटिक फोकस प्रबंधन: जैसा कि इनपुट फ़ील्ड के साथ देखा गया है, refs आपको फोकस सेट करने की अनुमति देते हैं, जो कीबोर्ड उपयोगकर्ताओं और स्क्रीन रीडर नेविगेशन के लिए महत्वपूर्ण है। इसमें मोडल, ड्रॉपडाउन मेनू, या इंटरैक्टिव विजेट्स के भीतर फोकस का प्रबंधन शामिल है।
• गतिशील ARIA एट्रिब्यूट्स: आप DOM एलिमेंट्स पर ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) एट्रिब्यूट्स (जैसे, aria-expanded, aria-controls, aria-live) को गतिशील रूप से जोड़ने या अपडेट करने के लिए refs का उपयोग कर सकते हैं। यह सहायक तकनीकों को सिमेंटिक जानकारी प्रदान करता है जो अकेले विज़ुअल UI से अनुमान लगाने योग्य नहीं हो सकती है।

  class CollapsibleSection extends React.Component {
  constructor(props) {
  super(props);
  this.buttonRef = React.createRef();
  this.state = { isExpanded: false };
  }
  
  toggleExpanded = () => {
  this.setState(prevState => ({ isExpanded: !prevState.isExpanded }), () => {
  if (this.buttonRef.current) {
  // स्टेट के आधार पर ARIA एट्रिब्यूट को गतिशील रूप से अपडेट करें
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  });
  };
  
  componentDidMount() {
  if (this.buttonRef.current) {
  this.buttonRef.current.setAttribute('aria-controls', `section-${this.props.id}`);
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  }
  
  render() {
  const { id, title, children } = this.props;
  const { isExpanded } = this.state;
  return (
  <div style={{ margin: '20px auto', maxWidth: '600px', border: '1px solid #0056b3', borderRadius: '8px', background: '#e7f0fa', overflow: 'hidden' }}>
  <h4>
  <button
  ref={this.buttonRef} // ARIA एट्रिब्यूट्स के लिए बटन का Ref
  onClick={this.toggleExpanded}
  style={{ background: 'none', border: 'none', padding: '15px 20px', width: '100%', textAlign: 'left', cursor: 'pointer', fontSize: '1.2em', color: '#0056b3', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
  id={`section-header-${id}`}
  >
  {title} <span>▼</span>
  </button>
  </h4>
  {isExpanded && (
  <div id={`section-${id}`} role="region" aria-labelledby={`section-header-${id}`} style={{ padding: '0 20px 20px', borderTop: '1px solid #a7d9f7' }}>
  {children}
  </div>
  )}
  </div>
  );
  }
  }

• कीबोर्ड इंटरेक्शन नियंत्रण: कस्टम ड्रॉपडाउन, स्लाइडर, या अन्य इंटरैक्टिव एलिमेंट्स के लिए, आपको विशिष्ट कीबोर्ड इवेंट हैंडलर (जैसे, एक सूची के भीतर नेविगेशन के लिए तीर कुंजी) को लागू करने की आवश्यकता हो सकती है। Refs लक्ष्य DOM एलिमेंट तक पहुंच प्रदान करते हैं जहां इन इवेंट श्रोताओं को जोड़ा और प्रबंधित किया जा सकता है।

refs को सोच-समझकर लागू करके, डेवलपर्स यह सुनिश्चित कर सकते हैं कि उनके एप्लिकेशन दुनिया भर में विकलांग लोगों के लिए प्रयोग करने योग्य और समावेशी हैं, जिससे उनकी वैश्विक पहुंच और प्रभाव में काफी विस्तार होता है।

3. अंतर्राष्ट्रीयकरण (I18n) और स्थानीयकृत इंटरेक्शन

अंतर्राष्ट्रीयकरण (i18n) के साथ काम करते समय, refs एक सूक्ष्म लेकिन महत्वपूर्ण भूमिका निभा सकते हैं। उदाहरण के लिए, उन भाषाओं में जो दाएं-से-बाएं (RTL) स्क्रिप्ट (जैसे अरबी, हिब्रू, या फ़ारसी) का उपयोग करती हैं, प्राकृतिक टैब क्रम और स्क्रॉल दिशा बाएं-से-दाएं (LTR) भाषाओं से भिन्न हो सकती है। यदि आप refs का उपयोग करके प्रोग्रामेटिक रूप से फोकस या स्क्रॉलिंग का प्रबंधन कर रहे हैं, तो यह सुनिश्चित करना महत्वपूर्ण है कि आपका तर्क दस्तावेज़ या एलिमेंट की टेक्स्ट दिशा (dir एट्रिब्यूट) का सम्मान करता है।

• RTL-जागरूक फोकस प्रबंधन: जबकि ब्राउज़र आम तौर पर RTL के लिए डिफ़ॉल्ट टैब क्रम को सही ढंग से संभालते हैं, यदि आप कस्टम फोकस ट्रैप या अनुक्रमिक फोकसिंग लागू कर रहे हैं, तो एक सुसंगत और सहज अनुभव सुनिश्चित करने के लिए RTL वातावरण में अपने ref-आधारित तर्क का पूरी तरह से परीक्षण करें।
• RTL में लेआउट मापन: एक ref के माध्यम से getBoundingClientRect() का उपयोग करते समय, ध्यान रखें कि left और right गुण व्यूपोर्ट के सापेक्ष हैं। लेआउट गणना के लिए जो दृश्य प्रारंभ/अंत पर निर्भर करती हैं, RTL लेआउट के लिए अपने तर्क को समायोजित करने के लिए document.dir या एलिमेंट की गणना की गई शैली पर विचार करें।
• थर्ड-पार्टी लाइब्रेरी एकीकरण: सुनिश्चित करें कि refs के माध्यम से एकीकृत कोई भी थर्ड-पार्टी लाइब्रेरी (जैसे, चार्टिंग लाइब्रेरी) स्वयं i18n-जागरूक हैं और यदि आपका एप्लिकेशन उनका समर्थन करता है तो RTL लेआउट को सही ढंग से संभालती हैं। यह सुनिश्चित करने की जिम्मेदारी अक्सर उस डेवलपर पर आती है जो लाइब्रेरी को एक रिएक्ट कॉम्पोनेंट में एकीकृत कर रहा है।

निष्कर्ष: वैश्विक अनुप्रयोगों के लिए `createRef` के साथ इम्परेटिव नियंत्रण में महारत हासिल करना

React.createRef() रिएक्ट में सिर्फ एक "एस्केप हैच" से कहीं अधिक है; यह एक महत्वपूर्ण उपकरण है जो रिएक्ट के शक्तिशाली डिक्लेरेटिव पैराडाइम और ब्राउज़र DOM इंटरेक्शन की इम्परेटिव वास्तविकताओं के बीच की खाई को पाटता है। जबकि नए फंक्शनल कॉम्पोनेंट्स में इसकी भूमिका काफी हद तक useRef हुक द्वारा ले ली गई है, createRef क्लास कॉम्पोनेंट्स के भीतर refs को प्रबंधित करने का मानक और सबसे मुहावरेदार तरीका बना हुआ है, जो अभी भी दुनिया भर में कई उद्यम अनुप्रयोगों का एक बड़ा हिस्सा हैं।

इसके निर्माण, अटैचमेंट और .current प्रॉपर्टी की महत्वपूर्ण भूमिका को अच्छी तरह से समझकर, डेवलपर्स आत्मविश्वास से प्रोग्रामेटिक फोकस प्रबंधन, प्रत्यक्ष मीडिया नियंत्रण, विविध थर्ड-पार्टी लाइब्रेरी (D3.js चार्ट से लेकर कस्टम रिच टेक्स्ट एडिटर तक) के साथ सहज एकीकरण, और सटीक एलिमेंट आयाम माप जैसी चुनौतियों का सामना कर सकते हैं। ये क्षमताएं सिर्फ तकनीकी करतब नहीं हैं; वे ऐसे एप्लिकेशन बनाने के लिए मौलिक हैं जो वैश्विक उपयोगकर्ताओं, उपकरणों और सांस्कृतिक संदर्भों के एक विशाल स्पेक्ट्रम में प्रदर्शनकारी, सुलभ और उपयोगकर्ता के अनुकूल हैं।

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

आगे सीखना और अन्वेषण

• Refs पर रिएक्ट आधिकारिक दस्तावेज़: स्रोत से सीधे सबसे अद्यतित जानकारी के लिए, <em>https://react.dev/learn/manipulating-the-dom-with-refs</em> से परामर्श करें
• रिएक्ट के `useRef` हुक को समझना: फंक्शनल कॉम्पोनेंट समकक्ष में गहराई से उतरने के लिए, <em>https://react.dev/reference/react/useRef</em> का अन्वेषण करें
• `forwardRef` के साथ Ref फॉरवर्डिंग: जानें कि कॉम्पोनेंट्स के माध्यम से refs को प्रभावी ढंग से कैसे पास करें: <em>https://react.dev/reference/react/forwardRef</em>
• वेब सामग्री पहुंच दिशानिर्देश (WCAG): वैश्विक वेब डेवलपमेंट के लिए आवश्यक: <em>https://www.w3.org/WAI/WCAG22/quickref/</em>
• रिएक्ट प्रदर्शन अनुकूलन: उच्च-प्रदर्शन वाले ऐप्स के लिए सर्वोत्तम प्रथाएं: <em>https://react.dev/learn/optimizing-performance</em>