Organizimi i kodit me grepa dhe kontekst React

Kur punoni në projekte React në shkallë të gjerë, është thelbësore të keni një bazë kodi të mirëorganizuar për mirëmbajtje dhe shkallëzim më të mirë.

Në këtë artikull, ne do të shqyrtojmë praktikat më të mira për organizimin e kodit tuaj burimor në React, me fokus në përdorimin e React Hooks dhe Context.

 

Përdorimi i React Hooks për menaxhimin e shtetit

React Hooks janë një koleksion funksionesh që ju lejojnë të përdorni gjendjen dhe veçoritë e tjera të React pa përdorur klasa. Kjo ndihmon për të shkruar një kod më konciz dhe të lexueshëm. Për shembull, ne mund të përdorim UseState Hook për të menaxhuar gjendjen në një komponent.

Këtu është një shembull:

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;  

 

Kombinimi i përbërësve

Një nga përfitimet e React është aftësia për të ripërdorur komponentët. Për të rritur organizimin, ne mund të përdorim komponentë më të vegjël për të ndërtuar komponentë më të mëdhenj.

Kjo ndihmon për të zbërthyer punën dhe për ta bërë kodin të lehtë për tu mirëmbajtur. Për shembull, ne mund të krijojmë një <Button> komponent për t'u përdorur në shumë vende në aplikacionin tonë:

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

 

Përdorimi i kontekstit për të menaxhuar gjendjen globale

Konteksti është një mekanizëm në React që na lejon të ndajmë të dhëna midis komponentëve fëmijë pa kaluar nëpër komponentët prindër. Kjo shmang kalimin e atributeve të të dhënave nëpër nivele të shumëfishta komponentësh dhe ndihmon në reduktimin e kompleksitetit të kodit.

Këtu është një shembull i përdorimit të Konteksit për të ndarë gjuhën aktuale në aplikacion:

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;  

 

Më sipër janë disa praktika më të mira për organizimin e kodit burimor React duke përdorur React Hooks dhe Context.