Анатомия Svelte компонента

Svelte компоненты — это основные строительные блоки приложений на Svelte. Каждый компонент представляет собой файл с расширением .svelte, содержащий разметку, логику и стили. Основной принцип Svelte заключается в том, что весь код компилируется в чистый JavaScript, который выполняется в браузере, минимизируя накладные расходы на выполнение и обеспечивая высокую производительность. Рассмотрим, как устроен Svelte компонент, его основные элементы и принципы работы.

Структура файла компонента

Каждый компонент состоит из трёх основных частей:

  1. HTML-разметка (markup)
  2. JS-логика (script)
  3. CSS-стили (style)

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

HTML-разметка

В первой части компонента описывается разметка, которая будет отображаться на странице. В отличие от обычного HTML, Svelte предоставляет специальные возможности для динамического обновления DOM без необходимости работы с виртуальным DOM.

Пример разметки:

<h1>{message}</h1>
<button on:click={updateMessage}>Изменить сообщение</button>

В этом примере разметки переменная message будет автоматически отслеживаться, и при её изменении содержимое тега <h1> будет обновляться. Аналогичным образом работает привязка данных, что позволяет динамически обновлять интерфейс.

JS-логика

JavaScript-логика компонента находится в блоке <script>. Здесь можно определять переменные, функции, импорты других компонентов и обработчики событий.

Пример:

<script>
  let message = 'Привет, мир!';

  function updateMessage() {
    message = 'Сообщение обновлено';
  }
</script>

В данном примере создаётся переменная message и функция updateMessage, которая изменяет её значение. Это значение используется в разметке компонента для динамического обновления контента.

CSS-стили

CSS-стили компонента помещаются в блок <style>. В отличие от обычных стилей, которые могут распространяться на весь проект, стили в Svelte ограничиваются только текущим компонентом, благодаря чему исключается вероятность конфликта стилей между компонентами.

Пример:

<style>
  h1 {
    color: red;
  }
  button {
    background-color: blue;
    color: white;
  }
</style>

Каждый компонент имеет изолированные стили, что позволяет избежать глобального воздействия стилей на другие части приложения.

Привязка данных

Одной из ключевых особенностей Svelte является привязка данных. Она позволяет связывать элементы разметки с переменными компонента и обновлять интерфейс автоматически при изменении данных.

Существует несколько видов привязки:

  1. Двусторонняя привязка (two-way binding)

    Пример:

    <script>
  let name = '';
</script>

<input bind:value={name} />
<p>Привет, {name}!</p>

    В этом примере переменная name связана с полем ввода. Если пользователь изменит текст в поле, переменная name автоматически обновится, и наоборот — изменение переменной вызовет обновление текста в поле.

  2. Односторонняя привязка (one-way binding)

    Пример:

    <script>
  let count = 0;
</script>

<button on:click={() => count += 1}>Увеличить</button>
<p>{count}</p>

    Здесь count изменяется при нажатии на кнопку, и интерфейс обновляется, чтобы отобразить новое значение.

Обработчики событий

Обработчики событий в Svelte легко добавляются с помощью синтаксиса on:eventName. Это позволяет связывать действия пользователя с логикой компонента.

Пример:

<button on:click={handleClick}>Нажми меня</button>

<script>
  function handleClick() {
    alert('Кнопка нажата');
  }
</script>

При клике на кнопку будет вызвана функция handleClick, которая покажет сообщение.

Передача данных между компонентами

Svelte позволяет передавать данные между компонентами с помощью пропсов (props). Это основная форма коммуникации между компонентами. Родительский компонент может передавать данные в дочерний через атрибуты, а дочерний компонент может отправлять события обратно родительскому через диспатчинг событий.

Пример передачи данных:

<!-- Родительский компонент -->
<script>
  import Child from './Child.svelte';

  let parentData = 'Данные родителя';
</script>

<Child {parentData} />
<!-- Дочерний компонент -->
<script>
  export let parentData;
</script>

<p>{parentData}</p>

В этом примере родитель передаёт значение переменной parentData дочернему компоненту через атрибут. В дочернем компоненте это значение принимается через конструкцию export let.

Жизненный цикл компонента

Каждый компонент в Svelte имеет собственный жизненный цикл. Важнейшие методы жизненного цикла, которые можно использовать в компонентах, это:

  • onMount — вызывается после того, как компонент был вставлен в DOM.
  • beforeUpdate — вызывается перед обновлением компонента.
  • afterUpdate — вызывается после обновления компонента.
  • onDestroy — вызывается перед уничтожением компонента.

Пример использования:

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

  onMount(() => {
    console.log('Компонент монтирован');
  });

  onDestroy(() => {
    console.log('Компонент уничтожен');
  });
</script>

Стороны компонента

Помимо стандартных возможностей, Svelte предоставляет store — глобальные хранилища состояния, которые могут быть использованы для управления состоянием приложения. Это полезно для централизованного управления состоянием, которое необходимо для взаимодействия нескольких компонентов.

Пример использования store:

<script>
  import { writable } from 'svelte/store';

  const count = writable(0);
</script>

<button on:click={() => $count += 1}>Увеличить</button>
<p>{$count}</p>

В этом примере создаётся writable store, который хранит значение count. Оператор $ используется для подписки на изменения этого хранилища.

Заключение

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

Оглавление