अगर आप ऐसे व्यक्ति हैं जो रिएक्ट में किसी सरणी को मैप करते समय चेतावनी संदेश "प्रत्येक तत्व की एक अनूठी कुंजी होनी चाहिए" को अनदेखा करने की प्रवृत्ति रखते हैं, तो यह समझने के लिए कुछ समय लेना महत्वपूर्ण है कि यह चेतावनी पहले स्थान पर क्यों उठाई जा रही है।

रिएक्ट में, "ऐरे.मैप ()" फ़ंक्शन का उपयोग करके आइटम की सूची प्रस्तुत करते समय, प्रत्येक आइटम के लिए एक अद्वितीय "कुंजी" प्रोप प्रदान करने की अनुशंसा की जाती है। लेकिन क्यों?

उत्तर अनुकूलन है।

आइए मान लें कि हम एक ई-कॉमर्स स्टोर बना रहे हैं जहां हमारे शॉपिंग कार्ट हैं और उन वस्तुओं को स्टोर करने के लिए एक सरणी का उपयोग कर रहे हैं जिन्हें उपयोगकर्ता ने अपनी शॉपिंग कार्ट में जोड़ा है। जब उपयोगकर्ता आइटम जोड़ता या हटाता है तो सरणी को गतिशील रूप से अपडेट किया जा सकता है।

मान लीजिए कि हमारा प्रिय उपयोगकर्ता एक नए लैपटॉप की खरीदारी कर रहा है और वर्तमान में उसके कार्ट में 3 आइटम हैं, यानी 3 सरणी तत्व।

अब मान लीजिए कि उपयोगकर्ता अपने कार्ट में " हेडफ़ोन" जोड़ता है। अब जब हम सरणी को एक स्थिति में संग्रहीत कर रहे हैं, जिस क्षण कोई उपयोगकर्ता सरणी से कुछ जोड़ता या हटाता है, रिएक्ट घटक को फिर से प्रस्तुत करेगा ताकि यूआई उस विशेष घटक की स्थिति के नवीनतम मूल्य के साथ समन्वयित हो सके।

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

तो अब हमारे कार्ट ऐरे की मैपिंग इस प्रकार होगी:

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

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

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

हाँ, हम कर सकते हैं, और उत्तर "कुंजी" के माध्यम से है।

मान लीजिए कि हम अपनी सरणी में प्रत्येक तत्व के लिए एक कुंजी जोड़ते हैं।

इसलिए जब रिएक्ट तत्वों की एक सरणी को अपडेट करता है, तो यह यह निर्धारित करने के लिए पुराने और नए सरणियों में तत्वों की कुंजियों की तुलना करेगा कि कौन से तत्व जोड़े गए, हटाए गए या स्थानांतरित किए गए। रिएक्ट केवल तत्वों की सामग्री की अधिक विस्तृत तुलना करेगा यदि कुंजियाँ मेल नहीं खाती हैं या यदि कोई कुंजियाँ निर्दिष्ट नहीं हैं (प्रारंभिक तुलना जहाँ हमारे पास कुंजियाँ नहीं थीं)।

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

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

चाबियों के रूप में सूचकांक का उपयोग क्यों नहीं करते?

array.map() फ़ंक्शन में कॉलबैक इंडेक्स नामक पैरामीटर लेता है, जो प्रत्येक तत्व के इंडेक्स वैल्यू तक पहुंच प्रदान करता है। हम विशेष तत्व के सूचकांक की कुंजी सेट कर सकते हैं। लेकिन यह एक बड़ा नहीं है!

function Component()
const cart = ["Laptop," "Headphones"];

  return (
    <div>
cart.map((eachItem, index) => 
return h1 key=index>eachItem/h1>;
      })}
    </div>
  );
}

export default component;

प्रतिक्रिया इस तरह से सोचती है: यदि किसी तत्व का मुख्य आधार नहीं बदला है, तो मुझे उस तत्व की सामग्री की विस्तृत जाँच करने की आवश्यकता नहीं है। मुझे लगता है कि अगर कुंजी अद्यतन नहीं है, तो चीजें वही हैं।

मठ.यादृच्छिक () - नहीं!

ठीक है, हम सोच सकते हैं कि कुंजियों के लिए Math.random() का उपयोग करना एक अच्छा विचार है, क्योंकि यह एक यादृच्छिक संख्या उत्पन्न करेगा जो उस सरणी में सभी कुंजियों के बीच अद्वितीय होगी। लेकिन हमें यह ध्यान रखना होगा कि प्रत्येक रेंडर के साथ एक नई कुंजी उत्पन्न होगी, भले ही सरणी स्वयं नहीं बदली हो । यह रिएक्ट को गलत तरीके से मानने का कारण बन सकता है कि एक तत्व बदल गया है या जोड़ा गया है। यह कुंजियों का उपयोग करने के उद्देश्य को पराजित करता है क्योंकि रिएक्ट रेंडरर्स के बीच कुंजियों की सटीक रूप से तुलना नहीं कर सकता है ताकि यह पता लगाया जा सके कि कौन से तत्व वास्तव में बदल गए हैं।

इसलिए, नियम एक ऐसी कुंजी का चयन करना है जो रेंडरर्स के बीच स्थिर और सुसंगत हो ताकि रिएक्ट रेंडरर्स के बीच कुंजियों की सटीक रूप से तुलना कर सके कि कौन से तत्व बदल गए हैं, जोड़े गए हैं या सरणी से हटा दिए गए हैं। तो - कोई इंडेक्स नहीं, कोई मैथ नहीं। यादृच्छिक () ❌