रिएक्ट डेवलपर्स के रूप में, हम सभी ने ऐसे परिदृश्यों का सामना किया है जहां हमें डेटा की सूचियां प्रस्तुत करने की आवश्यकता होती है। जबकि .map() विधि अच्छी तरह से काम करती है, हर बार किसी सूची को प्रस्तुत करते समय एक ही तर्क को दोहराना थकाऊ हो सकता है, और कोड दोहराव की ओर ले जाता है। सौभाग्य से, पुन: प्रयोज्य घटक, उच्च ऑर्डर घटक, या कस्टम हुक का उपयोग करके इसे संभालने का एक साफ, स्केलेबल तरीका है।

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

मुख्य समस्या: दोहराव .map() तर्क

कल्पना करें कि आप एक ई-कॉमर्स एप्लिकेशन के लिए एक डैशबोर्ड बना रहे हैं। डैशबोर्ड में कई सूचियाँ शामिल हैं: हाल के ऑर्डर, सबसे अधिक बिकने वाले उत्पाद, उपयोगकर्ता टिप्पणियाँ, आदि। आपको .map() फ़ंक्शन का उपयोग करके प्रत्येक सूची को प्रस्तुत करना होगा। यहाँ एक विशिष्ट उदाहरण है:

const orders = [...]; // Array of order data

return (
  
    {orders.map((order, index) => (
      
    ))}
  >
);

अब, आप प्रत्येक सूची के लिए .map() तर्क को दोहराते हुए, अपने घटक को समान कोड के साथ अव्यवस्थित करते हुए देख सकते हैं। यहां वह जगह है जहां पुन: प्रयोज्य पैटर्न उपयोगी हो सकता है।

समाधान: एक पुन: प्रयोज्य सूची घटक

.map() तर्क की नकल करने से बचने के लिए, हम एक पुन: प्रयोज्य ListComponent बना सकते हैं जो मैपिंग तर्क को अमूर्त करता है और हमें डेटा के आधार पर विभिन्न घटकों को प्रस्तुत करने की अनुमति देता है।

function ListComponent({ data, renderItem }) {
  return (
    
      {data.map((item, index) => renderItem(item, index))}
    >
  );
}

उपयोग:

 (
    
  )} 
/>

इस पैटर्न में:
रेंडरआइटम: एक फ़ंक्शन जो परिभाषित करता है कि प्रत्येक आइटम को कैसे प्रस्तुत किया जाना चाहिए

एक अलग रेंडरआइटम फ़ंक्शन पास करके, हम किसी भी सूची के लिए ListComponent का पुन: उपयोग कर सकते हैं। इसके परिणामस्वरूप एक स्वच्छ, पुन: प्रयोज्य घटक प्राप्त होता है, जो दोहराव वाले .map() तर्क को कम करता है।

अधिक लचीलापन: उच्च-क्रम घटक (HOC)

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

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) => (
          
        ))}
      >
    );
  };
}

उपयोग:

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array

ऑर्डरकंपोनेंट को withListRendering HOC के साथ लपेटकर, हमने मूल घटक को संशोधित किए बिना स्वचालित रूप से सूची रेंडरिंग व्यवहार जोड़ दिया है। यह पैटर्न कोड को मॉड्यूलर रखता है।

हुक प्रेमियों के लिए: सूची रेंडरिंग के लिए कस्टम हुक

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

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

उपयोग:

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    
  ));

  return {orderList}>;
}

यह दृष्टिकोण .map() तर्क को हुक में ले जाता है, रेंडरिंग तर्क को घटक की संरचना से अलग रखता है। यह घटक को दुबला रखने और प्रस्तुति पर ध्यान केंद्रित करने का एक और तरीका है।

वास्तविक दुनिया परिदृश्य: एक ई-कॉमर्स डैशबोर्ड

आइए इस पैटर्न को वास्तविक दुनिया के परिदृश्य पर लागू करें। कल्पना कीजिए कि आप एक ई-कॉमर्स एडमिन डैशबोर्ड बना रहे हैं, जहां ऑर्डर, उत्पाद, समीक्षा आदि की कई सूचियां प्रस्तुत करने की आवश्यकता है।

लिस्टकंपोनेंट दृष्टिकोण का उपयोग करके, आप इस तरह ऑर्डर की एक सूची प्रस्तुत कर सकते हैं:

 (
    
  )} 
/>

जब हमें एक अलग सूची प्रस्तुत करने की आवश्यकता होती है, जैसे कि उत्पाद, तो उसी ListComponent को अलग-अलग रेंडरआइटम फ़ंक्शन के साथ पुन: उपयोग किया जा सकता है:

 (
    
  )} 
/>

.map() तर्क को फिर से लिखने की कोई आवश्यकता नहीं है - बस विभिन्न डेटा और घटकों के साथ ListComponent का पुन: उपयोग करें। यह कोडबेस को बढ़ने के साथ अधिक रखरखाव योग्य बनाता है।

निष्कर्ष: स्वच्छ, पुन: प्रयोज्य और स्केलेबल कोड

पुन: प्रयोज्य ListComponent पैटर्न दोहराए गए .map() तर्क को अमूर्त करके रिएक्ट सूची प्रतिपादन को सरल बनाता है। चाहे आप बुनियादी घटक दृष्टिकोण, एचओसी, या कस्टम हुक का उपयोग करना पसंद करें, यह पैटर्न सुनिश्चित करता है कि कोड साफ और पुन: प्रयोज्य है।

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

आपको रिएक्ट में कौन से अन्य पुन: प्रयोज्य पैटर्न उपयोगी लगे? टिप्पणियों में क्या है मुझे जानने दें! और अंत में पढ़ने के लिए धन्यवाद