रिएक्ट हुक और संदर्भ के साथ कोड का आयोजन

बड़े पैमाने पर रिएक्ट परियोजनाओं पर काम करते समय, बेहतर रखरखाव और स्केलेबिलिटी के लिए एक सुव्यवस्थित कोडबेस होना महत्वपूर्ण है।

इस लेख में, हम रिएक्ट हुक और कॉन्टेक्स्ट के उपयोग पर ध्यान देने के साथ, रिएक्ट में आपके स्रोत कोड को व्यवस्थित करने के सर्वोत्तम तरीकों पर चर्चा करेंगे।

 

राज्य प्रबंधन के लिए रिएक्ट हुक का उपयोग करना

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

यहाँ एक उदाहरण है:

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

 

सामग्री का संयोजन

रिएक्ट के लाभों में से एक घटकों का पुन: उपयोग करने की क्षमता है। संगठन को बढ़ाने के लिए, हम बड़े घटकों के निर्माण के लिए छोटे घटकों का उपयोग कर सकते हैं।

इससे काम को तोड़ने में मदद मिलती है और कोड को बनाए रखना आसान हो जाता है। उदाहरण के लिए, हम <Button> अपने एप्लिकेशन में कई स्थानों पर उपयोग करने के लिए एक घटक बना सकते हैं:

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

 

वैश्विक स्थिति को प्रबंधित करने के लिए संदर्भ का उपयोग करना

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

एप्लिकेशन में वर्तमान भाषा को साझा करने के लिए संदर्भ का उपयोग करने का एक उदाहरण यहां दिया गया है:

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

 

रिएक्ट हुक और कॉन्टेक्स्ट का उपयोग करके रिएक्ट स्रोत कोड को व्यवस्थित करने के लिए ऊपर कुछ सर्वोत्तम अभ्यास दिए गए हैं।