Реактивная магия в Svelte 5: Понимание рун

Svelte 5 содержит улучшения, а именно функциональные компоненты и внедрение сигналов, но в остальном это в основном постепенное обновление. Единственным исключением является новая функция «Руны», которая предлагает множество идей по управлению реактивностью более модульным, кратким и детализированным способом.

В этой статье вы получите практическое представление об основных рунах, поставляемых в Svelte 5: $state(), $derived(), $props(), $inspectI()и $эффект().

Руны в Svelte

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

Руна дает вам простой синтаксис, позволяющий движку Svelte выполнять конкретную полезную работу, такую ​​как управление состоянием и раскрытие свойств компонента.

Основные руны, представленные в Svelte 5:

• $state()
• $derived()
• $effect()
• $props()
• $inspect()

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

$state()

Начнем с рассмотрения $state(), эту руну вы, скорее всего, будете использовать чаще всего. В (очень) широком смысле слова $state rune делает что-то логически похожее на React useState() крючок, предоставляющий функциональный способ борьбы с реактивным состоянием.

Давайте рассмотрим простой пример. Вот как можно создать поле ввода и отобразить его значение в Svelte 4 без рун:

<script>
  let text = "Default";
</script>

<input type="text" bind:value={text}/>
Text: {text}

А теперь вот то же самое действие с $state руна:

<script>
	let text = $state("Default")
</script>

<input type="text" bind:value={text}/>
Text: {text}

В обоих этих примерах у нас есть простая переменная состояния (text) и использовать его для ввода текста, который выводится на экран. Это типичный код Svelte, особенно bind:value={text} синтаксис, который дает вам простой способ двусторонней привязки к вводу.

Единственное изменение здесь заключается в том, что вместо объявления обычной переменной с let text = "Default"объявляем ее государственной руной: let text = $state("Default"). "Default" мы переходим в $state является начальным значением.

Обратите внимание, что bind:value вызов вообще не должен меняться: Svelte знает, как использовать руну в этом контексте. В целом, state rune ссылка действует правильно везде, где работает переменная.

Хотя это небольшое изменение, ясность дает очевидную выгоду. Замечательно, что компилятор Svelte волшебным образом это понимает. let count = 0 должен быть реактивным, когда он находится в верхней части компонента. Но по мере роста кодовой базы эта функция становится немного запутанной, поскольку становится трудно определить, какие переменные являются реактивными. $state Руна устраняет эту проблему.

Еще одно преимущество заключается в том, что $state может появиться где угодно, а не только на верхнем уровне ваших компонентов. Итак, предположим, нам нужна фабричная функция, которая будет создавать текстовые состояния для использования в произвольных входных данных. Вот простой пример:

<script>
	let makeText = function(def){
		let myText = $state(def);
		return { 
			get text() { return myText },
			set text(text) { myText = text },
		}
	}
	let text = makeText("test");
</script>

<input type="text" bind:value={text.text}/>
Text: {text.text}

Хотя пример надуманный, суть в том, $state() Декларация создает функционирующее реактивное состояние из другой области действия, что требует искажений в старом синтаксисе Svelte. Также обратите внимание, что в этом случае мы предоставили как метод получения, так и метод установки для текстовой переменной; это потому, что bind:value вызов — это двусторонняя привязка, требующая доступа как для чтения, так и для записи к объекту состояния.

Еще одно интересное свойство $state() руна заключается в том, что она автоматически привязывается к членам объекта:

<script>
	let valueObject = new class { 
		text = $state('I am a test')
		num = $state(42)
	};
</script>

<input type="text" bind:value={valueObject.text}/>
<input type="number" bind:value={valueObject.num}/>
<br>
Text: {valueObject.text}
<br>
Number: {valueObject.num}

Суть этого фрагмента в том, что text и num свойства valueObject class автоматически правильно привязываются к входам без явного объявления геттеров и сеттеров. Svelte автоматически предоставляет геттеры и сеттеры, необходимые объекту для доступа к свойствам объекта. valueObject сорт.

$производный()

Раньше вы могли создать производное свойство, используя $: синтаксис в Svelte. Это имело некоторые ограничения, в том числе то, что значения могли устаревать, поскольку движок обновлял вычисленное значение только при обновлении компонента. Svelte 5 заменяет $: синтаксис с $derived()что позволяет постоянно синхронизировать вычисленное значение.

Вот пример использования $derived для объединения строк из текстовых полей:

<script>
	let greeting = $state("Hello there");
	let name = $state("User");
	let sentence = $derived(greeting + " " + name);
</script>

<input type="text" bind:value={greeting}/>
<input type="text" bind:value={name}/>
<br>
Text: {sentence }

Здесь мы используем переменную предложения в качестве производная руна. Оно происходит от рун состояния приветствия и имени. Итак, производная руна объединяет состояния переменных состояния.

С использованием $derived(greeting + “ “ + name) гарантирует, что при изменении приветствия или имени переменная предложения будет отражать эти изменения.

$эффект()

$effect — это руна, которая работает аналогично эффекту useState() в React. Он используется для создания эффектов за пределами реактивного двигателя. Вот пример из документации Svelte:

$effect(() => {
  // runs when the component is mounted, and again
  // whenever `count` or `doubled` change,
  // after the DOM has been updated
  console.log({ count, doubled });

  return () => {
   // if a callback is provided, it will run
   // a) immediately before the effect re-runs
   // b) when the component is destroyed
	console.log('cleanup');
  };
});

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

$реквизит()

$props() — это новый способ объявления и использования свойств компонентов в Svelte. Это охватывает несколько вариантов использования, особенно экспорт переменных на верхнем уровне компонентов с помощью let. Пример стоит тысячи слов, и вообще новый $props синтаксис чист и очевиден:

// main.svelte
<script>
  import Component2 from './Component2.svelte';
</script>
<Component2>
</Component2>
<Component2 prop2 = "test">
</Component2>

// Component2.svelte
<script>
let { prop1 = "foo", prop2} = $props();
</script>
{prop1}
<br>
{prop2}

//outputs:
foo
foo
test

Здесь main.svelte компонент импортирует Component2 и демонстрация того, как изменять реквизиты с помощью свойств разметки. Заметить, что Component2 может объявлять значения по умолчанию, например prop1 = “foo”.

$осмотр()

Последняя руна, которую мы рассмотрим, это $inspect. Это своего рода реактивный оператор журналирования консоли:

<script>
	let count = $state(0);
	let message = $state('hello');

	$inspect(count, message); // will console.log when `count` or `message` change
</script>

<button onclick={() => count++}>Increment</button>
<input bind:value={message} />

В этом примере (взятом из документации Svelte) цель состоит в том, чтобы создавать оператор регистрации всякий раз, когда изменяется количество переменных сообщения. По сути, это дает вам простой способ реактивного входа в консоль в ответ на обновления переменных.

Заключение

Общий эффект рун заключается в упрощении API Svelte для разработчиков. Потребуется некоторое время, чтобы адаптироваться к новому синтаксису и перенести существующий код, но в целом новый подход действительно проще. Если есть исключение, то это $effect() руна, которая требует немного больше размышлений, прежде чем ее использовать для замены существующих подходов. Элегантность $state(), $derived()и $props() более чем компенсировать $effect()сложность. В целом, новая функция «Руны» — это свежая и долгожданная идея в области реактивности.