React è uno dei framework front-end più popolari per JavaScript. A differenza di altri framework come Angular, è molto discutibile. Pertanto, sta a te decidere come vuoi scrivere o strutturare il tuo codice React.

Questo articolo esplora alcune pratiche che dovresti seguire per migliorare le prestazioni della tua applicazione React.

1. Utilizzo di componenti funzionali e ganci invece di classi

In React, puoi utilizzare componenti di classe o funzionali con ganci. Dovresti, tuttavia, utilizzare più spesso componenti funzionali e hook in quanto risultano in un codice più conciso e leggibile rispetto alle classi.

Considera il seguente componente di classe che visualizza i dati dall'API della NASA.

classe NasaData estende React. Componente {
 costruttore (oggetti di scena) {
 super (oggetti di scena);
 questo.stato = {
 dati: [],
 };
 }
 componenteDidMount() {
 andare a prendere(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 dati: json,





instagram viewer


 });
 });
 }
 render() {
 const { data } = this.state;
 se (!lunghezza.dati)
 Restituzione (


 Recuperando i dati... 
{" "}



 );
 Restituzione (
 <>
 Recupera i dati utilizzando il componente Class 
{" "}
 {data.map((elemento) => (
{Titolo dell'oggetto}

 ))}
 );
 }
}

Lo stesso componente può essere scritto usando gli hook.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 andare a prendere(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [dati]);
 Restituzione (
 <>
 Recupera i dati utilizzando il componente Class 
{" "}
 {data.map((elemento) => (
{Titolo dell'oggetto}

 ))}
 );
};

Anche se il blocco di codice sopra fa la stessa cosa del componente di classe, è meno complesso, minimo e facile da capire, il che contribuisce a una migliore esperienza dello sviluppatore.

2. Evita di usare lo stato (se possibile)

Lo stato React tiene traccia dei dati che, una volta modificati, attivano il re-rendering del componente React. Quando crei applicazioni React, evita di utilizzare lo stato il più possibile poiché più stato usi, più dati devi tenere traccia nell'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 memorizzare le singole proprietà.

Invece di fare questo:

const [nomeutente, setnomeutente] = useState('')
const [password, setpassword] = useState('')

Fai questo:

const [utente, setuser] = useState({})

Quando si decide sulla struttura di un progetto, scegline uno incentrato sui componenti. Ciò significa avere tutti i file relativi a un componente in una cartella.

Se stavi creando un barra di navigazione componente, creare una cartella denominata barra di navigazione contenente il barra di navigazione componente stesso, il foglio di stile e altri file JavaSript e asset utilizzati nel componente.

Un'unica cartella contenente tutti i file di un componente semplifica il riutilizzo, la condivisione e il debug. Se hai bisogno di vedere come funziona un componente, devi solo aprire una singola cartella.

4. Evita di usare gli indici come puntelli 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.

La maggior parte delle volte durante il rendering di array, potresti usare l'indice come chiave.

const Articoli = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 Restituzione (
 <>
 {arr.map((elemento, indice) => {
{elemento}
;
 })}
 );
};

Anche se a volte funziona, l'utilizzo dell'indice come chiave può introdurre problemi soprattutto se si prevede che l'elenco cambierà. Considera questo elenco.

const arr = ["item1", "item2", "item3", "item4", "item5"];

Attualmente, la prima voce dell'elenco, "Articolo 1” è all'indice zero, ma se hai aggiunto un altro elemento all'inizio dell'elenco, il “Articolo 1” index cambierebbe in 1 che cambia il comportamento dell'array.

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 di solito a o un frammento Reagire. Dovresti optare per frammenti ove possibile.

Usando aumenta la dimensione del DOM, soprattutto in progetti di grandi dimensioni poiché più tag o nodi DOM hai, maggiore è la memoria necessaria al tuo sito Web e maggiore è la potenza utilizzata da 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 del superfluo tag non li sta utilizzando quando restituisce un singolo elemento.

const Pulsante = () => {
 Restituzione Schermo;
};

6. Segui le convenzioni di denominazione

Dovresti sempre usare PascalCase quando assegni un nome ai componenti per differenziarli da altri file JSX non componenti. Per esempio: Campo di testo, Menu di navigazione, e Pulsante Successo.

Usa camelCase per le funzioni dichiarate all'interno dei componenti di React come handleInput() o mostraElemento().

7. Evita il codice ripetitivo

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 che puoi 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 prop. Ciò elimina la necessità di fare riferimento all'oggetto props ogni volta che è necessario utilizzarlo.

Ad esempio, il seguente è un componente che utilizza gli oggetti di scena così com'è.

const Pulsante = (oggetti di scena) => {
 Restituzione {props.text};
};

Con la destrutturazione degli oggetti, fai riferimento direttamente al testo.

Pulsante const = ({testo}) => {
 Restituzione {testo};
};

9. Rendering dinamico di array utilizzando la mappa

Utilizzo carta geografica() per eseguire il rendering dinamico di blocchi HTML ripetuti. Ad esempio, puoi usare carta geografica() per eseguire il rendering di un elenco di elementi in tag.

const Articoli = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 Restituzione (
 <>
 {arr.map((elemento, indice) => {
{elemento}
;
 })}
 );
 };

A scopo di confronto, ecco come eseguire il rendering dell'elenco senza carta geografica(). Questo approccio è molto ripetitivo.

const List = () => {
 Restituzione (


Articolo 1

Articolo 2

Articolo 3

Articolo 4

Articolo 5




 );
};

10. Scrivi test per ogni componente React

Scrivi test per i componenti che crei in quanto riduce le possibilità di errori. Il test garantisce che i componenti si comportino come ci si aspetterebbe. Uno dei framework di test più comuni per React è Jest e fornisce un ambiente in cui è possibile eseguire i test.

Sebbene React sia alquanto flessibile in termini di modalità di utilizzo, 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 particolari; alcuni saranno più rilevanti in alcuni casi rispetto ad altri.

Come consumare le API in React usando Fetch e Axios

Vuoi sapere come utilizzare le API? Comprendere come utilizzare le API in React è un elemento chiave dell'utilizzo delle API.

Leggi Avanti

Circa l'autore