घटक संघर्ष से बचने के लिए रिएक्ट कुंजियों का उपयोग कैसे करें

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

एक विशेष बग तब उत्पन्न होता है जब आप एक ही घटक को विभिन्न गुणों के साथ सशर्त रूप से प्रस्तुत करते हैं। इस बग का विस्तार से अन्वेषण करें और जानें कि इसे हल करने के लिए रिएक्ट कुंजियों का उपयोग कैसे करें।

प्रतिक्रिया घटक हमेशा स्वतंत्र नहीं होते हैं

इसका सीधा वाक्यविन्यास मुख्य कारणों में से एक है आपको रिएक्ट सीखना चाहिए. लेकिन, कई फायदों के बावजूद, फ्रेमवर्क बग्स से रहित नहीं है।

जिस बग के बारे में आप यहां जानेंगे वह तब होता है जब आप सशर्त रूप से एक ही घटक को प्रस्तुत कर रहे होते हैं, लेकिन इसे अलग-अलग प्रॉप्स पास कर रहे होते हैं।

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

प्रदर्शित करने के लिए, यह उदाहरण लें। सबसे पहले, आपके पास निम्नलिखित है विरोध करना अवयव:

import { useState, useEffect } from"react"
exportfunctionCounter({name}) {
const [count, setCount] = useState(0)
return(


{name}</div>
 setCount(c => c - 1)}> - </button>


 setCount(c => c + 1)}> + </button>
 </div>
 )
}

यह विरोध करना घटक स्वीकार करता है a नाम ऑब्जेक्ट डिस्ट्रक्चरिंग के माध्यम से पैरेंट से, जो एक तरीका है रिएक्ट में प्रॉप्स का उपयोग करें. फिर यह नाम को a में प्रस्तुत करता है. यह दो बटन भी लौटाता है: एक घटाने के लिए गिनती करना राज्य में और दूसरा इसे बढ़ाने के लिए।

ध्यान रखें कि उपरोक्त कोड में कुछ भी गलत नहीं है। बग निम्नलिखित कोड ब्लॉक (ऐप घटक) से आता है, जो काउंटर का उपयोग करता है:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <Countername="Kingsley" />: <Countername="Sally" /> }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

डिफ़ॉल्ट रूप से, उपरोक्त कोड किंग्सले नामक काउंटर को प्रस्तुत करता है। यदि आप काउंटर को पांच तक बढ़ाते हैं और क्लिक करते हैं बदलना बटन, यह सैली नामक दूसरा काउंटर प्रस्तुत करेगा।

लेकिन समस्या यह है कि आपके द्वारा उन्हें बदलने के बाद काउंटर अपनी डिफ़ॉल्ट स्थिति शून्य पर रीसेट नहीं होगा।

यह बग इसलिए होता है क्योंकि दोनों राज्य समान तत्वों को समान क्रम में प्रस्तुत करते हैं। रिएक्ट को यह नहीं पता कि "किंग्सले" काउंटर "सैली" काउंटर से अलग है। फर्क सिर्फ इतना है नाम प्रोप लेकिन, दुर्भाग्य से, रिएक्ट तत्वों को अलग करने के लिए इसका उपयोग नहीं करता है।

आप इस समस्या से दो तरह से निजात पा सकते हैं। पहला है अपने DOM को बदलना और दोनों पेड़ों को अलग बनाना। इसके लिए आवश्यक है कि आप समझें DOM क्या है. उदाहरण के लिए, आप पहले काउंटर को a के अंदर लपेट सकते हैं तत्व और दूसरा a के अंदर तत्व:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return (


 { isKingsley? 
 (<div>
"Kingsley" /> 
 </div>)
: 
 (<section>
"Sally" /> 
 </section>)
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

यदि आप "किंग्सले" काउंटर बढ़ाते हैं और क्लिक करते हैं बदलना, स्थिति 0 पर रीसेट हो जाती है। फिर, ऐसा इसलिए होता है क्योंकि दो DOM पेड़ों की संरचना अलग-अलग है।

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

हो सकता है कि आप हमेशा अपने मार्कअप की संरचना को इस तरह बदलना न चाहें। इस बग को हल करने का दूसरा तरीका अलग-अलग मार्कअप की आवश्यकता से बचाता है।

किसी ताज़ा घटक को प्रस्तुत करने के लिए कुंजियों का उपयोग करना

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

प्रत्येक काउंटर पर एक कुंजी जोड़ें, जैसे:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? 
"Kingsley" name="Kingsley" />: 
"Sally" name="Sally" /> 
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

अब, जब आप "किंग्सले" काउंटर बढ़ाते हैं और क्लिक करते हैं बदलना, रिएक्ट एक नया काउंटर प्रस्तुत करता है और स्थिति को शून्य पर रीसेट करता है।

जब आप एक ही प्रकार के आइटमों की एक श्रृंखला प्रस्तुत करते हैं तो आपको कुंजियों का भी उपयोग करना चाहिए, क्योंकि रिएक्ट को प्रत्येक आइटम के बीच अंतर का पता नहीं चलेगा।

exportdefaultfunctionApp() {
const names = ["Kingsley", "John", "Ahmed"]
return(


 { names.map((name, index) => {
return<Counterkey={index}name={name} />
 })}
 </div>
 )
}

जब आप कुंजी निर्दिष्ट करते हैं, तो रिएक्ट प्रत्येक आइटम के साथ एक अलग काउंटर संबद्ध करेगा। इस तरह, यह आपके द्वारा सरणी में किए गए किसी भी बदलाव को प्रतिबिंबित कर सकता है।

एक और उन्नत कुंजी उपयोग मामला

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

प्रदर्शित करने के लिए, ऐप घटक में बदलाव करें:

import { useState } from"react"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <div>Kingsley's Scorediv>: <div>Sally's scorediv> }
"Kingsley": "Sally" } type="number"/>


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

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

रिएक्ट अनुप्रयोगों को अनुकूलित करने के लिए और युक्तियाँ

कोड अनुकूलन आपके वेब या मोबाइल ऐप में एक सुखद उपयोगकर्ता अनुभव बनाने की कुंजी है। विभिन्न अनुकूलन तकनीकों के बारे में जानने से आपको अपने रिएक्ट अनुप्रयोगों से अधिकतम लाभ उठाने में मदद मिल सकती है।

सबसे अच्छी बात यह है कि आप इनमें से अधिकांश अनुकूलन तकनीकों को रिएक्ट नेटिव एप्लिकेशन के साथ भी लागू कर सकते हैं।