Si sou un desenvolupador de React que encara no ha après sobre els ganxos de React, ara és el moment. Aquesta publicació repassarà amb detall el ganxo useEffect React. És l'equivalent en ganxo d'una navalla suïssa. Soluciona una varietat de problemes, com ara com obtenir dades quan es munta un component, com executar codi quan canvia un estat o un accessori, com configurar temporitzadors o intervals, etc.
Un useEffect s'utilitza per pràcticament qualsevol cosa que vulgueu "fer" en un component React que no retorna JSX (qualsevol tipus d'efecte secundari). També podeu tenir diversos useEffects per component.
Tot aquest poder té un cost: tret que entenguis com funciona, pot ser desconcertant. En aquesta publicació, veurem una varietat d'exemples perquè pugueu comprendre el model conceptual i aplicar-lo al vostre propi codi.
Reacciona ganxos – Què està intentant resoldre?
Els ganxos es van introduir per primera vegada a la versió 16.8 de React i ara són utilitzats per molts projectes de React. Hooks supera el problema de la repetició de codi entre components. S'escriuen sense l'ús de classes. Això no implica que React estigui abandonant les classes; els ganxos són simplement un mètode alternatiu.
React us permet crear ràpidament components sofisticats amb lògica d'estat. És difícil separar aquests components ja que la classe es basa en els mètodes React Lifecycle Methods. Aquí és on entren els React Hooks.
Permeten dividir un component en funcions més petites. En lloc de dividir el codi en peces més petites segons els mètodes del cicle de vida, ara podeu organitzar i separar el codi en unitats més petites en funció de la funcionalitat.
Què és useEffect Hook?
Els ganxos són funcions que us permeten accedir a l'estat i altres capacitats de reacció sense haver d'escriure classes ES6. L'API de react hooks té un ganxo anomenat useEffect. Si coneixeu els cicles de vida de react, el ganxo useEffect és el mateix que el componentDidMount, componentDidUpdatei componentWillUnmount mètodes de cicle de vida combinats.
Segons la documentació de React Hooks, es va crear per resoldre alguns dels problemes amb els mètodes de cicle de vida dels components de la classe ES6.
sintaxi
El primer argument és una funció de devolució de trucada, que s'executa per defecte després de cada renderització. El segon paràmetre és una matriu de dependència opcional que indica al Hook que torni a trucar només si l'estat de destinació canvia.
The Hook compara els estats històrics i actuals de cada dependència. Si els dos valors no coincideixen, el Hook invoca la devolució de trucada especificada al primer paràmetre. Les matrius de dependència alteren el comportament de devolució de trucada habitual i garanteixen que el Hook ignori tots els altres components de l'àmbit del component.
Ús bàsic
Per desar un missatge, estic fent servir React useState a la mostra de codi anterior. Després d'això, agafo la meva variable d'estat del missatge i la imprimeixo a la pantalla. Tanmateix, ara vull utilitzar l'efecte per modificar el missatge un segon després que s'hagi muntat el component.
He inserit el meu efecte darrere de la línia useState després d'importar useEffect del marc de React. El primer paràmetre a utilitzarEffect és una funció. Quan s'executa aquest controlador de funcions, s'encarregarà de qualsevol efecte secundari que proporcioneu. La funció és una funció de devolució de trucada que es crida quan es produeix un dels esdeveniments del cicle de vida del component React.
Quan utilitzar-lo?
El ganxo useEffect pot ser útil en diverses situacions. Els següents són els més crucials:
- Podem canviar aquest paràmetre des del costat del client quan volem obtenir dades depenent d'un argument subministrat. Es recordarà després que el paràmetre s'hagi actualitzat amb dades noves.
- Si volem recuperar dades d'un punt final de l'API i mostrar-les al costat del client. Quan es renderitza el nostre component, s'executa la funció o el controlador donat al ganxo useEffect i es recuperen les dades dels estats dels components. Aquests estats s'utilitzen després en components de la interfície d'usuari.
- Quan el vostre component es basa en dades del món exterior i no podem assegurar-nos que les dades arribin, hauríem d'utilitzarEffect (potser el servidor és allà baix). En lloc de llançar problemes i evitar que es mostrin altres components, col·loqueu-los al ganxo useEffect.
Utilitza cases
Si el component es torna a renderitzar després de la primera execució, no s'executarà.
Sempre que un component es renderitza o torna a renderitzar, sempre s'ha d'executar.
Per defecte, el programa només s'executa una vegada. Després, si canvien els valors de la prop, executeu:
Per a activitats asíncrones, utilitzeu sempre useEffect.
Els blocs de codi useEffect són marcadors evidents de feines asíncrones per als vostres companys de desenvolupament. És possible crear codi asíncron sense utilitzar useEffect, però aquest no és el "mètode React" i augmenta tant la complexitat com el risc d'errors.
Utilitzar useEffect en lloc d'escriure codi asíncron que pot aturar la interfície d'usuari és una tècnica ben coneguda a la comunitat de React, especialment la manera com l'equip de React l'ha creat per produir un efecte secundari.
Un altre avantatge d'utilitzar-lo és que els desenvolupadors simplement poden revisar el codi i detectar immediatament el codi que s'executa "fora del flux de control", que només esdevé important després del primer cicle de renderització. A més, els blocs són adequats per a l'extracció en ganxos personalitzats reutilitzables i encara més semàntics.
Un exemple
Utilitzant el codi useEffect, incrementeu un nombre per segon.
Conclusió
Comprendre els principis de disseny subjacents i les millors pràctiques de useEffect Hook, al meu entendre, és una habilitat fonamental per aprendre si voleu convertir-vos en un desenvolupador de React de nivell següent.
En resum, el ganxo useEffect rep una funció que inclou una lògica completa imperativa i potencialment efecte. La matriu de dependència, que és el segon paràmetre, es pot utilitzar per influir en l'execució. Mentre es tracta, també cal escriure codi de neteja mitjançant la funció de retorn.
Feu-nos saber als comentaris si l'article va ser útil.
Deixa un comentari