{#key} para forzar el renderizado
Utilice el bloque key para destruir y volver a crear componentes cuando cambie un valor
{#key} para forzar el renderizado es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 3 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.
El bloque key
{#key expr} destruye y vuelve a crear su contenido cada vez que cambia expr. Es útil cuando desea un componente nuevo.
Reiniciar animaciones
Envuelva un elemento animado en {#key} para reproducir la transición cada vez que cambie la clave.
{#key id}
<div in:fade>{message}</div>
{/key}Restablecer el estado del componente
Envuelva un hijo con estado interno en {#key id} para restablecer completamente ese estado cuando cambie el id.
{#key currentUser.id}
<UserProfile user={currentUser} />
{/key}Diferencia con la clave de each
El bloque {#key} aplica una clave a un solo elemento; {#each ... (key)} aplica claves a los elementos de una lista.
Cuándo usarlo
Úselo cuando desee restablecer un estado interno complejo sin borrar manualmente cada campo.
Coste de rendimiento
Cada cambio de clave desmonta y reconstruye el subárbol. Evite envolver árboles enormes si la clave cambia con frecuencia.
Etiqueta de cierre
Cierre con {/key}.
Usos habituales
Reiniciar animaciones, restablecer entradas no controladas y forzar una nueva solicitud al navegar a otra entidad.
Alternativa: bind:this
A veces puede restablecer el estado de forma imperativa con una referencia. {#key} es más limpio para los restablecimientos declarativos.
Combinar con transiciones
Combínelo con transiciones para ofrecer una señal visual fluida de que algo ha cambiado fundamentalmente.
Evitar para cambios triviales
No envuelva contenido puramente reactivo en {#key}: Svelte ya lo actualiza de forma eficiente.
Comprobación rápida
¿Qué hace {#key x} cuando cambia x?
Repaso
{#key} fuerza una destrucción y reconstrucción completas cada vez que cambia su expresión; es útil para restablecimientos y para reproducir animaciones.
Preguntas frecuentes
¿La lección «{#key} para forzar el renderizado» es gratis?
Sí — el texto completo de «{#key} para forzar el renderizado» 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 «{#key} para forzar el renderizado»?
Utilice el bloque key para destruir y volver a crear componentes cuando cambie un valor 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 3 de 4.
¿Cuánto tiempo toma la lección «{#key} para forzar el renderizado»?
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
- {#if} {#else if} {#else}
- {#each} con índice y clave
- {#key} para forzar el renderizado
- {#each} anidados y actualizaciones con clave