close

Organizowanie kodu za pomocą haków reagowania i kontekstu

Podczas pracy nad projektami React na dużą skalę, posiadanie dobrze zorganizowanej bazy kodu ma kluczowe znaczenie dla lepszej konserwacji i skalowalności.

W tym artykule przyjrzymy się najlepszym praktykom organizowania kodu źródłowego w React, skupiając się na wykorzystaniu React Hooks i Context.

 

Używanie hooków reagowania do zarządzania stanem

Hooki React to zbiór funkcji, które pozwalają na używanie stanu i innych funkcji Reacta bez używania klas. Pomaga to pisać bardziej zwięzły i czytelny kod. Na przykład możemy użyć hooka useState do zarządzania stanem w komponencie.

Oto przykład:

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;

 

Połączenie składników

Jedną z zalet React jest możliwość ponownego wykorzystania komponentów. Aby zwiększyć organizację, możemy użyć mniejszych komponentów do zbudowania większych komponentów.

Pomaga to rozłożyć pracę i ułatwić konserwację kodu. Na przykład możemy stworzyć <Button> komponent do użycia w wielu miejscach w naszej aplikacji:

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

 

Używanie kontekstu do zarządzania stanem globalnym

Kontekst to mechanizm w React, który pozwala nam udostępniać dane między komponentami potomnymi bez przechodzenia przez komponenty nadrzędne. Pozwala to uniknąć przekazywania atrybutów danych na wielu poziomach komponentów i pomaga zmniejszyć złożoność kodu.

Oto przykład wykorzystania kontekstu do udostępniania bieżącego języka w aplikacji:

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;

 

Powyżej znajduje się kilka najlepszych praktyk organizowania kodu źródłowego React za pomocą React Hooks i Context.