प्रतिक्रिया हुक आणि संदर्भासह संहिता आयोजित करणे

मोठ्या प्रमाणावरील प्रतिक्रिया प्रकल्पांवर काम करताना, उत्तम देखभालक्षमता आणि स्केलेबिलिटीसाठी सुव्यवस्थित कोडबेस असणे महत्त्वाचे आहे.

या लेखात, आम्ही प्रतिक्रिया हुक आणि संदर्भ वापरण्यावर लक्ष केंद्रित करून, तुमचा सोर्स कोड React मध्ये व्यवस्थापित करण्याच्या सर्वोत्तम पद्धतींचा अभ्यास करू.

 

राज्य व्यवस्थापनासाठी प्रतिक्रिया हुक वापरणे

React Hooks हा फंक्शन्सचा एक संग्रह आहे जो तुम्हाला क्लासेस न वापरता स्टेट आणि इतर React वैशिष्ट्ये वापरण्याची परवानगी देतो. हे अधिक संक्षिप्त आणि वाचनीय कोड लिहिण्यास मदत करते. उदाहरणार्थ, घटकातील स्थिती व्यवस्थापित करण्यासाठी आपण useState Hook वापरू शकतो.

येथे एक उदाहरण आहे:

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;  

 

घटकांचे संयोजन

React चा एक फायदा म्हणजे घटकांचा पुनर्वापर करण्याची क्षमता. संघटना वाढवण्यासाठी, आम्ही मोठे घटक तयार करण्यासाठी लहान घटक वापरू शकतो.

हे काम खंडित करण्यात मदत करते आणि कोड राखणे सोपे करते. उदाहरणार्थ, आम्ही <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;  

 

React Hooks आणि Context वापरून React सोर्स कोड आयोजित करण्यासाठी वर काही उत्तम पद्धती आहेत.