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

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

रिएक्ट ऐप्स को स्केल करने के लिए पुन: प्रयोज्यता क्यों मायने रखती है

जब रिएक्ट ऐप्स को स्केल करने की बात आती है तो पुन: प्रयोज्यता महत्वपूर्ण है। आपके ऐप में विभिन्न सूची घटकों को संभालने के लिए कोड को डुप्लिकेट करने के बजाय, पुन: प्रयोज्य सूची घटकों का निर्माण आपको सामान्य तर्क और यूआई संरचना को स्टैंडअलोन घटकों में सार करने में सक्षम बनाता है। यह आपके रिएक्ट घटकों को मॉड्यूलर रूप से विकसित करने की अनुमति देता है और कोड दोहराव को रोकता है, जिससे आपके ऐप के विस्तार के साथ संभावित बग और रखरखाव संबंधी समस्याएं पैदा हो सकती हैं।

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

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

स्केलेबल पुन: प्रयोज्य सूची घटकों के निर्माण के लिए, आपको कई रिएक्ट अवधारणाओं को समझने की आवश्यकता है:

प्रॉप्स और स्टेट: ये आपको क्रमशः अपने घटकों को डेटा पास करने और आपके घटकों के आंतरिक व्यवहार को नियंत्रित करने की अनुमति देते हैं।

ऐरे तरीके: रिएक्ट घटकों में ऐरे को बदलने के लिए .map(), .filter(), और .reduce() जैसी विधियां आवश्यक हैं।

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

प्रोप-संचालित यूआई: पुन: प्रयोज्य सूची घटकों को प्रॉप्स द्वारा संचालित किया जाना चाहिए। यह आपको मूल घटकों से विभिन्न डेटा, रेंडरिंग तर्क और यहां तक ​​कि शैलियों को पारित करने की अनुमति देता है।

उदाहरण 1: एक सरल पुन: प्रयोज्य सूची घटक

आइए एक सरल, पुन: प्रयोज्य सूची घटक बनाकर शुरुआत करें जो आइटमों की एक श्रृंखला को एक प्रोप के रूप में स्वीकार कर सकता है और उन्हें गतिशील रूप से प्रस्तुत कर सकता है:

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    

{items.map((item, index) => (
• {item}
))}

इस उदाहरण में, SimpleList एक आइटम प्रोप स्वीकार करता है, जो एक सरणी है। हम सरणी के माध्यम से पुनरावृत्त करने और प्रत्येक आइटम को एक अव्यवस्थित सूची के अंदर प्रस्तुत करने के लिए .map() फ़ंक्शन का उपयोग करते हैं (

). प्रत्येक आइटम को
• तत्व में लपेटा गया है। कुंजी प्रोप यह सुनिश्चित करता है कि सूची बदलने पर रिएक्ट DOM को कुशलतापूर्वक अपडेट कर सकता है।

  उपयोग उदाहरण:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      
  
        
  Fruit List
        
    );
  };
  
  export default App;
  

  यह उदाहरण फलों की एक मूल सूची प्रस्तुत करता है। घटक इतना लचीला है कि आप इसमें किसी भी प्रकार का डेटा भेज सकते हैं।

  सूची घटक की पुन: प्रयोज्यता को बढ़ाना

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

  आइए रेंडर प्रॉप के माध्यम से कस्टम रेंडर लॉजिक की अनुमति देकर अपनी सिंपललिस्ट को अधिक पुन: प्रयोज्य बनाएं।

  उदाहरण 2: कस्टम सूची रेंडरिंग के लिए रेंडर प्रॉप्स का उपयोग करना

  रेंडर प्रॉप्स रिएक्ट में एक पैटर्न है जो आपको यह नियंत्रित करने की अनुमति देता है कि किसी घटक के अंदर क्या प्रस्तुत किया जाता है। यहां बताया गया है कि आप सूची आइटम के कस्टम रेंडरिंग की अनुमति देने के लिए इस पैटर्न का उपयोग कैसे कर सकते हैं:
  

  const ReusableList = ({ items, renderItem }) => {
    return (
      

  {items.map((item, index) => (
  • {renderItem(item)}
  ))}
  ); };

  इस मामले में, ReusableList घटक एक renderItem प्रोप को स्वीकार करता है, जो एक फ़ंक्शन है जो एक आइटम लेता है और JSX लौटाता है। यह यह नियंत्रित करने का एक लचीला तरीका प्रदान करता है कि प्रत्येक सूची आइटम को कैसे प्रस्तुत किया जाता है।

  उपयोग उदाहरण:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  इस उदाहरण में, renderItem प्रोप हमें यह अनुकूलित करने की अनुमति देता है कि प्रत्येक उपयोगकर्ता को कैसे प्रदर्शित किया जाए। अब हम किसी भी डेटा संरचना के लिए उसी सूची घटक का पुन: उपयोग कर सकते हैं, इसे विशिष्ट उपयोग के मामले के अनुसार प्रस्तुत कर सकते हैं।

  उदाहरण 3: सूची घटकों को उच्च-क्रम वाले घटकों के साथ विस्तार योग्य बनाना

  रिएक्ट में एक और शक्तिशाली पैटर्न हायर-ऑर्डर कंपोनेंट (HOC) है। HOC एक फ़ंक्शन है जो एक घटक लेता है और अतिरिक्त कार्यक्षमता के साथ एक नया घटक लौटाता है।

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

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return 
  Loading...
  ;
      return ;
    };
  };
  

  यहां, withLoading HOC किसी भी घटक में लोडिंग व्यवहार जोड़ता है। आइए इसे अपनी पुन: प्रयोज्य सूची पर लागू करें:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

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

  उदाहरण 4: हुक के साथ उन्नत सूची घटक

  रिएक्ट हुक के साथ, हम स्टेटफुल लॉजिक को सीधे घटकों में एकीकृत करके पुन: प्रयोज्य सूची घटकों को दूसरे स्तर पर ले जा सकते हैं। आइए एक पुन: प्रयोज्य सूची बनाएं जो पेजिनेशन को संभाल सके।
  

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage   1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  यूज़पेजिनेशन हुक पेजिनेशन लॉजिक को संपुटित करता है। अब हम इस हुक का उपयोग अपने सूची घटक में कर सकते हैं।
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      
  
        
  
          {currentItems.map((item, index) => (
            
  {renderItem(item)}
          ))}
        
  
          
            Previous
          
          
            Next
          
        
      
    );
  };
  

  उपयोग उदाहरण:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i   1}`);
  
    return (
      
  
        
  Paginated List
        
  {item}
  }
        />
      
    );
  };
  

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

  इसे विभिन्न घटकों में पुन: प्रयोज्य बनाना।

  निष्कर्ष

  रिएक्ट में पुन: प्रयोज्य सूची घटकों का निर्माण स्केलेबल एप्लिकेशन बनाने के लिए एक मौलिक अभ्यास है। सामान्य तर्क को अमूर्त करके, रेंडर प्रॉप्स, उच्च-क्रम घटकों और हुक जैसे पैटर्न का उपयोग करके, आप लचीले, विस्तार योग्य और रखरखाव योग्य सूची घटक बना सकते हैं जो विभिन्न उपयोग के मामलों के अनुकूल होते हैं।

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

  संदर्भ

  प्रतिक्रिया आधिकारिक दस्तावेज़ीकरण
  
  रिएक्ट रेंडर प्रॉप्स
  
  उच्च-क्रम घटकों पर प्रतिक्रिया करें
  
  रिएक्ट हुक्स