Organiseringskode med React Hooks og kontekst

Når du jobber med store React-prosjekter, er det avgjørende å ha en godt organisert kodebase for bedre vedlikehold og skalerbarhet.

I denne artikkelen vil vi dykke ned i de beste fremgangsmåtene for å organisere kildekoden din i React, med fokus på å bruke React Hooks og Context.

 

Bruke React Hooks for State Management

React Hooks er en samling funksjoner som lar deg bruke tilstand og andre React-funksjoner uten å bruke klasser. Dette bidrar til å skrive mer kortfattet og lesbar kode. For eksempel kan vi bruke useState Hook til å administrere tilstanden 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;  

 

Kombinasjon av ingredienser

En av fordelene med React er muligheten til å gjenbruke komponenter. For å øke organisasjonen kan vi bruke mindre komponenter til å bygge større komponenter.

Dette bidrar til å bryte ned arbeidet og gjøre koden enkel å vedlikeholde. For eksempel kan vi lage en <Button> komponent som skal brukes flere steder i applikasjonen vår:

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

 

Bruke kontekst til å administrere global tilstand

Kontekst er en mekanisme i React som lar oss dele data mellom underordnede komponenter uten å gå gjennom overordnede komponenter. Dette unngår å sende dataattributter på tvers av flere komponentnivåer og bidrar til å redusere kodekompleksiteten.

Her er et eksempel på bruk av Context for å dele gjeldende språk i applikasjonen:

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 noen beste fremgangsmåter for å organisere React-kildekoden ved å bruke React Hooks og Context.