Organiseringskode med React Hooks og kontekst

Når du arbejder på store React-projekter, er det afgørende at have en velorganiseret kodebase for bedre vedligeholdelse og skalerbarhed.

I denne artikel vil vi dykke ned i bedste praksis for at organisere din kildekode i React med fokus på at bruge React Hooks og Context.

 

Brug af React Hooks til statsforvaltning

React Hooks er en samling funktioner, der giver dig mulighed for at bruge tilstand og andre React-funktioner uden at bruge klasser. Dette hjælper med at skrive mere kortfattet og læsbar kode. For eksempel kan vi bruge useState Hook til at administrere tilstand i en komponent.

Her er et eksempel:

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;  

 

Kombination af ingredienser

En af fordelene ved React er muligheden for at genbruge komponenter. For at øge organisationen kan vi bruge mindre komponenter til at bygge større komponenter.

Dette er med til at nedbryde arbejdet og gøre koden nem at vedligeholde. For eksempel kan vi oprette en <Button> komponent til brug flere steder i vores applikation:

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

 

Brug af kontekst til at styre global tilstand

Kontekst er en mekanisme i React, der giver os mulighed for at dele data mellem underordnede komponenter uden at gå gennem overordnede komponenter. Dette undgår at overføre dataattributter på tværs af flere komponentniveauer og hjælper med at reducere kodekompleksiteten.

Her er et eksempel på brug af kontekst til at dele det aktuelle sprog i applikationen:

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;  

 

Ovenfor er nogle bedste fremgangsmåder til at organisere React-kildekode ved hjælp af React Hooks og Context.