Code mit React Hooks und Kontext organisieren

Bei der Arbeit an großen React-Projekten ist eine gut organisierte Codebasis für eine bessere Wartbarkeit und Skalierbarkeit von entscheidender Bedeutung.

In diesem Artikel befassen wir uns mit den Best Practices für die Organisation Ihres Quellcodes in React, wobei der Schwerpunkt auf der Verwendung von React Hooks und Context liegt.

 

Verwenden von React Hooks für die Statusverwaltung

React Hooks sind eine Sammlung von Funktionen, mit denen Sie Status- und andere React-Funktionen verwenden können, ohne Klassen zu verwenden. Dies hilft, prägnanteren und lesbareren Code zu schreiben. Beispielsweise können wir den useState Hook verwenden, um den Status einer Komponente zu verwalten.

Hier ist ein Beispiel:

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 von Zutaten

Einer der Vorteile von React ist die Möglichkeit, Komponenten wiederzuverwenden. Um die Organisation zu verbessern, können wir kleinere Komponenten verwenden, um größere Komponenten zu erstellen.

Dies trägt dazu bei, die Arbeit zu vereinfachen und die Wartung des Codes zu vereinfachen. Beispielsweise können wir eine <Button> Komponente erstellen, die wir an mehreren Stellen in unserer Anwendung verwenden:

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

 

Verwenden von Kontext zum Verwalten des globalen Status

Kontext ist ein Mechanismus in React, der es uns ermöglicht, Daten zwischen untergeordneten Komponenten auszutauschen, ohne die übergeordneten Komponenten zu durchlaufen. Dadurch wird die Weitergabe von Datenattributen über mehrere Komponentenebenen hinweg vermieden und die Komplexität des Codes verringert.

Hier ist ein Beispiel für die Verwendung von Context zum Teilen der aktuellen Sprache in der Anwendung:

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;  

 

Oben sind einige Best Practices für die Organisation des React-Quellcodes mithilfe von React Hooks und Context aufgeführt.