Breaking

Post Top Ad

Your Ad Spot

sábado, 28 de diciembre de 2019

Svelte Lifecycle Events

Cada componente en Svelte dispara varios eventos del ciclo de vida que podemos conectar y que nos ayudan a implementar la funcionalidad que tenemos en mente.
En particular, tenemos
  • onMount disparado después de que se procese el componente
  • onDestroy disparado después de que se destruye el componente
  • beforeUpdate disparado antes de que se actualice el DOM
  • afterUpdate despedido después de actualizar el DOM
Podemos programar funciones para que sucedan cuando Svelte active estos eventos.
No tenemos acceso a ninguno de esos métodos de forma predeterminada, pero podemos importarlos desde el sveltepaquete:
<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'
</script>
Un escenario común para onMountes obtener datos de otras fuentes.
Aquí hay un ejemplo de uso de onMount:
<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    //do something on mount
  })
</script>
onDestroynos permite limpiar datos o detener cualquier operación que podríamos haber comenzado en la inicialización del componente, como los temporizadores o las funciones periódicas programadas que utilizamos setInterval.
Una cosa particular a tener en cuenta es que si devolvemos una función de onMount, que sirve la misma funcionalidad de onDestroy: se ejecuta cuando se destruye el componente:
<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    //do something on mount

    return () => {
      //do something on destroy
    }
  })
</script>
Aquí hay un ejemplo práctico que establece una función periódica para ejecutarse en el montaje y la elimina al destruir:
<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    const interval = setInterval(() => {
      console.log('hey, just checking!')
    }, 1000)

    return () => {
      clearInterval(interval)
    }
  })
</script>

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas