Hook use() di React: come applicarlo e perché

Questo nuovo hook può aiutare a semplificare gran parte del codice boilerplate.

Le app React che sviluppi spesso recuperano dati da un'API esterna e il team React si è assicurato di soddisfare questa esigenza. ILutilizzo()hook semplifica il processo di recupero dei dati.

Utilizzando questo hook, ridurrai la quantità di codice boilerplate necessario per definire le promesse e aggiornare lo stato dell'applicazione. Scopri tutto su Reactutilizzo()hook e come usarlo nei tuoi progetti React.

Consideriamo ad esempio il seguente componente:

Una volta che React esegue il rendering di questo componente, consuma l'API utilizzando fetch(). Quindi salva i dati nello stato del componente se la richiesta ha avuto successo oppure imposta il fileisErrorvariabile su true se non lo era.

A seconda dello stato, esegue il rendering dei dati dall'API o di un messaggio di errore. Mentre la richiesta API è in sospeso, viene visualizzato il testo "Caricamento in corso..." sulla pagina.

Il componente di cui sopra è un po' macchinoso poiché è pieno di codice standard. Per risolvere questo problema, inserisci il fileutilizzo()aggancia e rifattorizza il tuo codice.

Con l'hook use(), puoi ridurre il componente precedente a sole due righe di codice. Ma prima di farlo, tieni presente che questo hook è piuttosto nuovo, quindi puoi usarlo solo nella versione sperimentale di React. Quindi assicurati di utilizzare quella versione:

Ora sei pronto per utilizzare il gancio, iniziando sostituendo iluseStateEuseEffectimportazioni con soloutilizzo:

Dentro ilDati componente, l'unica cosa che manterrai è la richiesta di recupero. Ma dovrai racchiudere la richiesta di recupero nel tuo fileutilizzo() gancio; restituisce dati JSON o un errore. Quindi imposta la risposta a una variabile chiamatadati:

È tutto! Come puoi vedere, il codice sopra riduce il componente a sole due righe di codice. Ciò dimostra quanto utile possa essere l'hook use() in scenari come questo.

Una parte importante delutilizzo() l'hook gestisce gli stati di caricamento e di errore. Puoi farlo all'interno del componente genitore diDati.

Per implementare la funzionalità di caricamento, avvolgi il fileDaticomponente conSuspense . Questo componente accetta un oggetto di fallback che eseguirà il rendering ogni volta che ti trovi nello stato di caricamento:

ILutilizzo() l'hook nel componente Dati attiva il caricamento di questa suspense. Mentre la promessa deve ancora essere risolta, ilApp Il componente renderà lo stato di fallback. Poi, quando ilDatiIl componente riceve i dati di risposta, esegue il rendering del contenuto anziché dello stato di caricamento.

Quando si tratta di individuare errori, è necessario sapere come funziona Error Boundary per utilizzarlo. In genere, lo utilizzerai quando lavori con Suspense.

Un esempio di limite di errore è nel codice seguente:

Questo esempio di limite di errore ha un oggetto stato che tiene traccia dello stato dell'errore e della sua natura. Successivamente, ottiene lo stato derivato da quell'errore. ILrendere() la funzione visualizza l'elemento fallback se si verifica un errore. Altrimenti, rende tutto ciò che è all'interno di.

Il componente sopra funziona più o meno come Suspense. Quindi, nel componente App, puoi racchiudere tutto all'interno del fileLimite di errorecomponente in questo modo:

Se uno qualsiasi dei codici nidificati genera un errore, il limite di errore lo rileverà tramitegetDerivedStateFromError()e aggiorna lo stato, che a sua volta restituisce il testo di fallback, "Spiacenti! Si è verificato un errore".

Quindi l'hook use() può aiutare a ridurre la quantità di codice boilerplate e facilita il caricamento e gli stati di errore. Ma l'hook use() ha anche un altro uso molto pratico.

Supponiamo che tu stia inviando un filedovrebbeRecuperarebooleano come sostegno aDaticomponente e desideri eseguire la richiesta di recupero solo sedovrebbeRecuperare/strong>