எதிர்வினை கொக்கிகள் மற்றும் சூழலுடன் குறியீட்டை ஒழுங்கமைத்தல்

பெரிய அளவிலான ரியாக்ட் திட்டங்களில் பணிபுரியும் போது, ​​சிறந்த பராமரிப்பு மற்றும் அளவிடுதல் ஆகியவற்றிற்கு நன்கு ஒழுங்கமைக்கப்பட்ட கோட்பேஸ் இருப்பது முக்கியம்.

இந்தக் கட்டுரையில், ரியாக்ட் ஹூக்ஸ் மற்றும் சூழலைப் பயன்படுத்துவதில் கவனம் செலுத்துவதன் மூலம், உங்கள் மூலக் குறியீட்டை ரியாக்டில் ஒழுங்கமைப்பதற்கான சிறந்த நடைமுறைகளுக்கு நாங்கள் முழுக்கு போடுவோம்.

மாநில நிர்வாகத்திற்கு ரியாக்ட் ஹூக்குகளைப் பயன்படுத்துதல்

ரியாக்ட் ஹூக்ஸ் என்பது வகுப்புகளைப் பயன்படுத்தாமல் நிலை மற்றும் பிற எதிர்வினை அம்சங்களைப் பயன்படுத்த அனுமதிக்கும் செயல்பாடுகளின் தொகுப்பாகும். இது மிகவும் சுருக்கமான மற்றும் படிக்கக்கூடிய குறியீட்டை எழுத உதவுகிறது. எடுத்துக்காட்டாக, ஒரு கூறுகளில் நிலையை நிர்வகிக்க யூஸ்ஸ்டேட் ஹூக்கைப் பயன்படுத்தலாம்.

இங்கே ஒரு உதாரணம்:

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;  

ரியாக்ட் ஹூக்ஸ் மற்றும் சூழலைப் பயன்படுத்தி எதிர்வினை மூலக் குறியீட்டை ஒழுங்கமைப்பதற்கான சில சிறந்த நடைமுறைகள் மேலே உள்ளன.