Organiziranje kode s kavlji React in kontekstom

Ko delate na obsežnih projektih React, je ključnega pomena, da imate dobro organizirano kodno zbirko za boljšo vzdržljivost in razširljivost.

V tem članku se bomo poglobili v najboljše prakse za organiziranje vaše izvorne kode v Reactu, s poudarkom na uporabi React Hooks in Context.

 

Uporaba React Hooks za upravljanje stanja

React Hooks so zbirka funkcij, ki vam omogočajo uporabo stanja in drugih funkcij React brez uporabe razredov. To pomaga napisati bolj jedrnato in berljivo kodo. Za upravljanje stanja v komponenti lahko na primer uporabimo useState Hook.

Tukaj je primer:

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;  

 

Kombinacija sestavin

Ena od prednosti Reacta je možnost ponovne uporabe komponent. Za večjo organiziranost lahko uporabimo manjše komponente za izdelavo večjih komponent.

To pomaga razčleniti delo in olajša vzdrževanje kode. Ustvarimo lahko na primer <Button> komponento za uporabo na več mestih v naši aplikaciji:

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

 

Uporaba konteksta za upravljanje globalnega stanja

Kontekst je mehanizem v Reactu, ki nam omogoča skupno rabo podatkov med podrejenimi komponentami brez prehoda skozi nadrejene komponente. S tem se izognete posredovanju podatkovnih atributov na več ravneh komponent in pomaga zmanjšati zapletenost kode.

Tukaj je primer uporabe konteksta za skupno rabo trenutnega jezika v aplikaciji:

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;  

 

Zgoraj je nekaj najboljših praks za organiziranje izvorne kode React z uporabo React Hooks in Context.