Kód szervezése React Hook-okkal és kontextussal

Ha nagyszabású React-projekteken dolgozik, kulcsfontosságú egy jól szervezett kódbázis a jobb karbantarthatóság és méretezhetőség érdekében.

Ebben a cikkben a forráskód React rendszerezésének bevált módszereit mutatjuk be, különös tekintettel a React Hook és Context használatára.

 

React Hooks használata az államigazgatáshoz

A React Hook olyan funkciók gyűjteménye, amelyek lehetővé teszik az állapot és egyéb React funkciók használatát osztályok használata nélkül. Ez segít tömörebb és olvashatóbb kód írásában. Például használhatjuk a useState Hook-ot egy összetevő állapotának kezelésére.

Íme egy példa:

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;  

 

Összetevők kombinációja

A React egyik előnye az összetevők újrafelhasználásának lehetősége. A szervezettség növelése érdekében kisebb alkatrészeket használhatunk nagyobb komponensek összeállításához.

Ez segít lebontani a munkát, és megkönnyíti a kód karbantartását. Például létrehozhatunk egy <Button> komponenst, amelyet több helyen használunk az alkalmazásunkban:

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

 

Kontextus használata a globális állapot kezelésére

A kontextus a React egy olyan mechanizmusa, amely lehetővé teszi számunkra, hogy adatokat osszunk meg a gyermekkomponensek között anélkül, hogy áthaladnánk a szülőkomponenseken. Ezzel elkerülhető az adatattribútumok több összetevőszinten való átadása, és csökkenthető a kód bonyolultsága.

Íme egy példa a Context használatával az aktuális nyelv megosztására az alkalmazásban:

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;  

 

A fentiekben bemutatunk néhány bevált módszert a React forráskód React Hooks és Context segítségével történő rendszerezésére.