Se lavori con React da un po', probabilmente ti sei imbattuto contenitore ed componenti di presentazione o componenti intelligenti e stupidi. Questi termini descrivono a modello che divide il livello dell'interfaccia utente dei componenti React dalla logica.
Separare l'interfaccia utente dalla logica aziendale non è nulla di unico per React: la separazione delle preoccupazioni è un principio di progettazione che ha esisteva già negli anni '70. Ad esempio, è prassi comune separare il codice che accede al database dalla logica di business sul back-end.
Quindi, in React, abbiamo risolto questo problema creando componenti contenitore che contengono tutta la logica, che avrebbe poi trasmesso i dati tramite prop al componente di presentazione.
Con l'introduzione degli hook React, c'è un nuovo approccio a questo: l'utilizzo ganci personalizzati.
Perché dovremmo separare la logica dal componente?
Prima di iniziare a disaccoppiare la logica dai nostri componenti React, dovremmo sapere perché.
Organizzare il nostro codice in modo che ogni funzione o componente sia responsabile di una sola cosa ha il vantaggio di essere molto più facile da modificare e mantenere (Dave e Andrew lo chiamano "ortogonalità” nel loro libro Il programmatore pragmatico).
Applicare questo a React significa che il nostro componente apparirà più pulito e organizzato. Ad esempio, non avremo bisogno di scorrere oltre il muro della logica prima di modificare l'interfaccia utente.
Organizzare il tuo codice in questo modo non solo lo rende migliore e più facile da navigare, ma rende anche più facile modificarlo poiché la modifica dell'hook non influisce sull'interfaccia utente e viceversa.
Anche i test sono più accessibili: possiamo testare la logica separatamente dall'interfaccia utente, se lo desideriamo. Il vantaggio più significativo per me, tuttavia, è il modo in cui questo approccio organizza il mio codice.
Come disaccoppiare la logica con gli hook React
Per disaccoppiare la logica dal nostro componente, creeremo prima un hook personalizzato.
Prendiamo questo componente come esempio. Calcola il valore esponenziale del numero base e dell'esponente:
Puoi trovare il codice sorgente completo qui.
Il codice è simile al seguente:
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
Questo potrebbe già sembrare a posto, ma per il bene di questo tutorial, basta immagine che c'è più logica qui dentro.
Come primo passo, lo faremo sposta la logica su un hook personalizzato e chiamalo all'interno del nostro componente.
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
Potremmo spostare questo gancio su a file separato per una più netta separazione delle preoccupazioni.
Inoltre, possiamo separare ulteriormente il nostro gancio in funzioni più piccole e riutilizzabili. In questo caso, possiamo solo estrarre calculateExponent.
utilizzareExponentCalculator.js
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
Testare queste funzioni è molto più semplice che testare l'intero codice del componente dal primo esempio. Potremmo testarli con qualsiasi libreria di test Node.js, che non ha nemmeno bisogno di supportare i componenti React.
Ora abbiamo il nostro codice specifico del framework (React) nel codice per il componente e l'hook, mentre la nostra logica di business risiede nelle diverse funzioni che abbiamo definito in seguito (che sono indipendenti dal framework).
Buone pratiche
Naming
Mi piace nominare i miei hook personalizzati dopo il componente come concatenazione di use e il nome del componente (es useExponentCalculator). Allora chiamo il archiviare lo stesso come il gancio.
Potresti voler seguire una convenzione di denominazione diversa, ma ti consiglio rimanere coerenti nel tuo progetto
Se posso riutilizzare parti di un hook personalizzato, di solito lo sposto in un altro file sotto src/hooks.
Non esagerare
Cerca di essere pragmatico. Se un componente ha solo poche righe di JS, non è necessario separare la logica.
CSS in JS
Se stai usando una libreria CSS-in-JS (useStyles), potresti voler spostare anche questo codice in un altro file.
Potresti spostarlo nello stesso file dell'hook. Tuttavia, preferisco tenerlo sopra il componente nello stesso file o spostarlo nel proprio file se diventa troppo grande.
Conclusione
Indipendentemente dal fatto che tu pensi che l'uso di hook personalizzati migliori o meno il tuo codice, alla fine, dipende dalle preferenze personali. Se la tua base di codice non include molta logica, i vantaggi di questo modello non saranno troppo rilevanti per te.
I ganci personalizzati sono solo un modo per aumentare la modularità; Consiglio vivamente anche io dividere componenti e funzioni in blocchi più piccoli e riutilizzabili quando possibile.
L'argomento è affrontato anche a livello più generale in Il programmatore pragmatico. Ho scritto un articolo sui miei argomenti preferiti del libro, quindi se questo ti interessa, assicurati di farlo controllalo.
