Как использовать метод Svelte onMount Lifecycle

Введение

Как фронтенд-разработчику, нам необходимо знать, когда компонент загружается и удаляется из DOM браузера, чтобы выполнить определенную логику. Это очень легко сделать, если вы понимаете события жизненного цикла фреймворка. Svelte предлагает несколько событий для выполнения этих изменений.

Что такое onMount Svelte?

onMount предоставляет возможность запускать функцию, когда компонент загружается в DOM. Это может быть использовано для инициализации значений, вызова API для загрузки некоторых данных, выполнения действий, которые нужно выполнить только один раз.

Шаблон onMount

<script>
    import {onMount} from "svelte";

    onMount(() => {
        // Write you code here....
        // This is executed when the component is loaded into the DOM

        // Optional return function
        return () => {
            // This is executed when the component is removed from the DOM
        }
    })
</script>

Примеры для onMount

Давайте рассмотрим некоторые примеры

1. Получение данных из API
2. Обработка данных
3. Доступ к элементам DOM
4. Добавление обратного вызова к событию

Получение данных из API

<script>
    import {onMount} from 'svelte';

    let posts = [];
    onMount(async () => {
        let data = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10');
        let postData = await data.json(); 
        posts = [...postData];
    });
</script>

{#each posts as post}
    <h3>{post.title}</h3>
{/each}

Мы создаем переменную posts для хранения данных, полученных от API. Затем мы можем использовать onMount для вызова API. Добавление ключевого слова async перед обратным вызовом onMount позволяет пользователям использовать синтаксис await. Мы используем метод fetch для вызова конечной точки, которая вернет список постов.

Поскольку мы используем ключевое слово await, выполнение следующей строки происходит только после получения результата конечной точки. После этого мы можем преобразовать данные в формат json и добавляем в переменную posts.

Обработка данных

<script>
    import {onMount} from 'svelte';

    let names = ['first', 'second', 'third'];
    onMount(() => {
        names = names.map((item) => {
            return item.toUpperCase();
        })
    });
</script>

{#each names as name}
    <h3>{name}</h3>
{/each}

В этом примере мы используем простую логику для преобразования данных в onMount. Мы преобразуем строку в верхний регистр при загрузке компонента.

Доступ к элементам DOM

<script>
    import {onMount} from "svelte";

    let emailInput;
    let email = "";

    onMount(() => {
        emailInput.focus();
    })
</script>

<input type="email" name="email" bind:value={email} bind:this={emailInput}/>

Когда мы создаем новую страницу формы и хотим, чтобы пользователь начал вводить текст напрямую, вы можете привязать элемент input к переменной, используя синтаксис bind:this. Это даст доступ к переменной для вызова любых методов на этом элементе. Мы можем безопасно вызвать метод на onMount, поскольку мы знаем, что элемент был отображен на экране в момент выполнения onMount.

Добавление обратного вызова к событию

<script>
    import {onMount} from "svelte";
    let count = 0;

    const keydownListener = (event) => {
        if (event.keyCode == 32) {
            count = count + 1;
        }
    }

    const resetCount = () => {
        count = 0;
    }

    onMount(() => {
        window.addEventListener('keydown', keydownListener) 
        return () => window.removeEventListener('keydown', keydownListener);
    })
</script> 

<h2>
    "Space" key has been pressed {count} times
</h2>

<button on:click={resetCount}>Reset</button>

Мы можем добавить обратный вызов к событию окна под названием keydown, чтобы услышать любое нажатие клавиши, которое выполняет пользователь. Затем мы можем проверить, что значение keyCode равно 32, и увеличить значение счетчика. onMount может возвращать другую функцию, которая выполняется, когда компонент удаляется из DOM. Мы удаляем слушатель событий, чтобы избежать утечки памяти после удаления компонента из DOM.

Что следует отметить о onMount

1. Функция onMount может быть вызвана из внешнего модуля (т.е. внешний модуль, в котором определена функция onMount, будет выполнен, когда вы вызовете эту функцию внутри вашего компонента).
2. Функция onMount не выполняется в Server Side Rendering (SSR).

Заключение

Методы жизненного цикла действительно полезны, и svelte позволяет легко добавить их в компонент.