Componentes de orden superior
Envuelva componentes para añadir comportamiento o datos sin modificar el original.
Componentes de orden superior es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
HOC definidos
Un componente de orden superior envuelve otro componente para añadir comportamiento o datos.
En Svelte
Puede escribir un componente envoltorio que importe uno base y añada capacidades (registro, autenticación o tematización).
<!-- WithAuth.svelte -->
{#if user}
<slot />
{:else}
<a href="/login">Login</a>
{/if}Uso
Envuelva las páginas que requieran autenticación.
<WithAuth>
<Dashboard />
</WithAuth>Añadir comportamientos
Un HOC puede asociar controladores de eventos, observar el desplazamiento o inyectar estilos alrededor de sus hijos.
Comparación con la composición
Los HOC son un patrón; la composición con slots/snippets suele ser más sencilla.
Cuándo utilizar HOC
Para aspectos transversales que deban envolver muchos componentes de forma coherente.
HOC proveedor de contexto
Un HOC que llama a setContext es una forma limpia de limitar las dependencias a un subárbol.
Propagación de props
Utilice $$restProps o rest de $props() para pasar props arbitrarios.
Rendimiento
Los envoltorios añaden una capa de componentes; normalmente no supone un problema, pero debe vigilarlo en interfaces muy anidadas.
Pruebas
Los HOC son fáciles de probar montando el envoltorio con distintas entradas.
Alternativa: stores personalizados
A veces, un store personalizado y un componente pequeño resultan más limpios que un HOC.
Comprobación rápida
¿Qué hace un HOC?
Recapitulación
Los HOC envuelven componentes para añadir aspectos transversales. Resultan útiles para la autenticación, los temas y el registro en muchas páginas.
Preguntas frecuentes
¿La lección «Componentes de orden superior» es gratis?
Sí — el texto completo de «Componentes de orden superior» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Componentes de orden superior»?
Envuelva componentes para añadir comportamiento o datos sin modificar el original. Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Componentes de orden superior»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Render props con snippets
- Componentes de orden superior
- El patrón Builder para interfaces headless
- Componentes compuestos con contexto