Ciclos de vida de plantilla: Markup por Before Semicolon

Ciclos de vida

Markup expone algunos métodos que puede utilizar para aprovechar los ciclos de vida de la plantilla:

onMount: método que toma una función para llamar cuando la plantilla está montada y que puede devolver otra función para llamar cuando la plantilla está desmontada;
onUpdate: método que toma una función para llamar cuando algo en la plantilla renderizada cambia;
onMove: método que toma una función para llamar cuando el contenido de la plantilla se mueve de una ubicación a otra en el DOM.

Todas las devoluciones de llamada del ciclo de vida se llamarán con la instancia de la plantilla como primer argumento que puede utilizar para operar en la plantilla misma.

El método onMount requiere una función que se llamará cuando la plantilla se renderice mediante cualquiera de los métodos de renderizado. Esta función puede devolver otra función que se llamará cuando se desmonte la plantilla.

javascript
const temp = html`<h1>Hello World</h1>`

temp.onMount(() => {
    // handle mount
    console.log('mounted')

    return () => {
        // handle unmount
        console.log('unmounted')
    }
})

temp.render(document.body) // triggers mount

temp.unmount() // trigger unmount

El evento de desmontaje se puede desencadenar llamando a unmount o cuando la plantilla se eliminó como parte de algún cambio en la plantilla principal.

Estos livecycles son perfectos para configuraciones y limpiezas alrededor de la plantilla. Se trata de cosas como trabajar con temporizadores u otras acciones impulsadas por eventos que permanecen en segundo plano.

javascript
const [count, setCount] = state(0)

const temp = html`<p>${count}</p>`

temp.onMount(() => {
    let interval = setInterval(() => {
        setCount((prev) => prev + 1)
    }, 1000)

    return () => {
        clearInterval(interval)
    }
})

temp.render(document.body)

setTimeout(() => {
    temp.unmount()
}, 10000)

onUpdate

El método onUpdate requiere una función que se llamará cada vez que cambie algo en la plantilla. Esto podría agregar, eliminar o actualizar un atributo o nodo.

javascript
const [count, updateCount] = state(0)

const temp = html`<p>${count}</p>`

temp.onUpdate(() => {
    console.log(temp.toString())
    // prints: "<p>10</p>"
})

temp.render(document.body)

updateCount(10)

Si desea reaccionar a un cambio de estado específico, puede utilizar el efecto. El onUpdate es perfecto para cuando desea tomar instantáneas de la plantilla o realizar efectos secundarios genéricos relacionados con la plantilla.

onMove

El método onMove requiere una función que se llamará cada vez que cambie el destino de representación de la plantilla.

javascript
const temp = html`<h1>Hello World</h1>`

temp.onMove(() => {
    console.log('moved to', temp.parentNode)
})

temp.render(document.body)

setTimeout(() => {
    temp.render(document.getElementById('app'))
}, 1000)

Este ciclo en vivo es perfecto para realizar acciones dependiendo de la ubicación de la plantilla. Estas pueden ser cosas como reordenar DOM o cuando se trabaja con arrastrar y soltar.

Encadenamiento

Todos los ciclos en vivo de plantilla y métodos de renderizado se pueden encadenar y siempre debes configurar los ciclos en vivo antes de renderizar cualquier cosa.

javascript
const [count, updateCount] = state(0)

const temp = html`<p>${count}</p>`
    .onMount(() => {
        console.log('mounted')

        return () => {
            console.log('unmounted')
        }
    })
    .onUpdate(() => {
        console.log('udpated', temp.toString())
    })
    .onMove(() => {
        updateCount(10)
        console.log('moved', temp.parentNode)
    })
    .render(document.body)

setTimeout(() => {
    temp.render(document.getElementById('app'))
}, 1000)

setTimeout(() => {
    temp.unmount()
}, 2000)

editar este documento