यदि आप कुछ समय के लिए रिएक्ट दुनिया में रहे हैं, तो आपने संभवतः "यह सिर्फ जावास्क्रिप्ट है" वाक्यांश सुना होगा। हालांकि यह सच है, इसका मतलब यह नहीं है कि हम अपने रिएक्ट ऐप्स को अधिक रखरखाव योग्य, पुन: प्रयोज्य और काम करने के लिए बेहद आनंददायक बनाने के लिए कुछ आजमाए हुए पैटर्न से लाभ नहीं उठा सकते हैं। आइए कुछ आवश्यक डिज़ाइन पैटर्न पर गौर करें जो आपके रिएक्ट घटकों को "मेह" से "अद्भुत" तक ले जा सकते हैं!

प्रतिक्रिया में डिज़ाइन पैटर्न क्यों मायने रखते हैं?

इससे पहले कि हम आगे बढ़ें, आइए कमरे में हाथी को संबोधित करें: डिज़ाइन पैटर्न से परेशान क्यों हों? खैर, मेरे साथी रिएक्ट उत्साही, डिज़ाइन पैटर्न कोडिंग दुनिया के गुप्त व्यंजनों की तरह हैं। वे सामान्य समस्याओं के लिए युद्ध-परीक्षित समाधान हैं जो:

1. अपने कोड को अधिक पठनीय और रखरखाव योग्य बनाएं
2. अपने एप्लिकेशन में पुन: प्रयोज्यता को बढ़ावा दें
3. सुंदर समाधानों से जटिल समस्याओं का समाधान करें
4. अन्य डेवलपर्स के साथ विचारों को अधिक प्रभावी ढंग से संप्रेषित करने में आपकी सहायता करें

अब जब हम एक ही पृष्ठ पर हैं, तो आइए कुछ पैटर्न तलाशें जो आपके रिएक्ट घटकों को ताजा मोम वाली स्पोर्ट्स कार की तुलना में अधिक चमकदार बना देंगे!

1. घटक संरचना पैटर्न

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

// Instead of this:
const Button = ({ label, icon, onClick }) => (
  
    {icon && }
    {label}
  
);

// Consider this:
const Button = ({ children, onClick }) => (
  {children}
);

const IconButton = ({ icon, label }) => (
  
    
    {label}
  
);

यह अद्भुत क्यों है:

• अधिक लचीले और पुन: प्रयोज्य घटक
• अनुकूलित करना और विस्तार करना आसान
• एकल जिम्मेदारी सिद्धांत का पालन करता है

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

2. कंटेनर/प्रस्तुति पैटर्न

यह पैटर्न आपके घटक के तर्क को उसकी प्रस्तुति से अलग करता है, जिससे तर्क करना और परीक्षण करना आसान हो जाता है।

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return ;
};

// Presentational Component
const UserList = ({ users }) => (
  

{users.map(user => (
• {user.name}
))}

यह क्यों कमाल करता है:

• चिंताओं का स्पष्ट पृथक्करण
• परीक्षण करना और रखरखाव करना आसान
• प्रस्तुति घटक की पुन: प्रयोज्यता को बढ़ावा देता है

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

3. उच्च-क्रम घटक (HOC) पैटर्न

HOC ऐसे फ़ंक्शन हैं जो एक घटक लेते हैं और कुछ अतिरिक्त कार्यक्षमता के साथ एक नया घटक लौटाते हैं। वे आपके घटकों के लिए पावर-अप की तरह हैं!

const withLoader = (WrappedComponent) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return ;
    }
    return ;
  };
};

const EnhancedUserList = withLoader(UserList);

यह अच्छा क्यों है:

• विभिन्न घटकों में कोड के पुन: उपयोग की अनुमति देता है
• आपके घटकों को साफ और केंद्रित रखता है
• कई संवर्द्धनों के लिए बनाया जा सकता है

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

4. रेंडर प्रॉप्स पैटर्न

इस पैटर्न में एक फ़ंक्शन को एक घटक के प्रोप के रूप में पास करना शामिल है, जो आपको प्रस्तुत किए जाने पर अधिक नियंत्रण देता है।

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return (
    

      {render(position)}
    
  );
};

// Usage
 (
    
The mouse is at ({x}, {y})
  )}
/>

यह निफ्टी क्यों है:

• अत्यधिक लचीला और पुन: प्रयोज्य
• एचओसी के साथ प्रॉप नेमिंग टकराव जैसी समस्याओं से बचा जाता है
• प्रदत्त फ़ंक्शन के आधार पर गतिशील प्रतिपादन की अनुमति देता है

मजेदार तथ्य: रेंडर प्रॉप्स पैटर्न इतना लचीला है, यह हमारे द्वारा चर्चा किए गए अधिकांश अन्य पैटर्न को भी लागू कर सकता है!

5. कस्टम हुक पैटर्न

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

const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // Set initial size

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
};

// Usage
const MyComponent = () => {
  const { width, height } = useWindowSize();
  return 
Window size: {width} x {height}
;
};

यह अद्भुत क्यों है:

• घटकों के बीच स्टेटफुल लॉजिक को आसानी से साझा करने की अनुमति देता है
• आपके घटकों को साफ और केंद्रित रखता है
• एचओसी के कई उपयोगों को प्रतिस्थापित कर सकता है और प्रॉप्स प्रस्तुत कर सकता है

प्रो टिप: यदि आप खुद को कई घटकों में समान तर्क दोहराते हुए पाते हैं, तो इसे कस्टम हुक में निकालने का समय हो सकता है!

निष्कर्ष: पैटर्न पावर-अप योर रिएक्ट ऐप्स

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

1. लचीले, मॉड्यूलर यूआई के लिए घटक संरचना का उपयोग करें
2. चिंताओं को स्पष्ट रूप से अलग करने के लिए कंटेनर/प्रस्तुति का लाभ उठाएं
3. क्रॉस-कटिंग चिंताओं के लिए एचओसी को नियोजित करें
4. परम लचीलेपन के लिए रेंडर प्रॉप्स का उपयोग करें
5. स्टेटफुल लॉजिक साझा करने के लिए कस्टम हुक बनाएं

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

हैप्पी कोडिंग!