$state: детализированная реактивность
Объявляйте реактивное состояние с помощью руны $state для точечных обновлений DOM.
«$state: детализированная реактивность» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Объявление состояния
Используйте $state(initial), чтобы объявить реактивную переменную.
let count = $state(0);Обычное присваивание
Обновляйте значение обычным присваиванием. Svelte повторно отображает зависимый интерфейс.
count = count + 1;Объекты и массивы
$state с объектами и массивами создаёт глубокие прокси; изменения становятся реактивными.
let user = $state({ name: "Ada" });
user.name = "Bea"; // triggers updateБольше никаких items = items
Больше не нужно повторно присваивать значение для запуска обновлений — прокси перехватывают изменения.
Точечные обновления
Повторно отображаются только те части DOM, которые используют изменившееся свойство.
Возврат из функции
Можно возвращать из функций объекты, поддерживаемые $state, чтобы повторно использовать фрагменты состояния.
function counter() {
let n = $state(0);
return {
get value() { return n; },
increment() { n++; }
};
}Использование в библиотеках
$state также работает в файлах .ts/.js, если они используют расширение .svelte.ts.
Без отслеживания
Используйте untrack(), чтобы прочитать значение состояния без регистрации зависимости.
Необработанное состояние
Для огромных нереактивных данных используйте $state.raw, чтобы пропустить создание прокси.
Замороженный снимок
Используйте $state.snapshot(obj), чтобы получить обычную копию без прокси.
Сравнение с let
$state — современная замена обычному let с неявной реактивностью.
Быстрая проверка
Что происходит при изменении объекта $state?
Итоги
$state создаёт мелкозернистые реактивные переменные, включая объекты и массивы с глубокими прокси.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «$state: детализированная реактивность» бесплатный?
Да — полный текст урока «$state: детализированная реактивность» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «$state: детализированная реактивность»?
Объявляйте реактивное состояние с помощью руны $state для точечных обновлений DOM. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «$state: детализированная реактивность»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Зачем нужны руны: за пределами магии компилятора
- $state: детализированная реактивность
- $derived: декларативные вычисляемые значения
- $effect: побочные эффекты