Componentes de ordem superior
Envolva componentes para adicionar comportamento ou dados sem modificar o original.
Componentes de ordem superior é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
HOCs definidos
Um componente de ordem superior envolve outro componente para adicionar comportamento ou dados.
No Svelte
É possível escrever um componente encapsulador que importe uma base e adicione recursos, como registro, autenticação e tematização.
<!-- WithAuth.svelte -->
{#if user}
<slot />
{:else}
<a href="/login">Login</a>
{/if}Uso
Envolva as páginas que exigem autenticação.
<WithAuth>
<Dashboard />
</WithAuth>Adicionar comportamentos
Um HOC pode anexar manipuladores de eventos, observar a rolagem ou injetar estilos ao redor de seus filhos.
Comparação com composição
HOCs são um padrão; a composição com slots ou fragmentos costuma ser mais simples.
Quando usar HOCs
Para preocupações transversais que devem envolver muitos componentes de maneira consistente.
HOC provedor de contexto
Um HOC que chama setContext é uma forma limpa de limitar as dependências a uma subárvore.
Encaminhamento de propriedades
Use $$restProps ou rest de $props() para transmitir propriedades arbitrárias.
Desempenho
Os encapsuladores adicionam uma camada de componentes; isso geralmente não é um problema, mas fique atento em interfaces muito aninhadas.
Testes
HOCs são fáceis de testar montando o encapsulador com várias entradas.
Alternativa: stores personalizados
Às vezes, um store personalizado e um componente pequeno são mais claros que um HOC.
Verificação rápida
O que um HOC faz?
Revisão
Os HOCs envolvem componentes para adicionar preocupações transversais. São úteis para autenticação, tematização e registro em várias páginas.
Perguntas Frequentes
A aula “Componentes de ordem superior” é grátis?
Sim — o texto completo de “Componentes de ordem superior” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Componentes de ordem superior”?
Envolva componentes para adicionar comportamento ou dados sem modificar o original. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Componentes de ordem superior”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Propriedades de renderização com snippets
- Componentes de ordem superior
- O padrão Builder para interfaces sem apresentação
- Componentes compostos com contexto