Organizavimo kodas su reagavimo kabliukais ir kontekstu

Dirbant su didelio masto React projektais, labai svarbu turėti gerai sutvarkytą kodų bazę, kad būtų lengviau prižiūrėti ir keisti mastelį.

Šiame straipsnyje apžvelgsime geriausią šaltinio kodo „React“ organizavimo praktiką, daugiausia dėmesio skirdami „React Hooks“ ir konteksto naudojimui.

 

„React Hooks“ naudojimas valstybės valdymui

„React Hooks“ yra funkcijų rinkinys, leidžiantis naudoti būseną ir kitas „React“ funkcijas nenaudojant klasių. Tai padeda parašyti glaustesnį ir įskaitomesnį kodą. Pavyzdžiui, komponento būsenai valdyti galime naudoti „useState Hook“.

Štai pavyzdys:

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;  

 

Sudedamųjų dalių derinys

Vienas iš „React“ pranašumų yra galimybė pakartotinai naudoti komponentus. Norėdami padidinti organizavimą, galime naudoti mažesnius komponentus, kad sukurtume didesnius komponentus.

Tai padeda suskaidyti darbą ir palengvina kodo priežiūrą. Pavyzdžiui, galime sukurti <Button> komponentą, kurį naudosime keliose programos vietose:

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

 

Konteksto naudojimas pasaulinei būklei valdyti

Kontekstas yra „React“ mechanizmas, leidžiantis dalytis duomenimis tarp antrinių komponentų, neperžengiant pirminių komponentų. Taip išvengiama duomenų atributų perdavimo keliuose komponentų lygiuose ir padedama sumažinti kodo sudėtingumą.

Štai pavyzdys, kaip naudoti kontekstą norint bendrinti esamą kalbą programoje:

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;  

 

Aukščiau yra keletas geriausių „React“ šaltinio kodo organizavimo naudojant „React Hooks“ ir „Context“ praktikos pavyzdžių.