10 best practice React che devi seguire nel 2023
React ha molti usi, ma all'inizio può essere difficile da padroneggiare. Leggi tutto sulle pratiche chiave che vale la pena seguire.
React è uno dei framework front-end più popolari per JavaScript. A differenza di altri framework come Angular, è molto privo di opinioni. Pertanto, spetta a te decidere come vuoi scrivere o strutturare il tuo codice React.
Di seguito sono elencate alcune delle migliori pratiche di React che dovresti seguire per migliorare le prestazioni della tua applicazione.
1. Utilizzo di componenti funzionali e hook invece di classi
In React, puoi utilizzare componenti di classe o funzionali con hook. Dovresti, tuttavia, utilizzare componenti funzionali e hook più spesso poiché producono un codice più conciso e leggibile rispetto alle classi.
Considera il seguente componente di classe che visualizza i dati dell'API NASA.
class NasaData extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
render() {
const { data } = this.state;
if (!data.length)
return (
<div>
<h1> Fetching data.... </h1>{" "}
</div>
);
return (
<>
<h1> Fetch data using Class component </h1>{" "}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}
}Puoi scrivere lo stesso componente usando gli hook:
const NasaData = () => {
const [data, setdata] = useState(null);
useEffect(() => {
fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
setdata(json);
});
}, [data]);
return (
<>
<h1> Fetch data using Class component </h1>{" "}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
};Anche se il blocco di codice sopra fa la stessa cosa del componente classe, è meno complesso, minimale e facile da capire.
2. Evitare di utilizzare lo stato (se possibile)
Lo stato React tiene traccia dei dati che, una volta modificati, attivano il nuovo rendering del componente React. Quando crei applicazioni React, evita il più possibile di utilizzare lo stato poiché più stato usi, più dati devi tenere traccia nella tua app.
Un modo per ridurre al minimo l’uso dello stato è dichiararlo solo quando necessario. Ad esempio, se stai recuperando i dati utente da un'API, archivia l'intero oggetto utente nello stato invece di archiviare le singole proprietà.
Invece di fare questo:
const [username, setusername] = useState('')
const [password, setpassword] = useState('')Fai questo:
const [user, setuser] = useState({})3. Organizza i file relativi allo stesso componente in una cartella
Quando decidi una struttura di cartelle per la tua app React, scegli una struttura incentrata sui componenti. Ciò significa archiviare tutti i file relativi a un componente in un'unica cartella.
Se stavi creando un componente Navbar, ad esempio, crea una cartella denominata Navbar contenente il file del componente, il foglio di stile e altri file JavaSript e di risorse utilizzati nel componente.
Una singola cartella contenente tutti i file di un componente ne semplifica il riutilizzo, la condivisione e il debug. Se vuoi vedere come funziona un componente devi solo aprire una singola cartella.
Altre best practice per la cartella React sono:
- Utilizza i file di indice per astrarre i dettagli di implementazione del file del componente. Considerando l'esempio Navbar, crea una cartella Navbar e in questa cartella aggiungi un file componente denominato file index.js (o .ts).
- Conservare i componenti riutilizzabili in una cartella separata. Se disponi di componenti utilizzati da più di una parte dell'applicazione, valuta la possibilità di tenerli in una cartella denominata componenti. Questo ti aiuterà a localizzarli facilmente.
- Conserva le funzioni di utilità in una cartella separata come una cartella lib o helpers. Ciò renderà più semplice la gestione e il riutilizzo di queste funzioni in seguito.
4. Evitare di utilizzare gli indici come elementi chiave
React utilizza le chiavi per identificare in modo univoco gli elementi in un array. Con le chiavi, React può individuare quale elemento è stato modificato, aggiunto o rimosso dall'array.
Durante il rendering degli array, potresti utilizzare l'indice come chiave.
const Items = () => {
const arr = ["item1", "item2", "item3", "item4", "item5"];
return (
<>
{arr.map((elem, index) => {
<li key={index}>{elem}</li>;
})}
</>
);
};Anche se a volte funziona, l'utilizzo dell'indice come chiave può introdurre problemi, soprattutto se si prevede che l'elenco cambi. Considera questo elenco.
const arr = ["item1", "item2", "item3", "item4", "item5"];Attualmente, il primo elemento dell'elenco, "Elemento1" è all'indice zero, ma se aggiungessi un altro elemento all'inizio dell'elenco, l'indice "Elemento1" cambierebbe in 1, modificando il comportamento del tuo vettore.
La soluzione consiste nell'utilizzare un valore univoco come indice per garantire che l'identità dell'elemento dell'elenco venga mantenuta.
5. Optare per frammenti invece di div ove possibile
I componenti React devono restituire il codice racchiuso in un singolo tag, solitamente un <div> o un frammento React. Dovresti optare per i frammenti ove possibile.
L'uso di <div> aumenta la dimensione del DOM, soprattutto in progetti di grandi dimensioni poiché più tag o nodi DOM hai, più memoria ha bisogno il tuo sito web e maggiore potenza utilizza un browser per caricare il tuo sito web. Ciò porta a una velocità della pagina inferiore e a un'esperienza utente potenzialmente scarsa.
Un esempio di eliminazione dei tag <div> non necessari è non utilizzarli quando si restituisce un singolo elemento.
const Button = () => {
return <button>Display</button>;
};6. Seguire le convenzioni di denominazione
È necessario utilizzare sempre PascalCase quando si denominano i componenti per differenziarli da altri file JSX non componenti. Ad esempio: TextField, NavMenu e SuccessButton.
Utilizza camelCase per le funzioni dichiarate all'interno dei componenti React come handleInput() o showElement().
7. Evitare codici ripetitivi
Se noti che stai scrivendo codice duplicato, convertilo in componenti che possono essere riutilizzati.
Ad esempio, ha più senso creare un componente per il menu di navigazione invece di scrivere ripetutamente il codice in ogni componente che richiede un menu.
Questo è il vantaggio di un’architettura basata su componenti. Puoi suddividere il tuo progetto in piccoli componenti da riutilizzare nella tua applicazione.
8. Usa la destrutturazione degli oggetti per gli oggetti di scena
Invece di passare l'oggetto props, usa la destrutturazione dell'oggetto per passare il nome dell'oggetto prop. Ciò elimina la necessità di fare riferimento all'oggetto props ogni volta che è necessario utilizzarlo.
Ad esempio, quello che segue è un componente che utilizza gli oggetti di scena così come sono.
const Button = (props) => {
return <button>{props.text}</button>;
};Con la destrutturazione degli oggetti si fa riferimento direttamente al testo.
const Button = ({text}) => {
return <button>{text}</button>;
};
9. Rendering dinamico degli array utilizzando la mappa
Utilizza map() per eseguire il rendering dinamico di blocchi HTML ripetuti. Ad esempio, puoi utilizzare map() per visualizzare un elenco di elementi nei tag <li>.
const Items = () => {
const arr = ["item1", "item2", "item3", "item4", "item5"];
return (
<>
{arr.map((elem, index) => {
<li key={elem+index}>{elem}</li>;
})}
</>
);
};A scopo di confronto, ecco come visualizzare l'elenco senza map(). Questo approccio è molto ripetitivo.
const List = () => {
return (
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
);
};10. Scrivi test per ciascun componente React
Scrivi test per i componenti che crei in quanto riduce la possibilità di errori. I test garantiscono che i componenti si comportino come previsto. Uno dei framework di test più comuni per React è Jest e fornisce un ambiente in cui puoi eseguire i tuoi test.
React è uno strumento potente, ma devi seguire alcune pratiche
Sebbene React sia molto flessibile nel modo in cui puoi utilizzarlo, seguire pratiche specifiche ti aiuterà a ottenere il massimo dalla tua esperienza.
Quando segui questi suggerimenti, tieni a mente il tuo progetto e i tuoi obiettivi specifici poiché diverse best practice di React potrebbero essere più rilevanti in contesti diversi. Ad esempio, un progetto con un piccolo team e un ambito limitato potrebbe non richiedere lo stesso livello di organizzazione delle cartelle di un progetto di grandi dimensioni con più team che lavorano insieme.