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 $efecto().
Runas en esbelto
A 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 puede ver, una runa es una función que tiene como prefijo 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.
$estado()
Comencemos mirando $state()
, que es la runa que probablemente usarás con más frecuencia. En un sentido (muy) amplio, el $state
runa hace algo lógicamente similar a React useState()
gancho, que proporciona una forma funcional de lidiar con el estado reactivo.
Consideremos un ejemplo sencillo. Así es como crearías una entrada y mostrarías su valor en Svelte 4, sin runas:
<script>
let text = "Default";
</script>
<input type="text" bind:value={text}/>
Text: {text}
Y ahora, aquí está la misma acción con el $state
runa:
<script>
let text = $state("Default")
</script>
<input type="text" bind:value={text}/>
Text: {text}
En ambas muestras, tenemos una variable de estado simple (text
) y utilícelo para generar una entrada de texto que salga en la pantalla. Este es el típico código Svelte, especialmente el bind:value={text}
sintaxis, que le brinda una forma sencilla de vincular bidireccionalmente una entrada.
El único cambio aquí es que, en lugar de declarar una variable normal con let text = "Default"
lo declaramos como runa estatal: let text = $state("Default")
. El "Default"
pasamos a $state
es el valor inicial.
Note que el bind:value
La llamada no tiene que cambiar en absoluto: Svelte sabe cómo usar una runa en ese contexto. En general, el state rune
La referencia 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. El $state
runa 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:
<script>
let makeText = function(def){
let myText = $state(def);
return {
get text() { return myText },
set text(text) { myText = text },
}
}
let text = makeText("test");
</script>
<input type="text" bind:value={text.text}/>
Text: {text.text}
Si bien el ejemplo es artificial, el punto es el $state()
La declaración 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 el bind:value
La llamada es un enlace bidireccional que requiere acceso de lectura y escritura al objeto de estado.
Otra propiedad interesante de la $state()
runa es que se conecta automáticamente a los miembros de un objeto:
<script>
let valueObject = new class {
text = $state('I am a test')
num = $state(42)
};
</script>
<input type="text" bind:value={valueObject.text}/>
<input type="number" bind:value={valueObject.num}/>
<br>
Text: {valueObject.text}
<br>
Number: {valueObject.num}
La esencia de este fragmento es que el text
y num
propiedades de la valueObject
Las clases se vinculan automáticamente 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 del valueObject
clase.
$derivado()
En el pasado, podía crear una propiedad derivada utilizando el $:
sintaxis en esbelto. 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 al $:
sintaxis con $derived()
que mantiene el valor calculado sincronizado en todo momento.
He aquí un ejemplo de uso $derived
para combinar cadenas de entradas de texto:
<script>
let greeting = $state("Hello there");
let name = $state("User");
let sentence = $derived(greeting + " " + name);
</script>
<input type="text" bind:value={greeting}/>
<input type="text" bind:value={name}/>
<br>
Text: {sentence }
Lo que estamos haciendo aquí es usar la variable oración como 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.
Usando $derived(greeting + “ “ + name)
asegura que cada vez que cambie el saludo o el nombre, la variable de oración reflejará esos cambios.
$efecto()
$effect
es una runa que funciona de manera similar a la de React efecto useState(). Se utiliza para provocar efectos fuera del motor reactivo. Aquí hay un ejemplo de los documentos de Svelte:
$effect(() => {
// runs when the component is mounted, and again
// whenever `count` or `doubled` change,
// after the DOM has been updated
console.log({ count, doubled });
return () => {
// if a callback is provided, it will run
// a) immediately before the effect re-runs
// b) when the component is destroyed
console.log('cleanup');
};
});
El propósito de este código es ejecutar el registro cuando el componente se monta por primera vez y luego cuando las variables dependientes count
y doubled
son modificados. El valor de retorno opcional le permite realizar cualquier limpieza necesaria antes de que se ejecute el efecto o cuando se desmonte el componente.
$accesorios()
$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 $props
la sintaxis es limpia y obvia:
// main.svelte
<script>
import Component2 from './Component2.svelte';
</script>
<Component2>
</Component2>
<Component2 prop2 = "test">
</Component2>
// Component2.svelte
<script>
let { prop1 = "foo", prop2} = $props();
</script>
{prop1}
<br>
{prop2}
//outputs:
foo
foo
test
Aquí el main.svelte
El componente se está importando. Component2
y demostrar cómo modificar los accesorios a través de propiedades en el marcado. Darse cuenta de Component2
puede declarar valores predeterminados como prop1 = “foo”
.
$ inspeccionar()
La última runa que veremos es $inspect
. Esta es una especie de declaración de registro de consola reactiva:
<script>
let count = $state(0);
let message = $state('hello');
$inspect(count, message); // will console.log when `count` or `message` change
</script>
<button onclick={() => count++}>Increment</button>
<input bind:value={message} />
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 $effect()
rune, que requiere un poco más de reflexión antes de usarse para reemplazar los enfoques existentes. la elegancia de $state()
, $derived()
y $props()
más que compensar $effect()
La complejidad. Considerándolo todo, la nueva característica Runas es una idea nueva y bienvenida en cuanto a reactividad.
Copyright © 2024 IDG Communications, Inc.