Ciclos de vida do modelo - Markup por Before Semicolon

Ciclos de vida

Markup expõe alguns métodos que você pode usar para explorar os ciclos de vida do modelo:

onMount: método que leva uma função para ser chamada quando o template for montado que pode retornar outra função para ser chamada quando o template for desmontado;
onUpdate: método que leva uma função para ser chamada quando algo no template renderizado muda;
onMove: método que utiliza uma função para ser chamada quando o conteúdo do template é movido de um local para outro no DOM.

Todos os retornos de chamada do ciclo de vida serão chamados com a instância do modelo como o primeiro argumento que você pode usar para operar no próprio modelo.

O método onMount usa uma função para ser chamada quando o modelo é renderizado por meio de qualquer um dos métodos de renderização. Esta função pode retornar outra função a ser chamada quando o modelo for desmontado.

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

O evento de desmontagem pode ser acionado chamando unmount ou quando o modelo foi removido como parte de alguma alteração no modelo pai.

Esses ciclos ao vivo são perfeitos para configurações e limpezas em torno do modelo. São coisas como trabalhar com temporizadores ou outras ações orientadas por eventos que permanecem em 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

O método onUpdate utiliza uma função para ser chamada sempre que algo no modelo muda. Isso pode adicionar, remover ou atualizar um atributo ou nó.

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)

Se quiser reagir a uma mudança de estado específica, você pode usar o efeito. O onUpdate é perfeito para quando você deseja tirar instantâneos do modelo ou realizar efeitos colaterais relacionados ao modelo genérico.

onMove

O método onMove utiliza uma função para ser chamada sempre que o destino de renderização do modelo for alterado.

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 ao vivo é perfeito para executar ações dependentes da localização do modelo. Podem ser coisas como reordenação DOM ou ao trabalhar com arrastar e soltar.

Encadeamento

Todos os livecycles de modelo e métodos de renderização podem ser encadeados e você deve sempre definir os livecycles antes de renderizar qualquer coisa.

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