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

रेंडरिंग क्या है?

रेंडरिंग वह प्रक्रिया है जिसके द्वारा रिएक्ट आपके यूजर इंटरफेस (यूआई) को राज्य या प्रॉप्स के आधार पर स्क्रीन पर प्रस्तुत करता है। जब आपका घटक पहली बार प्रस्तुत किया जाता है, तो इसे पहला रेंडर कहा जाता है।

आरंभिक रेंडर कैसे काम करता है?

जब किसी घटक को पहली बार DOM पर "माउंट" किया जाता है, तो ऐसा होता है:

1. राज्य आरंभीकरण:
चाहे आप यूज़स्टेट, प्रॉप्स, या रेडक्स का उपयोग करें, घटक की प्रारंभिक स्थिति बनाई जाती है।

2. रेंडर फ़ंक्शन:
रिएक्ट JSX कोड के माध्यम से लूप करता है और वर्तमान स्थिति के आधार पर एक वर्चुअल DOM उत्पन्न करता है।

3. घटक की वर्तमान स्थिति के लिए एक वर्चुअल DOM (वर्चुअल DOM) बनाता है।

4. तुलना (अंतर):
वर्चुअल DOM की तुलना वास्तविक DOM से की जाती है (चूंकि यह पहला रेंडर है, सभी तत्व पूरी तरह से रेंडर किए जाएंगे)।

5. दिखाया जा रहा है:
घटक स्क्रीन पर प्रदर्शित होता है।
एक बार जब घटक प्रस्तुत हो जाता है, तो अगली चुनौती पुन: प्रस्तुत करने की होती है।

पुन: प्रस्तुतीकरण: कब और क्यों?

हर बार स्थिति या प्रॉप्स बदलने पर पुनर्रेंडरिंग होती है। क्या आपने उस बटन पर क्लिक किया जो स्क्रीन पर नंबर बदलता है? Redux स्टोर में कोई मान बदला गया? वे सभी कार्रवाइयां रिएक्ट को घटक को फिर से प्रस्तुत करने का कारण बन सकती हैं, और यहीं पर पुन: प्रस्तुतीकरण आता है।

पुन:रेंडरिंग कैसे काम करती है?

राज्य परिवर्तन का पता लगाना:

• यूजस्टेट के साथ, जब आप सेटस्टेट को कॉल करते हैं, तो रिएक्ट को पता होता है कि उसे घटक को अपडेट करने की आवश्यकता है।

• Redux के साथ, जब स्टोर में कोई मान बदलता है, तो राज्य के उस हिस्से से जुड़े प्रत्येक घटक को फिर से प्रस्तुत किया जाता है।

ट्रिगर प्रस्तुत करें:

जब स्थिति बदलती है, तो रिएक्ट उस परिवर्तन के आधार पर एक नया वर्चुअल DOM बनाता है।

तुलना (अंतर):

• रिएक्ट नए वर्चुअल DOM की तुलना पुराने वर्चुअल DOM से करता है और गणना करता है कि कौन से परिवर्तन लागू किए जाने चाहिए। यह एक तरीका है जिससे रिएक्ट रेंडरिंग को अनुकूलित करता है।

परिवर्तन देखें:

• परिवर्तनों की गणना के बाद, रिएक्ट उन्हें वास्तविक DOM पर लागू करता है। इस प्रकार, पृष्ठ के केवल बदले हुए हिस्से ही दोबारा प्रदर्शित होते हैं।

कौन से घटक पुन: प्रस्तुत किए गए हैं?

प्रत्येक परिवर्तन से सभी घटक प्रभावित नहीं होते हैं। रिएक्ट केवल उन्हीं घटकों को पुन: प्रस्तुत करता है जो:

स्थानीय राज्यों का उपयोग करें:
यदि आप यूज़स्टेट का उपयोग करते हैं, तो हर बार सेटस्टेट को कॉल करने पर घटक को पुन: प्रस्तुत किया जाता है।

Redux स्थिति का उपयोग करें:
यदि आपका घटक Redux स्थिति (उपयोग चयनकर्ता या कनेक्ट के माध्यम से) पर निर्भर करता है, तो राज्य का वह हिस्सा बदलने पर इसे फिर से प्रस्तुत किया जाएगा।

प्रॉप्स का उपयोग करें:
यदि प्रॉप्स मान बदलता है, तो घटक को नए मानों के साथ फिर से प्रस्तुत किया जाता है।

प्रतिपादन का अनुकूलन

बेशक, सभी घटकों को अनावश्यक रूप से पुनः प्रस्तुत करना हमेशा आदर्श नहीं होता है। यदि हम चाहते हैं कि एप्लिकेशन जल्दी और कुशलता से काम करे, तो यहां कुछ अनुकूलन तकनीकें हैं:

1. संस्मरण घटक
रिएक्ट, React.memo के माध्यम से घटक ज्ञापन के लिए कार्यक्षमता प्रदान करता है। यदि आपका घटक प्रॉप्स या स्थिति परिवर्तनों पर निर्भर नहीं है, तो आप इसे "याद" कर सकते हैं, इसलिए यह केवल तभी पुन: प्रस्तुत होगा जब प्रासंगिक मान बदल जाएंगे।

उदाहरण:

const MemoizedComponent = React.memo(MyComponent);

2. कार्यों और मूल्यों का संस्मरण

हर रेंडर पर फ़ंक्शन या मानों को दोबारा बनाने से बचने के लिए, फ़ंक्शन को याद रखने के लिए यूज़कॉलबैक का उपयोग करें और मानों को याद रखने के लिए मेमो का उपयोग करें।

• useCallback आपको किसी फ़ंक्शन को याद रखने और निर्भरता बदलने तक इसे दोबारा बनने से रोकने की अनुमति देता है।

• useMemo फ़ंक्शन के परिणाम को याद रखता है, इसलिए प्रत्येक रेंडर पर इसकी पुन: गणना नहीं की जाती है।

उदाहरण:

const increment = useCallback(() => {
  setCount(prevCount => prevCount   1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. रिडक्स अनुकूलन

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

जीवनचक्र हुक और प्रतिपादन

क्लासिक रिएक्ट कक्षाओं में, हमने यह नियंत्रित करने के लिए कि घटक को फिर से प्रस्तुत किया जाएगा, includeComponentUpdate का उपयोग किया। कार्यात्मक घटकों में, इस अवधारणा को यूज़इफ़ेक्ट और मेमोइज़ेशन का उपयोग करके अनुकरण किया जा सकता है।

निष्कर्ष

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

उदाहरण कोड: कार्रवाई में प्रतिपादन और पुन: प्रतिपादन
यहां एक घटक का उदाहरण दिया गया है जो रेंडरिंग को अनुकूलित करने के लिए यूज़स्टेट, रेडक्स और मेमोइज़ेशन का उपयोग करता है:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount   1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

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