კოდის ორგანიზება React Hook-ებით და კონტექსტით

React-ის მასშტაბურ პროექტებზე მუშაობისას, მნიშვნელოვანია გქონდეთ კარგად ორგანიზებული კოდების ბაზა უკეთესი შენარჩუნებისა და მასშტაბურობისთვის.

ამ სტატიაში, ჩვენ განვიხილავთ React-ში თქვენი წყაროს კოდის ორგანიზების საუკეთესო პრაქტიკას, აქცენტით React Hooks-ისა და Context-ის გამოყენებაზე.

React Hooks-ის გამოყენება სახელმწიფო მართვისთვის

React Hooks არის ფუნქციების კოლექცია, რომელიც საშუალებას გაძლევთ გამოიყენოთ სახელმწიფო და სხვა React ფუნქციები კლასების გამოყენების გარეშე. ეს ხელს უწყობს უფრო ლაკონური და წასაკითხი კოდის დაწერას. მაგალითად, ჩვენ შეგვიძლია გამოვიყენოთ useState Hook კომპონენტის მდგომარეობის სამართავად.

აი მაგალითი:

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;  

ინგრედიენტების კომბინაცია

React-ის ერთ-ერთი უპირატესობაა კომპონენტების ხელახლა გამოყენების შესაძლებლობა. ორგანიზაციის გასაზრდელად, ჩვენ შეგვიძლია გამოვიყენოთ პატარა კომპონენტები უფრო დიდი კომპონენტების შესაქმნელად.

ეს ხელს უწყობს სამუშაოს დაშლას და კოდის ადვილად შენარჩუნებას. მაგალითად, ჩვენ შეგვიძლია შევქმნათ <Button> კომპონენტი ჩვენს აპლიკაციაში მრავალ ადგილას გამოსაყენებლად:

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

კონტექსტის გამოყენება გლობალური მდგომარეობის სამართავად

კონტექსტი არის მექანიზმი React-ში, რომელიც საშუალებას გვაძლევს გავაზიაროთ მონაცემები შვილობილ კომპონენტებს შორის მშობელი კომპონენტების გავლის გარეშე. ეს თავიდან აიცილებს მონაცემთა ატრიბუტების გადაცემას რამდენიმე კომპონენტის დონეზე და ხელს უწყობს კოდის სირთულის შემცირებას.

აქ მოცემულია კონტექსტის გამოყენების მაგალითი აპლიკაციაში მიმდინარე ენის გასაზიარებლად:

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;  

ზემოთ მოცემულია რამდენიმე საუკეთესო პრაქტიკა React წყაროს კოდის ორგანიზებისთვის React Hooks-ისა და Context-ის გამოყენებით.