Jak funguje funkce životního cyklu onDestroy() ve Svelte?

Když jsme odstranili komponentu z DOM, použije se metoda onDestroy(). Musíme ji zavolat, než bude komponenta odstraněna z DOM.

Pojďme vytvořit novou komponentu, DateAndTimeComponent.svelte a přidejte následující kód.

<script>
    import { onMount } from 'svelte'

    let tasks = []
    const url = 'http://time.jsontest.com'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });
</script>

<table>
    <thead>
    <tr>
        <th>Date</th>
        <th>Epoch Time</th>
        <th>Time</th>
    </tr>
    </thead>

        <tr>
            <td>{tasks.date}</td>
            <td>{tasks.milliseconds_since_epoch}</td>
            <td>{tasks.time}</td>
        </tr>

</table>

Implementovali jsme pouze funkci životního cyklu onMount(). Pokud o onMount nevíte, navštivte prosím následující článek.
A v App.svelte přidejte následující:

<script>
    import DateAndTimeComponent from "./DateAndTimeComponent.svelte";

    let showComponent = false;
</script>

<main>
    {#if showComponent}
        <DateAndTimeComponent />
    {/if}
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Pokud navštívíte webpate http://localhost:5000, uvidíte prázdnou stránku, protože proměnná showComponent je v tuto chvíli false.

Umožňuje přidat tlačítko pro zobrazení komponenty. onMount bude voláno pouze jednou, když je komponenta načtena do DOM.

V App.svelte , přidejte následující pod main štítek.

<script>
....
..
..
..
</script>

<main>
    <button on:click={ () => showComponent = !showComponent }>Show Component</button>
    {#if showComponent}
        <DateAndTimeComponent />
    {/if}
</main>

A v DateAndTimeComponent.svelte přidáme funkci onDestroy lifecycle.

<script>
    import { onMount, onDestroy } from 'svelte'

    let tasks = []
    const url = 'http://time.jsontest.com'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });

    onDestroy( () => {
        console.log("Date Component removed")
    });

</script>

<table>
    <thead>

        <tr>
            <th>Date</th>
            <th>Epoch Time</th>
            <th>Time</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td>{tasks.date}</td>
            <td>{tasks.milliseconds_since_epoch}</td>
            <td>{tasks.time}</td>
        </tr>
    </tbody>


</table>

Podívejte se na import { onMount, onDestroy } from 'svelte'

a

onDestroy( () => {
        console.log("Date Component removed")
    });