Sè vo site un sviluppatore React chì ùn hà micca ancu amparatu nantu à i ganci React, avà hè u mumentu. Questu post passerà per l'useEffect React Hook in dettaglio. Hè l'equivalente di un ganciu di un cuteddu di l'armata svizzera. Risolve una varietà di prublemi, cum'è cumu uttene dati quandu un cumpunente si monta, cumu eseguisce u codice quandu un statu o un propiu cambia, cumu stabilisce timers o intervalli, è cusì.
Un useEffect hè utilizatu per quasi tuttu ciò chì vulete "fà" in un cumpunente React chì ùn hè micca torna JSX (qualsiasi tipu d'effettu side). Pudete ancu avè parechje Effetti d'usu per cumpunenti.
Tuttu stu putere vene à un costu: salvu chì ùn capisce cumu si travaglia, pò esse perplexing. In questu post, guardemu una varietà di esempi per pudè capisce u mudellu cuncettuale è applicà à u vostru propiu codice.
React Ganci – Chì prova di risolve ?
I ganci sò stati prima introdutti in a versione React 16.8 è sò avà utilizati da parechji prughjetti React. Hooks supera u prublema di ripetizione di codice trà cumpunenti. Sò scritti senza l'usu di classi. Questu ùn implica micca chì React abbanduneghja e classi; i ganci sò solu un metudu alternativu.
React permette di creà rapidamente cumpunenti sofisticati cù logica stateful. Hè difficiuli di separà questi cumpunenti postu chì a classa si basa nantu à i Methodi React Lifecycle. Questu hè induve React Hooks entra.
Permettenu di dividisce un cumpunente in funzioni più chjuche. Invece di dividisce u codice in pezzi più chjuchi basatu nantu à i metudi di u Ciclu di Vita, pudete avà organizà è separà u codice in unità più chjuche secondu a funziunalità.
Chì ghjè l'usu di l'Effect Hook?
I ganci sò funzioni chì permettenu di accede à u statu è altre capacità di reazione senza avè da scrive classi ES6. L'API react hooks hà un hook chjamatu useEffect. Sè vo site familiarizatu cù i ciculi di vita di reagisce, u ganciu useEffect hè u stessu componentDidMount, componentDidUpdate, e cumpunenteWillUnmount metudi di ciclu di vita cumminati.
Sicondu a documentazione React Hooks, hè stata creata per risolve alcuni di i prublemi cù i metudi di u ciclu di vita di i cumpunenti di classi ES6.
Sintassi
U primu argumentu hè una funzione di callback, chì hè eseguita per automaticamente dopu ogni rende. U sicondu paràmetru hè un array di Dependency facultativu chì urdineghja à l'Hook di callback solu se u statu di destinazione cambia.
U Hook compara i stati storichi è attuali di ogni dependenza. Se i dui valori ùn currispondenu micca, u Hook invoca a callback specificata in u primu paràmetru. L'array di dipendenza alteranu u cumportamentu di callback abituale è guarantisci chì u Hook ignora tutti l'altri cumpunenti in u scopu di cumpunenti.
Usu basicu
Per salvà un missaghju, aghju utilizatu React useState in l'esempiu di codice sopra. Dopu quì, pigliu a mo variabile di statu di missaghju è stampate nantu à u screnu. Tuttavia, avà vogliu aduprà Effettu per mudificà u messagiu un secondu dopu chì u cumpunente hè statu muntatu.
Aghju inseritu u mo effettu daretu à a linea useState dopu avè impurtatu useEffect da u framework React. U primu paràmetru à aduprà Effettu hè una funzione. Quandu stu gestore di funzioni hè eseguitu, hà da piglià cura di qualsiasi effetti secundari chì furnite. A funzione hè una funzione di callback chì hè chjamata quandu unu di l'avvenimenti di u ciclu di vita di u cumpunenti React si trova.
Quandu aduprà?
U ganciu useEffect pò esse utile in una varietà di situazioni. I seguenti sò i più impurtanti:
- Pudemu cambià stu paràmetru da u latu di u cliente quandu vulemu piglià dati secondu un argumentu furnitu. Serà ricurdatu dopu chì u paràmetru hè statu aghjurnatu cù dati freschi.
- Se vulemu ricuperà e dati da un endpoint API è mostranu nantu à u cliente. Quandu u nostru cumpunente rende, a funzione o u gestore datu à u ganciu useEffect hè eseguitu, è e dati in i stati di cumpunenti sò recuperati. Questi stati sò allora impiegati in cumpunenti di l'interfaccia d'utilizatore.
- Quandu u vostru cumpunente s'appoghja nantu à e dati da u mondu esternu è ùn pudemu micca assicurà chì e dati ghjunghjeranu, duvemu aduprà Effettu (forse u servitore hè quì sottu). Invece di scaccià i prublemi è impedisce à altri cumpunenti di esse visualizati, mette in u ganciu useEffect.
Aduprà casi
Se u cumpunente si riproduce dopu a prima corsa, ùn serà micca eseguitu.
Ogni volta chì un cumpunente rende o rende, deve esse sempre eseguitu.
Per automaticamente, u prugramma si stende solu una volta. Dopu, se i valori di prop cambianu, eseguite:
Per attività asincrone, utilizate sempre useEffect.
I blocchi di codice useEffect sò marcatori evidenti di travaglii asincroni per i vostri cumpagni di sviluppatori. Hè pussibule di creà codice asincronu senza aduprà useEffect, ma questu ùn hè micca u "metudu React", è aumenta a cumplessità è u risicu di sbagli.
Utilizà useEffect invece di scrive codice asincronu chì pò piantà l'UI hè una tecnica ben cunnisciuta in a cumunità React, in particulare a manera chì a squadra React hà custruitu per fà un effettu secundariu.
Un altru vantaghju di l'utilizazione hè chì i sviluppatori ponu solu riviseghjà u codice è immediatamente detectà u codice chì hè eseguitu "fora di u flussu di cuntrollu", chì diventa impurtante solu dopu à u primu ciculu di rende. Inoltre, i blocchi sò adattati per l'estrazione in Hooks customizati riutilizabili è ancu più semantici.
Un esempiu
Utilizendu u codice useEffect, aumenta un numeru per seconda.
cunchiusioni
Capisce i principii di cuncepimentu sottostanti è e migliori pratiche di useEffect Hook, in u mo scopu, hè una cumpetenza critica per amparà se vulete diventà un sviluppatore React di prossimu livellu.
Per riassume, l'useEffect Hook riceve una funzione chì include imperativa, potenzialmente effettu logica piena. U array di dependenza, chì hè u sicondu paràmetru, pò esse usatu per influenzà l'esekzione. Mentre si tratta, hè ancu necessariu di scrive u codice di pulizia cù a funzione di ritornu.
Fateci sapè in i cumenti se l'articulu hè statu utile.
Lascia un Audiolibro