Järjestäminen koodi React Hooks ja konteksti

Kun työskentelet suurissa React-projekteissa, on erittäin tärkeää, että sinulla on hyvin organisoitu koodikanta paremman ylläpidettävyyden ja skaalautuvuuden parantamiseksi.

Tässä artikkelissa sukeltamme parhaisiin käytäntöihin lähdekoodisi järjestämiseen Reactissa keskittyen React Hookien ja kontekstin hyödyntämiseen.

 

React Hooksin käyttö valtionhallinnossa

React Hooks on kokoelma toimintoja, joiden avulla voit käyttää tila- ja muita React-ominaisuuksia ilman luokkia. Tämä auttaa kirjoittamaan tiiviimpää ja luettavampaa koodia. Voimme esimerkiksi käyttää useState Hookia komponentin tilan hallitsemiseen.

Tässä on esimerkki:

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;  

 

Ainesosien yhdistelmä

Yksi Reactin eduista on kyky käyttää komponentteja uudelleen. Organisaation lisäämiseksi voimme käyttää pienempiä komponentteja suurempien komponenttien rakentamiseen.

Tämä helpottaa työn hajottamista ja tekee koodin ylläpidosta helppoa. Voimme esimerkiksi luoda <Button> komponentin käytettäväksi useissa paikoissa sovelluksessamme:

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

 

Kontekstin käyttö globaalin tilan hallintaan

Konteksti on Reactissa mekanismi, jonka avulla voimme jakaa tietoja alikomponenttien välillä ilman, että kuljemme vanhempien komponenttien läpi. Tämä välttää tietomääritteiden välittämisen useiden komponenttitasojen välillä ja auttaa vähentämään koodin monimutkaisuutta.

Tässä on esimerkki kontekstin käyttämisestä nykyisen kielen jakamiseen sovelluksessa:

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;  

 

Yllä on joitain parhaita käytäntöjä React-lähdekoodin järjestämiseen React Hooksin ja kontekstin avulla.