इवेंट हैंडलर कैशिंग और रिएक्ट एप्लिकेशन प्रदर्शन में सुधार

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

जावास्क्रिप्ट में वस्तुओं के साथ काम करने की सुविधाएँ

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

const functionOne = function() { alert('Hello world!'); }; const functionTwo = function() { alert('Hello world!'); }; functionOne === functionTwo; // false 

अब एक मौजूदा फ़ंक्शन को एक वैरिएबल असाइन करने का प्रयास करते हैं जो पहले से ही दूसरे वेरिएबल को असाइन किया गया है, और इन दो वेरिएबल्स की तुलना करें:

 const functionThree = function() { alert('Hello world!'); }; const functionFour = functionThree; functionThree === functionFour; // true 

जैसा कि आप देख सकते हैं, इस दृष्टिकोण के साथ, सख्त समानता ऑपरेटर true ।
वस्तुएं स्वाभाविक रूप से उसी तरह व्यवहार करती हैं:

 const object1 = {}; const object2 = {}; const object3 = object1; object1 === object2; // false object1 === object3; // true 

यहां हम जावास्क्रिप्ट के बारे में बात कर रहे हैं, लेकिन अगर आपके पास अन्य भाषाओं में विकसित होने का अनुभव है, तो आप संकेत की अवधारणा से परिचित हो सकते हैं। उपरोक्त कोड में, हर बार एक ऑब्जेक्ट बनाया जाता है, सिस्टम मेमोरी का एक हिस्सा इसके लिए आवंटित किया जाता है। जब हम फॉर्म object1 = {} की कमांड का उपयोग करते हैं, तो यह कुछ डेटा के साथ विशेष रूप से object1 लिए आवंटित मेमोरी का एक टुकड़ा object1 ।

ऑब्जेक्ट 1 से संबंधित पते की कल्पना करना काफी संभव है, जिस पर ऑब्जेक्ट से संबंधित डेटा संरचनाएं मेमोरी में स्थित हैं। कमांड object2 = {} का निष्पादन object2 = {} एक अन्य मेमोरी क्षेत्र के आवंटन की ओर जाता है, जिसे विशेष रूप से object2 लिए डिज़ाइन किया गया है। क्या obect1 और object2 एक ही मेमोरी क्षेत्र में object2 हैं? नहीं, उनमें से प्रत्येक का अपना प्लाट है। इसीलिए जब हम object1 और object2 तुलना करने की कोशिश करते हैं object2 तो हम false । इन ऑब्जेक्ट्स में एक समान संरचना हो सकती है, लेकिन मेमोरी में पते जहां वे स्थित हैं, अलग-अलग हैं, और यह पते हैं जिनकी तुलना के दौरान जांच की जाती है।

कमांड object3 = object1 1 को निष्पादित करके, हम object3 = object1 के पते को object1 object3 स्थिरांक में object3 । यह कोई नई वस्तु नहीं है। इस स्थिरांक को किसी मौजूदा वस्तु का पता दिया जाता है। आप इसे इसके द्वारा सत्यापित कर सकते हैं:

 const object1 = { x: true }; const object3 = object1; object3.x = false; object1.x; // false 

इस उदाहरण में, स्मृति में एक ऑब्जेक्ट बनाया जाता है और इसका पता स्थिर object1 को लिखा जाता है। फिर वही पता स्थिर object3 को लिखा जाता है। ऑब्जेक्ट 3 को बदलने से ऑब्जेक्ट मेमोरी में बदल object3 । इसका मतलब यह है कि जब किसी अन्य संदर्भ का उपयोग करते हुए किसी वस्तु तक पहुंच होती है, उदाहरण के लिए, ऑब्जेक्ट 1 में संग्रहीत, हम पहले से ही अपने संशोधित संस्करण के साथ काम करेंगे।

फ़ंक्शंस, ऑब्जेक्ट्स और रिएक्ट

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

रिएक्ट से इसका क्या लेना-देना है? रिएक्ट में अनुप्रयोग प्रदर्शन को बेहतर बनाने के उद्देश्य से सिस्टम संसाधनों को बचाने के लिए बुद्धिमान तंत्र हैं: यदि घटक के गुण और स्थिति नहीं बदलते हैं, तो render फ़ंक्शन क्या नहीं बदलता है। जाहिर है, यदि घटक समान रहता है, तो उसे फिर से प्रस्तुत करने की आवश्यकता नहीं है। यदि कुछ नहीं बदलता है, तो render फ़ंक्शन पहले की तरह वापस आ जाएगा, इसलिए इसे निष्पादित करने की कोई आवश्यकता नहीं है। यह तंत्र प्रतिक्रिया को तेज बनाता है। आवश्यकता पड़ने पर ही कुछ प्रदर्शित किया जाता है।

प्रतिक्रिया मानक जावास्क्रिप्ट सुविधाओं का उपयोग करके समानता के लिए घटकों के गुणों और स्थिति की जांच करती है, अर्थात, यह केवल == ऑपरेटर का उपयोग करके उनकी तुलना करती है। प्रतिक्रिया उनकी समानता को निर्धारित करने के लिए वस्तुओं की "उथले" या "गहरी" तुलना नहीं करती है। उथले तुलना एक अवधारणा है जिसका उपयोग किसी वस्तु के प्रत्येक कुंजी-मूल्य जोड़ी की तुलना करने के लिए किया जाता है, क्योंकि इसकी तुलना में स्मृति में केवल वस्तुओं के पते की तुलना की जाती है (उनके संदर्भ)। वस्तुओं की "गहरी" तुलना और भी आगे बढ़ जाती है, और यदि वस्तुओं के तुलनात्मक गुणों के मूल्य भी वस्तुएं हैं, तो वे इन वस्तुओं के प्रमुख-मूल्य जोड़े की तुलना भी करते हैं। इस प्रक्रिया को अन्य वस्तुओं में निहित सभी वस्तुओं के लिए दोहराया जाता है। रिएक्ट कुछ भी नहीं करता है, बस लिंक की समानता के लिए जाँच कर रहा है।

यदि, उदाहरण के लिए, आप प्रपत्र { x: 1 } के किसी ऑब्जेक्ट द्वारा दर्शाए गए घटक की संपत्ति को दूसरी वस्तु में बदलते हैं, जो बिल्कुल एक जैसी लगती है, तो रिएक्ट घटक को फिर से प्रस्तुत करेगा, क्योंकि ये ऑब्जेक्ट अलग-अलग मेमोरी क्षेत्रों में स्थित हैं। यदि आप उपरोक्त उदाहरण को याद करते हैं, तो, जब एक घटक के गुणों को object3 से object1 में object3 , तो रिएक्ट ऐसे घटक को फिर से प्रस्तुत नहीं करेगा, चूंकि object1 ऑब्जेक्ट object1 और ऑब्जेक्ट 3 एक ही ऑब्जेक्ट को संदर्भित करते हैं।

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

घटकों के साथ काम करते समय एक विशिष्ट समस्या

यहां घटकों के साथ काम करने का एक परिदृश्य है, जो दुर्भाग्य से, किसी और के कोड की जांच करते समय लगातार मेरे पास आता है:

 class SomeComponent extends React.PureComponent { get instructions() {   if (this.props.do) {     return 'Click the button: ';   }   return 'Do NOT click the button: '; } render() {   return (     <div>       {this.instructions}       <Button onClick={() => alert('!')} />     </div>   ); } } 

हमसे पहले एक बहुत ही सरल घटक है। यह एक बटन है, जब क्लिक किया जाता है, तो एक अधिसूचना प्रदर्शित होती है। बटन के आगे इसके उपयोग के लिए निर्देश प्रदर्शित किए जाते हैं, उपयोगकर्ता को सूचित करते हैं कि क्या उन्हें यह बटन दबाया जाना चाहिए। वे वास्तव में नियंत्रित do={false} SomeComponent कंपोनेंट SomeComponent ( do={true} या do={false} ) सेट करके इंडिकेशन प्रदर्शित किया SomeComponent ।

हर बार जब SomeComponent घटक फिर से प्रस्तुत किया जाता है (जब do प्रॉपर्टी का मूल्य true से false और इसके विपरीत बदल जाता है), Button तत्व भी प्रदान किया जाता है। onClick हैंडलर, हालांकि यह हमेशा समान होता है, render फ़ंक्शन कहे जाने वाले प्रत्येक बार फिर से बनाया जाता है। नतीजतन, यह पता चलता है कि हर बार घटक को मेमोरी में प्रदर्शित किया जाता है, एक नया फ़ंक्शन बनाया जाता है, क्योंकि इसका निर्माण render फ़ंक्शन में किया जाता है, स्मृति में नए पते का लिंक <Button /> को दिया जाता है, और इस तथ्य के बावजूद Button घटक को फिर से प्रदान किया जाता है। कुछ भी नहीं बदला है।

आइए इसे कैसे ठीक करें के बारे में बात करते हैं।

समस्या हल करना

यदि फ़ंक्शन घटक ( this संदर्भ) से स्वतंत्र है, तो आप इसे घटक के बाहर परिभाषित कर सकते हैं। घटक के सभी उदाहरण एक ही फ़ंक्शन संदर्भ का उपयोग करेंगे, क्योंकि सभी मामलों में यह एक ही फ़ंक्शन होगा। यहाँ यह कैसा दिखता है:

 const createAlertBox = () => alert('!'); class SomeComponent extends React.PureComponent { get instructions() {   if (this.props.do) {     return 'Click the button: ';   }   return 'Do NOT click the button: '; } render() {   return (     <div>       {this.instructions}       <Button onClick={createAlertBox} />     </div>   ); } } 

पिछले उदाहरण के विपरीत, createAlertBox , render करने के render प्रत्येक कॉल के साथ, स्मृति में एक ही क्षेत्र के लिए एक ही लिंक सम्‍मिलित करेगा। नतीजतन, Button दोहराया आउटपुट को निष्पादित नहीं किया जाएगा।

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

यदि फ़ंक्शन घटक पर निर्भर करता है, अर्थात, इसे इसके बाहर परिभाषित नहीं किया जा सकता है, तो घटक विधि को इवेंट हैंडलर के रूप में पारित किया जा सकता है:

 class SomeComponent extends React.PureComponent { createAlertBox = () => {   alert(this.props.message); }; get instructions() {   if (this.props.do) {     return 'Click the button: ';   }   return 'Do NOT click the button: '; } render() {   return (     <div>       {this.instructions}       <Button onClick={this.createAlertBox} />     </div>   ); } } 

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

यह सब अच्छा है। लेकिन क्या होगा अगर फ़ंक्शन गतिशील हैं?

अधिक जटिल समस्या का समाधान

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

इसलिए, यह बेहद सामान्य है कि एक घटक में कई अद्वितीय, गतिशील ईवेंट हैंडलर होते हैं, उदाहरण के लिए, कोड में कुछ समान देखा जा सकता है, जहां render विधि में map ऐरे विधि का उपयोग किया जाता है:

 class SomeComponent extends React.PureComponent { render() {   return (     <ul>       {this.props.list.map(listItem =>         <li key={listItem.text}>           <Button onClick={() => alert(listItem.text)} />         </li>       )}     </ul>   ); } } 

यहां, विभिन्न प्रकार के बटन प्रदर्शित किए जाएंगे और एक अलग संख्या में ईवेंट हैंडलर बनाए जाएंगे, जिनमें से प्रत्येक को एक अद्वितीय फ़ंक्शन द्वारा दर्शाया गया है, और, अग्रिम में, जब SomeComponent बनाते हैं, तो यह ज्ञात नहीं होता है कि ये फ़ंक्शन क्या होंगे। इस पहेली को कैसे हल करें?

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

इस विचार का कार्यान्वयन कैसा दिखता है:

 class SomeComponent extends React.PureComponent { //    SomeComponent        //   . clickHandlers = {}; //       //    . getClickHandler(key) {   //       ,  .   if (!Object.prototype.hasOwnProperty.call(this.clickHandlers, key)) {     this.clickHandlers[key] = () => alert(key);   }   return this.clickHandlers[key]; } render() {   return (     <ul>       {this.props.list.map(listItem =>         <li key={listItem.text}>           <Button onClick={this.getClickHandler(listItem.text)} />         </li>       )}     </ul>   ); } } 

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

नतीजतन, SomeComponent का पुन: प्रतिपादन Button फिर से प्रस्तुत नहीं करेगा। इसी तरह, list संपत्ति में तत्वों को जोड़ने से गतिशील रूप से प्रत्येक बटन के लिए घटना संचालकों का निर्माण होगा।

हैंडलर के लिए विशिष्ट पहचानकर्ता बनाने में आपको रचनात्मक होने की आवश्यकता होगी यदि उन्हें एक से अधिक चर द्वारा परिभाषित किया गया है, लेकिन यह map विधि के परिणामस्वरूप प्राप्त प्रत्येक JSX ऑब्जेक्ट के लिए एक अद्वितीय key गुण के सामान्य निर्माण की तुलना में अधिक जटिल नहीं है।

यहाँ मैं आपको पहचानकर्ता के रूप में सरणी अनुक्रमित का उपयोग करने की संभावित समस्याओं के बारे में चेतावनी देना चाहूंगा। तथ्य यह है कि इस दृष्टिकोण के साथ, आप त्रुटियों का सामना कर सकते हैं यदि सरणी के तत्वों का क्रम बदल जाता है या इसके कुछ तत्व हटा दिए जाते हैं। इसलिए, उदाहरण के लिए, यदि पहले एक समान सरणी दिखती थी तो [ 'soda', 'pizza' ] , और फिर [ 'pizza' ] में बदल गया, और आपने listeners[0] = () => alert('soda') एक कमांड का उपयोग करके इवेंट हैंडलर्स को कैश कर दिया। listeners[0] = () => alert('soda') , आप पाएंगे कि जब उपयोगकर्ता उस बटन पर क्लिक करता है जिस पर पहचानकर्ता 0 के साथ हैंडलर असाइन किया गया है और जो कि, [ 'pizza' ] ऐरे की सामग्री के अनुसार, pizza संदेश प्रदर्शित करना चाहिए, एक soda संदेश प्रदर्शित होगा। इसी कारण से, सरणी सूचकांकों को प्रमुख गुणों के रूप में उपयोग करने की अनुशंसा नहीं की जाती है।

परिणाम

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

प्रिय पाठकों! यदि आप प्रतिक्रिया अनुप्रयोगों को अनुकूलित करने के किसी भी दिलचस्प तरीके के बारे में जानते हैं, तो कृपया उन्हें साझा करें।