Programmazione orientata agli oggetti in React

Dec 21 2022

Foto di Lautaro Andreani su Unsplash

Per rendere l'applicazione più robusta è necessario utilizzare il concetto OOP nella loro applicazione. Tuttavia, ReactJS è migliorato di per sé, quindi devi seguire il suo principio per creare qualsiasi applicazione. Oggi vedremo come e quali alternative possiamo utilizzare per rendere la nostra applicazione più orientata agli oggetti

Cos'è la programmazione orientata agli oggetti in React?

La programmazione orientata agli oggetti è un modo per rendere il tuo codice più riutilizzabile su intere app e servizi. Un oggetto può interagire con altri oggetti, programmi e utenti in modo più efficace rispetto a un semplice oggetto javascript

Come possiamo raggiungere questo risultato?

Se preferisci utilizzare componenti di classe nella tua applicazione, è molto più semplice aggiungere metodi e stati di supporto, ma la sfida arriva quando lavori con componenti di funzione e hook. Facciamo un esempio per vedere qual è il blocco di primo livello nell'utilizzo di classi regolari per il componente funzionale

Ho creato una classe chiamata Usere usando useStatenel contesto, esponendo anche due metodi setNamee getNamefungendo da getter e setter per me. Ricevo un errore durante l'utilizzo di useStatee ie

React Hook "useState" cannot be called in a class component.
React Hooks must be called in a React function component or 
a custom React Hook function. (react-hooks/rules-of-hooks)eslint

      
                
                    
                    
       User class with useState

const user = new User('name')
  return (
    <div className="App">
      <button onClick={() => user.setName("first name")}>click</button>
      {user.getName()}
    </div>
  );

Utilizzo del costruttore funzionale per il componente funzionale

Poiché non possiamo utilizzare il costruttore di classi, utilizzeremo il costruttore funzionale. Le funzioni non ci daranno errori ma ridurranno il potere che abbiamo con le classi. Ad esempio, l'estensione sarà un po' complicata

Per il costruttore di funzioni, possiamo definire le proprietà e usarle nello stesso modo in cui abbiamo usato per il costruttore di classi. questa volta non avremo errori e le cose funzioneranno senza intoppi

Costruttore funzionale

L'utilizzo della seguente programmazione sarà simile allo snippet sottostante. Dopo aver fatto clic su ciascun pulsante, vedremo le modifiche

export default function App() {
  const user = new User("hello");
  return (
    <div className="App">
      <button onClick={() => user.setAge(10)}>age</button>
      <button onClick={() => user.setProfile("first profile")}>profile</button>
      <button onClick={() => user.setName("first name")}>name</button>
      <button onClick={() => user.save()}>save</button>
    </div>
  );
}

// after save click - output from log
data: Object
  name: "first name"
  age: 10
  profile: "first profile"

Gli hook del modello sono casi d'uso di hook in cui definiamo una cartella specifica per i modelli Usere lì conserviamo tutti i metodi di supporto necessari e funzionerà e agirà come un'istanza normale con cui stiamo lavorando.

L'idea alla base di questo tipo di hook è di esporre tutti i metodi di stato insieme ai soli metodi helper e non inserire altri hook nel contesto purché non siano necessari al componente. Di seguito è riportato un esempio di tale hook

useUser hook per gestire lo stato degli utenti

Anche l'output dell'hook seguente è lo stesso di un costruttore funzionale. Ci sono alcuni punti aggiuntivi che possono essere dichiarati

i ganci funzioneranno solo all'interno del componente
Il costruttore funzionale funzionerà al di fuori del tuo componente purché non utilizzi uno stato

L'uso della programmazione orientata agli oggetti è importante per qualsiasi applicazione se ci sono molte interdipendenze da gestire e ti aiuterà anche a gestire il tuo codice se inizia a ridimensionarsi.