Organiseringskod med React Hooks och sammanhang

När du arbetar med storskaliga React-projekt är det avgörande att ha en välorganiserad kodbas för bättre underhållsbarhet och skalbarhet.

I den här artikeln kommer vi att dyka ner i de bästa metoderna för att organisera din källkod i React, med fokus på att använda React Hooks och Context.

 

Använda React Hooks för State Management

React Hooks är en samling funktioner som låter dig använda tillstånd och andra React-funktioner utan att använda klasser. Detta hjälper till att skriva mer koncis och läsbar kod. Till exempel kan vi använda useState Hook för att hantera tillstånd i en komponent.

Här är ett exempel:

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 av ingredienser

En av fördelarna med React är möjligheten att återanvända komponenter. För att öka organisationen kan vi använda mindre komponenter för att bygga större komponenter.

Detta hjälper till att bryta ner arbetet och göra koden lätt att underhålla. Till exempel kan vi skapa en <Button> komponent att använda på flera ställen i vår applikation:

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

 

Använder Context för att hantera globala tillstånd

Kontext är en mekanism i React som gör att vi kan dela data mellan underordnade komponenter utan att gå igenom överordnade komponenter. Detta undviker att skicka dataattribut över flera komponentnivåer och hjälper till att minska kodkomplexiteten.

Här är ett exempel på hur du använder Context för att dela det aktuella språket 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;  

 

Ovan är några bästa metoder för att organisera React-källkod med React Hooks och Context.