जावास्क्रिप्ट और प्रतिक्रिया में कार्यों और मूल्यों को कैसे याद रखें

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

आप कुछ अलग तरीकों से, सादे जावास्क्रिप्ट में और रिएक्ट में भी संस्मरण का उपयोग कर सकते हैं।

जावास्क्रिप्ट में संस्मरण

जावास्क्रिप्ट में किसी फ़ंक्शन को याद रखने के लिए, आपको उस फ़ंक्शन के परिणामों को कैश में संग्रहीत करने की आवश्यकता होती है। कैश एक ऑब्जेक्ट हो सकता है जिसमें कुंजी के रूप में तर्क और मान के रूप में परिणाम होते हैं।

जब आप इस फ़ंक्शन को कॉल करते हैं, तो यह पहले जांचता है कि क्या परिणाम चलने से पहले कैश में मौजूद है। यदि ऐसा है, तो यह कैश्ड परिणाम देता है। अन्यथा, यह निष्पादित करता है।

इस समारोह पर विचार करें:

समारोहवर्ग(अंक) {
वापसी संख्या * संख्या
}

फ़ंक्शन एक तर्क लेता है और अपना वर्ग लौटाता है।

फ़ंक्शन को चलाने के लिए, इसे इस तरह की संख्या से कॉल करें:

वर्ग(5) // 25

तर्क के रूप में 5 के साथ, वर्ग () बहुत तेजी से चलेगा। हालांकि, यदि आप 70,000 के वर्ग की गणना करते हैं, तो ध्यान देने योग्य देरी होगी। ज्यादा नहीं लेकिन फिर भी देरी। अब, यदि आप फ़ंक्शन को कई बार कॉल करते हैं और 70,000 पास करते हैं, तो आपको प्रत्येक कॉल में देरी का अनुभव होगा।

आप संस्मरण का उपयोग करके इस देरी को समाप्त कर सकते हैं।

स्थिरांक मेमोइज्ड स्क्वायर = () => {
 होने देना कैश = {};
वापसी (संख्या) => {
 अगर (संख्या में कैश) {
 कंसोल.लॉग('कैश्ड मान का पुन: उपयोग करना');
 वापसी कैश[अंक];
 } वरना {
 कंसोल.लॉग('परिणाम की गणना');
होने देना परिणाम = संख्या * संख्या;
// कैश नयानतीजामूल्यके लियेअगलासमय
कैश[अंक] = नतीजा;
वापसी नतीजा;
 }
 }
 }

इस उदाहरण में, फ़ंक्शन यह जांचता है कि क्या यह कैश ऑब्जेक्ट में मौजूद है या नहीं, यह जांच कर पहले परिणाम की गणना की गई है। यदि इसमें है तो यह पहले से गणना की गई मान देता है।

जब फ़ंक्शन एक नया नंबर प्राप्त करता है, तो यह एक नए मान की गणना करता है और परिणामों को कैश में वापस आने से पहले संग्रहीत करता है।

फिर से यह उदाहरण बहुत सरल है, लेकिन यह बताता है कि प्रोग्राम के प्रदर्शन को बेहतर बनाने के लिए संस्मरण कैसे काम करेगा।

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

प्रतिक्रिया में संस्मरण

यदि आप रिएक्ट घटकों को ऑप्टिमाइज़ करना चाहते हैं, तो रिएक्ट यूज़मेमो () हुक, रिएक्ट.मेमो और यूज़कॉलबैक () के माध्यम से मेमोइज़ेशन प्रदान करता है।

उपयोग मेमो का उपयोग करना ()

यूज़मेमो () एक है प्रतिक्रिया हुक जो एक फ़ंक्शन और एक निर्भरता सरणी स्वीकार करता है।

स्थिरांक memoizedValue = useMemo (() => कंप्यूटएक्सपेंसिववैल्यू (ए, बी), [ए, बी]);

यह उस फ़ंक्शन से लौटाए गए मान को याद करता है। निर्भरता सरणी में मान फ़ंक्शन निष्पादित होने पर निर्देशित होते हैं। केवल जब वे बदलते हैं तो फ़ंक्शन फिर से निष्पादित होता है।

उदाहरण के लिए, निम्न ऐप घटक में परिणाम नामक एक यादगार मान होता है।

आयात {उपयोग मेमो} से "प्रतिक्रिया"
समारोहअनुप्रयोग(मूल्य) {
स्थिरांक वर्ग = (मान) => {
वापसी मूल्य * मूल्य
 }
स्थिरांक परिणाम = उपयोग मेमो (
 () => वर्ग (मान), 
[ मूल्य ]
 );
वापसी (
<डिव>{परिणाम (5)}</div>
 )
}

ऐप घटक प्रत्येक रेंडर पर वर्ग() को कॉल करता है। यदि ऐप घटक को कई बार प्रस्तुत किया जाता है तो प्रदर्शन खराब हो जाएगा प्रतिक्रिया सहारा बदलना या अद्यतन करना, खासकर यदि वर्ग() फ़ंक्शन महंगा है।

हालांकि, चूंकि useMemo() लौटाए गए मानों को कैश करता है, जब तक निर्भरता सरणी में तर्क बदल नहीं जाते हैं, तब तक प्रत्येक पुन: प्रस्तुत करने में वर्ग फ़ंक्शन निष्पादित नहीं होता है।

React.memo का उपयोग करना ()

React.memo() एक उच्च क्रम का घटक है जो एक प्रतिक्रिया घटक और एक फ़ंक्शन को तर्क के रूप में स्वीकार करता है। फ़ंक्शन निर्धारित करता है कि घटक को कब अद्यतन किया जाना चाहिए।

फ़ंक्शन वैकल्पिक है और यदि प्रदान नहीं किया गया है, तो React.memo घटक के वर्तमान प्रॉप्स की तुलना उसके पिछले प्रॉप्स से एक उथली प्रतिलिपि बनाता है। यदि प्रॉप्स अलग हैं, तो यह एक अपडेट को ट्रिगर करता है। यदि प्रॉप्स समान हैं, तो यह पुन: प्रस्तुत करना छोड़ देता है और याद किए गए मानों का पुन: उपयोग करता है।

वैकल्पिक फ़ंक्शन पिछले प्रॉप्स और अगले प्रॉप्स को तर्क के रूप में स्वीकार करता है। फिर आप इन प्रॉप्स की तुलना स्पष्ट रूप से यह तय करने के लिए कर सकते हैं कि घटक को अपडेट करना है या नहीं।

प्रतिक्रियाज्ञापन(अवयव, [areEqual (prevProps, nextProps)])

आइए पहले वैकल्पिक फ़ंक्शन तर्क के बिना एक उदाहरण देखें। नीचे टिप्पणियाँ नामक एक घटक है जो नाम और ईमेल प्रॉप्स को स्वीकार करता है।

समारोहटिप्पणियाँ ({नाम, टिप्पणी, पसंद}) {
वापसी (
<डिव>
<पी>{नाम}</पी>
<पी>{टिप्पणी}</पी>
<पी>{को यह पसंद है}</पी>
</div>
 )
}

मेमोइज्ड कमेंट्स कंपोनेंट में React.memo को इस तरह लपेटा जाएगा:

स्थिरांक MemoizedComment = React.memo (टिप्पणी)

आप कॉल कर सकते हैं फिर इसे किसी अन्य प्रतिक्रिया घटक की तरह कॉल कर सकते हैं।

<MemoizedComment नाम ="मेरी" टिप्पणी ="संस्मरण बढ़िया है" पसंद = 1/>

यदि आप प्रॉप्स की तुलना स्वयं करना चाहते हैं, तो निम्न फ़ंक्शन को दूसरे तर्क के रूप में React.memo में पास करें।

आयात प्रतिक्रिया से "प्रतिक्रिया"
समारोहचेक कमेंटप्रॉप्स(पिछलाप्रॉप्स, नेक्स्टप्रॉप्स) {
वापसी पिछलाप्रॉप्स.नाम अगलाप्रॉप्स.नाम
&& prevProps.comment nextProps.comment
&& पिछलाप्रॉप्स.पसंद
}
स्थिरांक MemoizedComment = React.memo (टिप्पणियाँ, checkCommentProps)

यदि checkProfileProps सत्य लौटाता है, तो घटक अद्यतन नहीं होता है। अन्यथा, इसे फिर से प्रस्तुत किया जाता है।

जब आप री-रेंडर को कस्टमाइज़ करना चाहते हैं तो कस्टम फ़ंक्शन उपयोगी होता है। उदाहरण के लिए, आप इसका उपयोग टिप्पणियाँ घटक को अपडेट करने के लिए तभी कर सकते हैं जब पसंद की संख्या में परिवर्तन हो।

useMemo() हुक के विपरीत, जो किसी फ़ंक्शन के केवल दिए गए मान को याद रखता है, React.memo पूरे फ़ंक्शन को याद रखता है।

केवल शुद्ध घटकों के लिए React.memo का उपयोग करें। इसके अलावा, तुलना लागत को कम करने के लिए, केवल उन घटकों को याद करें जिनके प्रोप अक्सर बदलते हैं।

उपयोग कॉलबैक () का उपयोग करना

आप याद करने के लिए useCallBack() हुक का उपयोग कर सकते हैं कार्य घटक.

स्थिरांक memoizedCallback = उपयोग कॉलबैक (
 () => {
 कुछ करो (ए, बी);
 },
[ए, बी],
);

फ़ंक्शन केवल तभी अपडेट होता है जब निर्भरता सरणी में मान बदलते हैं। हुक यूज़मेमो () कॉलबैक की तरह काम करता है, लेकिन यह मूल्यों को याद रखने के बजाय रेंडरर्स के बीच फ़ंक्शन घटक को याद करता है।

एक एपीआई को कॉल करने वाले मेमोइज्ड फ़ंक्शन के निम्नलिखित उदाहरण पर विचार करें।

आयात {कॉलबैक का उपयोग करें, प्रभाव का उपयोग करें} से "प्रतिक्रिया";
स्थिरांक घटक = () => {
स्थिरांक गेटडाटा = उपयोग कॉलबैक (() => {
 कंसोल.लॉग('एक एपीआई कॉल करें');
 }, []);
 उपयोग प्रभाव (() => {
 डेटा प्राप्त करें();
 }, [डेटा प्राप्त करें]);
 };

getData() फ़ंक्शन को useEffect में कॉल किया जाएगा, जब getData मान में परिवर्तन होने पर ही फिर से कॉल किया जाएगा।

क्या आपको याद करना चाहिए?

इस ट्यूटोरियल में, आपने सीखा कि संस्मरण क्या है, इसके लाभ, और इसे जावास्क्रिप्ट और रिएक्ट में कैसे लागू किया जाए। हालाँकि, आपको पता होना चाहिए कि प्रतिक्रिया पहले से ही तेज है। ज्यादातर मामलों में, घटकों या मूल्यों को याद रखने से तुलना लागत बढ़ जाती है और प्रदर्शन में सुधार नहीं होता है। इस वजह से, केवल महंगे घटकों को याद करें।

रिएक्ट 18 ने नए हुक जैसे यूज़आईड, यूज़ट्रांसिशन और यूज़इन्सर्शनइफेक्ट भी पेश किए। आप रिएक्ट एप्लिकेशन के प्रदर्शन और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए इनका उपयोग कर सकते हैं।