Siéntete libre de divulgar nuestra web y códigos en tus redes sociales, apóyanos para aumentar nuestra comunidad.
Si entiendo correctamente, desea imitar el comportamiento “montado en el componente” de los componentes de reacción basados en clases regulares a través de useEffect(), de modo que la devolución de llamada del efecto solo se active una vez en el primer renderizado.
Para lograr ese comportamiento, puede pasar un vacío array al segundo argumento de useEffect() al igual que:
useEffect(() =>
loadMessages();
, []); /* <-- add this */
El segundo array El argumento le permite especificar qué prop Las variables activan el useEffect() devolución de llamada (si corresponde) cuando cambien sus valores.
Al pasar un vacío array, esto significa que useEffect() no se activará por ningún cambio en la entrada prop variables y, a su vez, solo se llamará una vez, durante el primer renderizado.
Para obtener más información sobre este segundo argumento, consulte esta documentación y esta documentación
useEffect() es un enlace de reacción para componentes funcionales que cubre la funcionalidad de los enlaces de ciclo de vida de los componentes de clase. useEffect() combina componentDidMount(), componentDidUpdate() y componentWillUnmount() de los componentes de la clase, lo que significa que se ejecutará cuando se monte el componente, cuando cambie el estado del componente y cuando se desmonte el componente del DOM.
Compruebe el siguiente ejemplo,
useEffect(() =>
setTimeout(() =>
alert("data saved");
, 1000);
);
El código/alerta anterior se ejecuta cuando el componente está montado/renderizado inicial, cuando cambia el estado del componente y cuando el componente se desmonta del DOM.
Para hacer que el código anterior se ejecute con menos frecuencia, podemos pasar un array de valores como segundo argumento, como las dependencias para ese efecto. Si una de las dependencias cambia, el efecto se ejecutará nuevamente.
Consideremos que tenemos personas array pasado a los accesorios del componente funcional y queremos que la alerta se ejecute solo cuando las personas array cambio.
useEffect(() =>
setTimeout(() =>
alert("data saved");
, 1000);
, [props.persons]);
Esto ejecutará el código durante el procesamiento inicial y cuando props.persons cambios.
Entonces, para ejecutar el código solo durante el renderizado inicial / montaje del componente, puede pasar un vacío array lo que significa que no se especifican dependencias sobre cuándo debe ejecutarse el efecto. Por lo tanto, ejecute durante el renderizado inicial y cuando el componente esté desmontado.
useEffect(() =>
setTimeout(() =>
alert("data saved");
, 1000);
, []);
Puedes modificar tu useEffect() enganche como se muestra a continuación para llamarlo solo una vez para obtener datos de API,
useEffect(() =>
loadMessages();
, []);
Ten en cuenta dar recomendación a esta división si te ayudó.