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

1. प्रस्तुतिकरण और कंटेनर घटक

रिएक्ट में मूलभूत पैटर्न में से एक प्रेजेंटेशनल और कंटेनर कंपोनेंट्स पैटर्न है, जो चिंताओं को अलग करने के बारे में है:

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

• कंटेनर घटक: ये घटक प्रबंधित करते हैं कि चीजें कैसे काम करती हैं। उनमें तर्क होता है, स्थिति का प्रबंधन होता है, और डेटा लाने या ईवेंट को संभालने का काम होता है। कंटेनर घटक प्रेजेंटेशनल घटकों को डेटा पास करते हैं।

// Presentational Component
const UserProfile = ({ user }) => (
  

    
{user.name}
    
{user.email}
  
);

// Container Component
const UserProfileContainer = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: '[email protected]' });

  return ;
};

यह पैटर्न चिंताओं को अलग करने को प्रोत्साहित करता है, जिससे कोड को बनाए रखना और परीक्षण करना आसान हो जाता है।

2. उच्च-क्रम घटक (HOC)

उच्च-क्रम घटक (एचओसी) घटक तर्क का पुन: उपयोग करने के लिए एक शक्तिशाली डिजाइन पैटर्न हैं। एचओसी एक फ़ंक्शन है जो एक घटक लेता है और उन्नत व्यवहार या अतिरिक्त कार्यक्षमता के साथ एक नया घटक लौटाता है।

यह पैटर्न आमतौर पर प्रमाणीकरण, थीमिंग, या डेटा फ़ेचिंग जैसी क्रॉस-कटिंग चिंताओं के लिए उपयोग किया जाता है।

// Higher-Order Component for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // logic to check auth;

    if (!isAuthenticated) {
      return 
You need to log in!
;
    }

    return ;
  };
};

// Usage
const Dashboard = () => 
Welcome to the dashboard
;
export default withAuth(Dashboard);

HOCs कई घटकों में पुन: प्रयोज्य तर्क को सक्षम करके DRY (डोंट रिपीट योरसेल्फ) सिद्धांतों को बढ़ावा देते हैं।

3. प्रॉप्स प्रस्तुत करें

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

// Render Prop Component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

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

  render() {
    return (
      

        {this.props.render(this.state)}
      
    );
  }
}

// Usage
const App = () => (
  
Mouse position: {x}, {y}
} />
);

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

4. यौगिक अवयव

कंपाउंड कंपोनेंट पैटर्न का उपयोग आमतौर पर प्रतिक्रिया-चयन या प्रतिक्रिया-तालिका जैसे पुस्तकालयों में किया जाता है। यह मूल घटक को बाल घटकों के समूह को नियंत्रित करने की अनुमति देता है। यह पैटर्न पुन: प्रयोज्य और गतिशील इंटरफेस के निर्माण में लचीलेपन को बढ़ावा देता है।

// Compound Component
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    

      

        {children.map((child, index) => (
           setActiveTab(index)}>
            {child.props.title}
          
        ))}
      
      
{children[activeTab]}
    
  );
};

// Usage
Content of Tab 1
  
Content of Tab 2
;

यह पैटर्न घटकों को लचीला और अनुकूलन योग्य रखते हुए माता-पिता-बच्चे के संचार के लिए एक स्वच्छ एपीआई प्रदान करता है।

5. नियंत्रित बनाम अनियंत्रित घटक

रिएक्ट फॉर्म इनपुट को प्रबंधित करने के दो तरीके प्रदान करता है: नियंत्रित घटक और अनियंत्रित घटक।

• नियंत्रित घटक: इन घटकों की स्थिति पूरी तरह से रिएक्ट द्वारा प्रॉप्स के माध्यम से नियंत्रित होती है, जो उन्हें अधिक पूर्वानुमानित बनाती है।

• अनियंत्रित घटक: ये घटक सीधे डीओएम में हेरफेर करने के लिए रेफरी पर भरोसा करते हैं, कम नियंत्रण प्रदान करते हैं लेकिन संभावित रूप से अधिक प्रदर्शन प्रदान करते हैं।

// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState('');

  return  setValue(e.target.value)} />;
};

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return ;
};

इन पैटर्न के बीच चयन करना इस बात पर निर्भर करता है कि आपको सूक्ष्म नियंत्रण की आवश्यकता है या हल्के प्रदर्शन अनुकूलन की।

6. कस्टम हुक

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

// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

  return { data, error };
};

// Usage
const DataFetchingComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) return 
Error: {error.message}
;
  if (!data) return 
Loading...
;

  return 
{data.someField}
;
};

कस्टम हुक चिंताओं को बेहतर ढंग से अलग करने और घोषणात्मक तरीके से सामान्य कार्यक्षमता का पुन: उपयोग करने में सक्षम बनाते हैं।

निष्कर्ष

डिज़ाइन पैटर्न स्वच्छ, रखरखाव योग्य और स्केलेबल रिएक्ट एप्लिकेशन लिखने का एक महत्वपूर्ण हिस्सा हैं। प्रेजेंटेशनल और कंटेनर कंपोनेंट्स, एचओसी, रेंडर प्रॉप्स, कंपाउंड कंपोनेंट्स और कस्टम हुक जैसे पैटर्न का लाभ उठाकर, आप यह सुनिश्चित कर सकते हैं कि आपका कोड लचीला, पुन: प्रयोज्य और समझने में आसान है।

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