Code organiseren met React Hooks en Context

Bij het werken aan grootschalige React-projecten is het cruciaal om een ​​goed georganiseerde codebase te hebben voor betere onderhoudbaarheid en schaalbaarheid.

In dit artikel duiken we in de best practices voor het organiseren van je broncode in React, met een focus op het gebruik van React Hooks en Context.

 

React Hooks gebruiken voor statusbeheer

React Hooks zijn een verzameling functies waarmee u state en andere React-functies kunt gebruiken zonder klassen te gebruiken. Dit helpt om beknoptere en leesbare code te schrijven. We kunnen bijvoorbeeld de useState Hook gebruiken om de status van een component te beheren.

Hier is een voorbeeld:

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;  

 

Combinatie van ingrediënten

Een van de voordelen van React is de mogelijkheid om componenten opnieuw te gebruiken. Om de organisatie te vergroten, kunnen we kleinere componenten gebruiken om grotere componenten te bouwen.

Dit helpt om het werk op te splitsen en de code gemakkelijk te onderhouden te maken. We kunnen bijvoorbeeld een <Button> component maken om op meerdere plaatsen in onze applicatie te gebruiken:

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

 

Context gebruiken om de globale status te beheren

Context is een mechanisme in React waarmee we gegevens tussen onderliggende componenten kunnen delen zonder door bovenliggende componenten te gaan. Dit voorkomt dat gegevensattributen over meerdere componentniveaus worden doorgegeven en helpt de complexiteit van de code te verminderen.

Hier is een voorbeeld van het gebruik van Context om de huidige taal in de applicatie te delen:

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;  

 

Hierboven vindt u enkele best practices voor het organiseren van React-broncode met behulp van React Hooks en Context.