Компоненты высшего порядка
Оборачивайте компоненты, чтобы добавлять поведение или данные без изменения исходного компонента.
«Компоненты высшего порядка» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Определение HOC
Компонент высшего порядка оборачивает другой компонент, чтобы добавить поведение или данные.
В Svelte
Можно написать компонент-обёртку, который импортирует базовый компонент и добавляет возможности (ведение журнала, аутентификацию, темизацию).
<!-- WithAuth.svelte -->
{#if user}
<slot />
{:else}
<a href="/login">Login</a>
{/if}Использование
Оборачивайте страницы, которым требуется аутентификация.
<WithAuth>
<Dashboard />
</WithAuth>Добавление поведения
HOC может добавлять обработчики событий, отслеживать прокрутку или внедрять стили вокруг дочерних элементов.
Сравнение с композицией
HOC — это один из шаблонов; композиция со слотами или сниппетами часто проще.
Когда использовать HOC
Используйте их для сквозных задач, которые должны единообразно оборачивать множество компонентов.
HOC-поставщик контекста
HOC, вызывающий setContext, — удобный способ ограничить зависимости дочерним деревом.
Передача свойств
Используйте $$restProps или rest из $props(), чтобы передавать произвольные свойства дальше.
Производительность
Обёртки добавляют уровень компонентов; обычно это не проблема, но в сильно вложенных интерфейсах стоит следить за производительностью.
Тестирование
HOC легко тестировать, монтируя обёртку с различными входными данными.
Альтернатива: пользовательские хранилища
Иногда пользовательское хранилище и небольшой компонент проще, чем HOC.
Быстрая проверка
Что делает HOC?
Повторение
HOC оборачивают компоненты, добавляя сквозные функции. Это удобно для аутентификации, темизации и ведения журналов на множестве страниц.
Часто задаваемые вопросы
Урок «Компоненты высшего порядка» бесплатный?
Да — полный текст урока «Компоненты высшего порядка» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Компоненты высшего порядка»?
Оборачивайте компоненты, чтобы добавлять поведение или данные без изменения исходного компонента. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Компоненты высшего порядка»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Render-свойства со сниппетами
- Компоненты высшего порядка
- Шаблон Builder для headless-интерфейсов
- Составные компоненты с контекстом