Svelte Lifecycle Hooks: ¿Qué son y cómo funcionan?

Conclusiones clave

• Los ganchos del ciclo de vida de Svelte le permiten controlar las diferentes etapas del ciclo de vida de un componente, como la inicialización, la actualización y la destrucción.
• Los cuatro ganchos principales del ciclo de vida en Svelte son onMount, onDestroy, beforeUpdate y afterUpdate.
• Al utilizar estos enlaces de ciclo de vida, puede realizar acciones como recuperar datos, configurar detectores de eventos, limpiar recursos y actualizar la interfaz de usuario en función de los cambios de estado.

Svelte es un marco de JavaScript moderno que le permite crear aplicaciones web eficientes. Una de las características críticas de Svelte son sus ganchos de ciclo de vida que le brindan control sobre las diferentes etapas del ciclo de vida de un componente.

¿Qué son los ganchos del ciclo de vida?

Los ganchos del ciclo de vida son métodos que se activan en puntos específicos del ciclo de vida de un componente. Le permiten realizar acciones particulares en estos puntos, como inicializar el componente, responder a cambios o limpiar recursos.

Los diferentes marcos tienen diferentes ciclos de vida, pero todos comparten algunas características comunes. Svelte ofrece cuatro ganchos principales para el ciclo de vida: en el Monte, enDestroy, antes de actualizar, y después de la actualización.

Configurar un proyecto esbelto

Para comprender cómo puede utilizar los ganchos del ciclo de vida de Svelte, comience creando un proyecto de Svelte. Puedes hacer esto de varias maneras, como como usar Vite (una herramienta de construcción front-end) o décimo. Degit es una herramienta de línea de comandos para descargar y clonar repositorios de git sin descargar todo el historial de git.

Usando Vita

Para crear un proyecto Svelte usando Vite, ejecute el siguiente comando en su terminal:

npm init vite

Una vez que ejecute el comando, responderá algunas indicaciones para proporcionar el nombre de su proyecto, el marco que desea utilizar y la variante específica de ese marco.

Ahora, navegue hasta el directorio del proyecto e instale las dependencias necesarias.

Ejecute los siguientes comandos para hacer esto:

cd svelte-app
npm install

Usando dígitos

Para configurar su proyecto Svelte usando degit, ejecute este comando en su terminal:

npx degit sveltejs/template svelte-app

Luego, navegue hasta el directorio del proyecto e instale las dependencias necesarias:

cd svelte-app
npm install

Trabajar con el gancho onMount

El en el Monte El gancho es un gancho vital para el ciclo de vida en Svelte. Svelte llama al gancho onMount cuando un componente se representa por primera vez y se inserta en el DOM. Es similar al componenteDidMount método de ciclo de vida en los componentes de la clase React o el usoEfectoenganchar los componentes funcionales de React con una matriz de dependencia vacía.

Utilizará principalmente el gancho onMount para realizar tareas de inicialización, como obteniendo datos de una API o configurar detectores de eventos. El gancho onMount es una función que toma un solo argumento. Este argumento es la función que la aplicación llamará cuando represente el componente por primera vez.

A continuación se muestra un ejemplo de cómo puede utilizar el gancho onMount:

<script>
import { onMount } from 'svelte'
onMount( () => { console.log('Component has been added to the DOM')} );
script>
<div>
<p>This is a random componentp>
div>

En tus aplicación esbelta proyecto, crear un src/Test.svelte archivo y agregue el código anterior. Este código importa el gancho onMount de Svelte y lo llama para ejecutar una función simple que registra texto en la consola. Para probar el gancho onMount, renderice el Prueba componente en su src/App.svelte archivo:

Por ejemplo:

<script>
import Test from "./Test.svelte";
script>
<main>
<h1>Hello There!h1>
<Test />
main>

Luego ejecute la aplicación:

npm run dev

Ejecutar este comando le proporcionará una URL local como http://localhost: 8080. Visite el enlace en un navegador web para ver su solicitud. La aplicación registrará el texto "El componente se ha agregado al DOM" en la consola de su navegador.

Trabajar con el gancho onDestroy

Como lo contrario de la en el Monte gancho, Svelte llama al enDestroy gancho cuando está a punto de eliminar un componente del DOM. El gancho onDestroy es útil para limpiar cualquier recurso o detector de eventos que haya configurado durante el ciclo de vida del componente.

Este gancho es similar al de React. componenteWillUnmount método del ciclo de vida y su usoEfecto Gancho con función de limpieza.

A continuación se muestra un ejemplo de cómo utilizar el gancho onDestroy:

<script>
import { onDestroy } from "svelte";
let intervalId;
intervalId = setInterval(() => {
 console.log("interval");
}, 1000);
onDestroy(() => {
 clearInterval(intervalId);
});
script>

Este código inicia un temporizador que registra el "intervalo" de texto en la consola de su navegador cada segundo. Utiliza el gancho onDestroy para borrar el intervalo cuando el componente sale del DOM. Esto evita que el intervalo continúe ejecutándose cuando el componente ya no es necesario.

Trabajar con los ganchos beforeUpdate y afterUpdate

El antes de actualizar y después de la actualización Los ganchos son funciones del ciclo de vida que se ejecutan antes y después de que el DOM se actualice. Estos enlaces son útiles para realizar acciones basadas en cambios de estado, como actualizar la interfaz de usuario o desencadenar efectos secundarios.

El gancho beforeUpdate se ejecuta antes de que se actualice el DOM y cada vez que cambia el estado del componente. Esto es similar a obtener instantánea antes de actualizar en componentes de la clase React. Utiliza principalmente el enlace beforeUpdate al comparar el nuevo estado de la aplicación con su estado anterior.

A continuación se muestra un ejemplo de cómo utilizar el gancho beforeUpdate:

<script>
import { beforeUpdate } from "svelte";
let count = 0;
beforeUpdate(() => {
 console.log("Count before update:", count);
});
function increment() {
 count += 1;
}
script>
<buttonon: click={increment}>Count: {count}button>

Reemplace el código en su Prueba componente con el bloque de código anterior. Este código utiliza el gancho beforeUpdate para registrar el valor del contar estado antes de que se actualice el DOM. Cada vez que hace clic en el botón, se ejecuta la función de incremento y aumenta el valor del estado de conteo en 1. Esto hace que la función beforeUpdate se ejecute y registre el valor del estado de recuento.

El gancho afterUpdate se ejecuta después de las actualizaciones del DOM. Generalmente se usa para ejecutar código que debe realizarse después de las actualizaciones del DOM. Este gancho es similar a componenteDidUpdate en Reaccionar. El gancho afterUpdate funciona como el gancho beforeUpdate.

Por ejemplo:

<script>
import { afterUpdate } from "svelte";
let count = 0;
afterUpdate(() => {
 console.log("Count after update:", count);
});
function increment() {
 count += 1;
}
script>
<buttonon: click={increment}>Count: {count}button>

El bloque de código anterior es similar al anterior, pero este usa el gancho afterUpdate para registrar el valor del estado de conteo. Esto significa que registrará el estado del recuento después de que se actualice el DOM.

Cree aplicaciones sólidas utilizando los ganchos del ciclo de vida de Svelte

Los ganchos del ciclo de vida en Svelte son herramientas esenciales que se utilizan para crear aplicaciones dinámicas y responsivas. Comprender los enlaces del ciclo de vida es una parte valiosa de la programación de Svelte. Con estos enlaces, puede controlar la inicialización, actualización y destrucción de sus componentes y manejar sus cambios de estado.