Cod de organizare cu React Hooks și Context

Când lucrați la proiecte React la scară largă, este esențial să aveți o bază de cod bine organizată pentru o mai bună întreținere și scalabilitate.

În acest articol, ne vom scufunda în cele mai bune practici pentru organizarea codului sursă în React, cu accent pe utilizarea React Hooks și Context.

 

Utilizarea React Hooks pentru managementul statului

React Hooks sunt o colecție de funcții care vă permit să utilizați stare și alte funcții React fără a utiliza clase. Acest lucru ajută la scrierea unui cod mai concis și mai ușor de citit. De exemplu, putem folosi useState Hook pentru a gestiona starea într-o componentă.

Iată un exemplu:

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;  

 

Combinație de ingrediente

Unul dintre beneficiile React este capacitatea de a reutiliza componente. Pentru a crește organizarea, putem folosi componente mai mici pentru a construi componente mai mari.

Acest lucru ajută la descompunerea lucrărilor și la facilitarea întreținerii codului. De exemplu, putem crea o <Button> componentă de utilizat în mai multe locuri în aplicația noastră:

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

 

Utilizarea contextului pentru a gestiona starea globală

Contextul este un mecanism din React care ne permite să partajăm date între componentele copil fără a trece prin componentele părinte. Acest lucru evită transmiterea atributelor de date pe mai multe niveluri de componente și ajută la reducerea complexității codului.

Iată un exemplu de utilizare a contextului pentru a partaja limba curentă în aplicație:

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;  

 

Mai sus sunt câteva bune practici pentru organizarea codului sursă React folosind React Hooks și Context.