Οργάνωση κώδικα με React Hooks και Context

Όταν εργάζεστε σε έργα React μεγάλης κλίμακας, είναι σημαντικό να έχετε μια καλά οργανωμένη βάση κώδικα για καλύτερη συντηρησιμότητα και επεκτασιμότητα.

Σε αυτό το άρθρο, θα εξετάσουμε τις βέλτιστες πρακτικές για την οργάνωση του πηγαίου κώδικα σας στο React, με έμφαση στη χρήση των γάντζων και του πλαισίου React.

 

Χρήση 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;  

 

Χρήση του περιβάλλοντος για τη διαχείριση της παγκόσμιας κατάστασης

Το Context είναι ένας μηχανισμός στο React που μας επιτρέπει να μοιραζόμαστε δεδομένα μεταξύ θυγατρικών στοιχείων χωρίς να περνάμε από γονικά στοιχεία. Αυτό αποφεύγει τη μετάδοση χαρακτηριστικών δεδομένων σε πολλαπλά επίπεδα στοιχείων και συμβάλλει στη μείωση της πολυπλοκότητας του κώδικα.

Ακολουθεί ένα παράδειγμα χρήσης του Context για κοινή χρήση της τρέχουσας γλώσσας στην εφαρμογή:

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 χρησιμοποιώντας τα Hooks και το Context React.