Cycles de vie des modèles - Markup par Before Semicolon

Cycles de vie

Markup expose quelques méthodes que vous pouvez utiliser pour exploiter les cycles de vie du modèle :

onMount : méthode qui prend une fonction à appeler lorsque le modèle est monté et qui peut renvoyer une autre fonction à appeler lorsque le modèle est démonté ;
onUpdate : méthode qui prend une fonction à appeler lorsque quelque chose dans le modèle rendu change ;
onMove : méthode qui prend une fonction à appeler lorsque le contenu du modèle est déplacé d'un emplacement à un autre dans le DOM.

Tous les rappels du cycle de vie seront appelés avec l'instance du modèle comme premier argument que vous pourrez utiliser pour opérer sur le modèle lui-même.

onMount

La méthode onMount prend une fonction à appeler lorsque le modèle est rendu via l'une des méthodes de rendu. Cette fonction peut renvoyer une autre fonction à appeler lorsque le modèle est démonté.

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

L'événement de démontage peut être déclenché en appelant le unmount ou lorsque le modèle a été supprimé dans le cadre d'une modification apportée au modèle parent.

Ces livecycles sont parfaits pour les configurations et les nettoyages autour du modèle. Il s'agit par exemple de travailler avec des minuteries ou d'autres actions basées sur des événements qui restent en arrière-plan.

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

La méthode onUpdate utilise une fonction à appeler chaque fois que quelque chose change dans le modèle. Cela pourrait attribut ou nœud ajouté, supprimé ou mis à jour.

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 vous souhaitez réagir à un changement d'état spécifique, vous pouvez utiliser le effect. Le onUpdate est parfait lorsque vous souhaitez prendre des instantanés du modèle ou effectuer des effets secondaires génériques liés au modèle.

onMove

La méthode onMove prend une fonction à appeler chaque fois que la cible de rendu du modèle change.

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)

Ce cycle de vie est parfait pour effectuer une action en fonction de l'emplacement du modèle. Il peut s'agir de choses telles que la réorganisation de DOM ou le travail par glisser-déposer.

Chaînage

Tous les cycles de vie de modèles et méthodes de rendu peuvent être chaînés et vous devez toujours définir les cycles de vie avant de restituer quoi que ce soit.

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)

modifier ce document