Svelte 5 trae mejoras internas, es decir, componentes funcionales y la adopción de señales, pero por lo demás es una actualización mayoritariamente incremental. La única excepción es la nueva función Runes, que introduce una serie de ideas para abordar la reactividad de una manera más modular, concisa y detallada. En este artículo, obtendrás una introducción práctica a las principales runas incluidas en Svelte 5: $state(), $derived(), $props(), $inspectI() y $effect().Runas en SvelteA primera vista, podría parecer que la nueva función de runas añade complejidad al trabajo con Svelte. De hecho, esta idea ofrece un enfoque más sencillo para hacer muchas cosas que probablemente ya haga. El término runa se refiere a un glifo mágico o una letra alfabética con poderes misteriosos. En Svelte, las runas son tokens especiales que le indican al compilador de Svelte que trabaje detrás de escena de maneras específicas para que las cosas sucedan. Una runa le brinda una sintaxis simple para indicarle al motor Svelte que realice un trabajo específico y útil, como administrar el estado y exponer las propiedades de los componentes. Las principales runas introducidas en Svelte 5 son: $state() $derived() $effect() $props( ) $inspect() Como puedes ver, una runa es una función precedida por un carácter de signo de dólar. Como desarrollador, usted utiliza estas funciones especiales casi exactamente como lo haría con cualquier otra función. Luego, el motor Svelte se encarga de implementar la acción prevista de la runa detrás de escena. $state()Comencemos mirando $state(), que es la runa que probablemente usarás con más frecuencia. En un sentido (muy) amplio, la runa $state hace algo lógicamente similar al gancho React useState(), proporcionando una forma funcional de lidiar con el estado reactivo. Consideremos un ejemplo simple. Así es como crearías una entrada y mostrarías su valor en Svelte 4, sin runas:

Texto: {texto} Y ahora, aquí está la misma acción con la runa $state:

Texto: {texto} En ambos ejemplos, tenemos una variable de estado simple (texto) y la usamos para controlar una entrada de texto que se muestra en la pantalla. Este es el código típico de Svelte, especialmente la sintaxis bind:value={text}, que le brinda una forma sencilla de vincular dos vías a una entrada. El único cambio aquí es que, en lugar de declarar una variable normal con let text = » Predeterminado», la declaramos como una runa de estado: let text = $state(«Predeterminado»). El «Predeterminado» que pasamos a $state es el valor inicial. Observe que la llamada bind:value no tiene que cambiar en absoluto: Svelte sabe cómo usar una runa en ese contexto. En general, la referencia de la runa de estado actúa correctamente en cualquier lugar donde funcione una variable. Aunque se trata de un pequeño cambio, la claridad aporta un beneficio evidente. Es genial que el compilador Svelte se dé cuenta mágicamente de que let count = 0 debe ser reactivo cuando está en la parte superior de un componente. Pero a medida que el código base crece, esa característica resulta un poco confusa, ya que resulta difícil saber qué variables son reactivas. La runa $state elimina ese problema. Otro beneficio es que $state puede aparecer en cualquier lugar, no solo en el nivel superior de sus componentes. Entonces, digamos que queremos una función de fábrica que cree estados de texto para usar en entradas arbitrarias. He aquí un ejemplo sencillo:

Texto: {text.text} Si bien el ejemplo es artificial, el punto es que la declaración $state() crea un estado reactivo funcional desde dentro de un alcance diferente, algo que requiere contorsiones en la antigua sintaxis de Svelte. Observe también que en este caso proporcionamos un captador y un definidor para la variable de texto; esto se debe a que la llamada bind:value es un enlace bidireccional que requiere acceso de lectura y escritura al objeto de estado. Otra propiedad interesante de la runa $state() es que se conecta automáticamente a los miembros de un objeto:



Texto: {valueObject.text}

Número: {valueObject.num} La esencia de este fragmento es que las propiedades text y num de la clase valueObject se vinculan automáticamente y correctamente a las entradas, sin declarar explícitamente los captadores y definidores. Svelte proporciona automáticamente los captadores y definidores que el objeto necesita para acceder a las propiedades de la clase valueObject.$derived()En el pasado, se podía crear una propiedad derivada usando la sintaxis $: en Svelte. Esto tenía algunas limitaciones, incluido el hecho de que los valores podían volverse obsoletos porque el motor solo actualizaba el valor calculado cuando se actualizaba el componente. Svelte 5 reemplaza la sintaxis $: con $derived(), que mantiene el valor calculado sincronizado en todo momento. A continuación se muestra un ejemplo del uso de $derived para combinar cadenas de entradas de texto:



Texto: {oración} Lo que estamos haciendo aquí es usar la variable de oración como una runa derivada. Se deriva de las runas de estado de saludo y nombre. Entonces, una runa derivada combina los estados de las variables de estado. El uso de $derived(saludo + “ “ + nombre) garantiza que cada vez que el saludo o el nombre cambie, la variable de oración reflejará esos cambios.$effect()$effect es una runa que funciona de manera similar al efecto useState() de React. Se utiliza para provocar efectos fuera del motor reactivo. Aquí hay un ejemplo de los documentos de Svelte: $effect(() => { // se ejecuta cuando el componente está montado, y nuevamente // cada vez que `count` o `double` cambia, // después de que se haya actualizado el DOM console.log ({ count, doubled }); return () => { // si se proporciona una devolución de llamada, se ejecutará // a) inmediatamente antes de que el efecto se vuelva a ejecutar // b) cuando se destruya el componente console.log(‘ limpiar’); }; }); El propósito de este código es ejecutar el registro cuando el componente se monta por primera vez y luego cada vez que se modifican el recuento y el doble de las variables dependientes. El valor de retorno opcional le permite realizar cualquier limpieza necesaria antes de que se ejecute el efecto o cuando el componente esté desmontado.$props()$props() es la nueva forma de declarar y consumir propiedades de componentes en Svelte. Esto cubre algunos casos de uso, especialmente la exportación de variables en el nivel superior de componentes con let. Un ejemplo vale más que mil palabras y, en general, la nueva sintaxis de $props es limpia y obvia: // main.svelte




// Componente2.esbelto

{prop1}

{prop2} //salidas: foo foo test Aquí, el componente main.svelte importa Component2 y demuestra cómo modificar los accesorios mediante propiedades en el marcado. Observe que Component2 puede declarar valores predeterminados como prop1 = “foo”.$inspect()La última runa que veremos es $inspect. Esta es una especie de declaración de registro de consola reactiva:


En este ejemplo (tomado de los documentos de Svelte), el propósito es emitir una declaración de registro cada vez que cambia el recuento de variables del mensaje. En esencia, le brinda una forma sencilla de iniciar sesión en la consola de forma reactiva, en respuesta a actualizaciones variables. Conclusión El efecto general de las runas es simplificar la API Svelte para los desarrolladores. Tomará algún tiempo adaptarse a la nueva sintaxis y migrar el código existente, pero en general, el nuevo enfoque es realmente más fácil. Si hay una excepción, es la runa $effect(), que requiere un poco más de reflexión antes de usarse para reemplazar los enfoques existentes. La elegancia de $state(), $derived() y $props() compensa con creces la complejidad de $effect(). Considerándolo todo, la nueva característica Runas es una idea nueva y bienvenida en cuanto a reactividad. Copyright © 2024 IDG Communications, Inc.

Source link