Se es un programador de React que aínda non coñeceu os ganchos de React, agora é o momento. Esta publicación pasará polo gancho useEffect React en detalle. É o equivalente en gancho dunha navalla suíza. Resolve unha variedade de problemas, como como obter datos cando se monta un compoñente, como executar código cando cambia un estado ou un accesorio, como configurar temporizadores ou intervalos, etc.
Un useEffect úsase para practicamente todo o que queiras "facer" nun compoñente React que non devolve JSX (calquera tipo de efecto secundario). Tamén pode ter varios useEffects por compoñente.
Todo este poder ten un custo: a menos que entendas como funciona, pode resultar desconcertante. Neste post, veremos unha variedade de exemplos para que poidas comprender o modelo conceptual e aplicalo ao teu propio código.
Ganchos React -¿Que está a tratar de resolver?
Os hooks foron introducidos por primeira vez na versión 16.8 de React e agora son utilizados por moitos proxectos React. Hooks supera o problema da repetición de código entre compoñentes. Escríbense sen o uso de clases. Isto non implica que React estea abandonando as clases; os ganchos son simplemente un método alternativo.
React permítelle crear rapidamente compoñentes sofisticados con lóxica de estado. É difícil separar estes compoñentes xa que a clase depende de React Lifecycle Methods. Aquí é onde entran React Hooks.
Permiten dividir un compoñente en funcións máis pequenas. En lugar de dividir o código en pezas máis pequenas baseándose nos métodos do ciclo de vida, agora pode organizar e separar o código en unidades máis pequenas dependendo da funcionalidade.
Que é useEffect Hook?
Os ganchos son funcións que che permiten acceder a capacidades de estado e outras reaccións sen ter que escribir clases de ES6. A API de react hooks ten un gancho chamado useEffect. Se estás familiarizado cos ciclos de vida de react, o gancho useEffect é o mesmo que o componentDidMount, componentDidUpdatee componentWillUnmount métodos de ciclo de vida combinados.
Segundo a documentación de React Hooks, creouse para resolver algúns dos problemas cos métodos de ciclo de vida dos compoñentes da clase ES6.
Sintaxe
O primeiro argumento é unha función de devolución de chamada, que se executa por defecto despois de cada renderizado. O segundo parámetro é unha matriz de dependencia opcional que indica ao Hook que devolve a chamada só se cambia o estado de destino.
The Hook compara os estados históricos e actuais de cada dependencia. Se os dous valores non coinciden, o Hook invoca a devolución de chamada especificada no primeiro parámetro. As matrices de dependencia alteran o comportamento habitual de devolución de chamada e garanten que o Hook ignore todos os demais compoñentes do ámbito do compoñente.
Uso básico
Para gardar unha mensaxe, estou usando React useState na mostra de código anterior. Despois diso, tomo a variable de estado da miña mensaxe e imprimo na pantalla. Non obstante, agora quero usar Efecto para modificar a mensaxe un segundo despois de montar o compoñente.
Inserei o meu efecto detrás da liña useState despois de importar useEffect do framework React. O primeiro parámetro a usarEffect é unha función. Cando se execute este controlador de funcións, encargarase dos efectos secundarios que proporcione. A función é unha función de devolución de chamada que se chama cando se produce un dos eventos do ciclo de vida do compoñente React.
Cando usalo?
O gancho useEffect pode ser útil nunha variedade de situacións. Os seguintes son os máis importantes:
- Podemos cambiar este parámetro desde o lado do cliente cando queremos obter datos dependendo dun argumento proporcionado. Recordarase despois de que o parámetro se actualice con datos novos.
- Se queremos recuperar datos dun punto final da API e mostralos no lado do cliente. Cando o noso compoñente se renderiza, execútase a función ou o manejador que se lle dá ao gancho useEffect e obtén os datos nos estados dos compoñentes. Estes estados empréganse entón nos compoñentes da interface de usuario.
- Cando o teu compoñente depende de datos do mundo exterior e non podemos asegurarnos de que os datos cheguen, deberíamos usarEffect (quizais o servidor estea aí abaixo). En lugar de lanzar problemas e evitar que se mostren outros compoñentes, colócaos no gancho useEffect.
Casos de uso
Se o compoñente se renderiza de novo despois da primeira execución, non se executará.
Sempre que un compoñente se renderiza ou volve renderizarse, sempre debe executarse.
Por defecto, o programa só se executa unha vez. Despois, se os valores de prop cambian, executa:
Para actividades asíncronas, use sempre useEffect.
Os bloques de código useEffect son marcadores obvios de traballos asíncronos para os teus compañeiros de desenvolvemento. É posible crear código asíncrono sen usar useEffect, pero este non é o "método React" e aumenta tanto a complexidade como o risco de erros.
Usar useEffect en lugar de escribir código asíncrono que pode deter a IU é unha técnica moi coñecida na comunidade de React, especialmente a forma en que o equipo de React a construíu para producir un efecto secundario.
Outra vantaxe de utilizalo é que os desenvolvedores poden simplemente revisar o código e detectar inmediatamente o código que se executa "fóra do fluxo de control", o que só se fai importante despois do primeiro ciclo de renderizado. Ademais, os bloques son axeitados para a súa extracción en ganchos personalizados reutilizables e aínda máis semánticos.
Un exemplo
Usando o código useEffect, incremente un número por segundo.
Conclusión
Comprender os principios de deseño subxacentes e as mellores prácticas do useEffect Hook, na miña opinión, é unha habilidade fundamental para aprender se queres converterte nun programador de React de nivel seguinte.
En resumo, useEffect Hook recibe unha función que inclúe lóxica completa imperativa e potencialmente efecto. A matriz de dependencia, que é o segundo parámetro, pódese usar para influír na execución. Mentres se trata, tamén é necesario escribir código de limpeza usando a función de retorno.
Indícanos nos comentarios se o artigo foi útil.
Deixe unha resposta