Descubra como executar código em vários pontos do ciclo de vida dos seus componentes.

Principais conclusões

  • Os ganchos de ciclo de vida do Svelte permitem controlar os diferentes estágios do ciclo de vida de um componente, como inicialização, atualização e destruição.
  • Os quatro principais ganchos de ciclo de vida no Svelte são onMount, onDestroy, beforeUpdate e afterUpdate.
  • Ao utilizar esses ganchos de ciclo de vida, você pode executar ações como buscar dados, configurar ouvintes de eventos, limpar recursos e atualizar a IU com base em alterações de estado.

Svelte é uma estrutura JavaScript moderna que permite criar aplicativos da web eficientes. Um dos recursos críticos do Svelte são os ganchos de ciclo de vida que fornecem controle sobre os diferentes estágios do ciclo de vida de um componente.

O que são ganchos de ciclo de vida?

Ganchos de ciclo de vida são métodos acionados em pontos específicos do ciclo de vida de um componente. Eles permitem que você execute ações específicas nesses pontos, como inicializar o componente, responder a alterações ou limpar recursos.

instagram viewer

Estruturas diferentes têm ganchos de ciclo de vida diferentes, mas todas compartilham alguns recursos comuns. Svelte oferece quatro ganchos principais de ciclo de vida: no Monte, onDestroy, antes da atualização, e depois da atualização.

Configurando um projeto elegante

Para entender como você pode usar os ganchos de ciclo de vida do Svelte, comece criando um projeto Svelte. Você pode fazer isso de várias maneiras, como como usar o Vite (uma ferramenta de construção front-end) ou dígito. Degit é uma ferramenta de linha de comando para baixar e clonar repositórios git sem baixar todo o histórico do git.

Usando Vite

Para criar um projeto Svelte usando Vite, execute o seguinte comando em seu terminal:

npm init vite

Depois de executar o comando, você responderá a alguns prompts para fornecer o nome do seu projeto, a estrutura que deseja usar e a variante específica dessa estrutura.

Agora navegue até o diretório do projeto e instale as dependências necessárias.

Execute os seguintes comandos para fazer isso:

cd svelte-app
npm install

Usando dígito

Para configurar seu projeto Svelte usando degit, execute este comando em seu terminal:

npx degit sveltejs/template svelte-app

Em seguida, navegue até o diretório do projeto e instale as dependências necessárias:

cd svelte-app
npm install

Trabalhando com o gancho onMount

O no Monte hook é um gancho de ciclo de vida vital no Svelte. Svelte chama o gancho onMount quando um componente é renderizado pela primeira vez e inserido no DOM. É semelhante ao componenteDidMount método de ciclo de vida nos componentes da classe React ou no useEfeitogancho em componentes funcionais do React com uma matriz de dependência vazia.

Você usará principalmente o gancho onMount para executar tarefas de inicialização, como buscando dados de uma API ou configurando ouvintes de eventos. O gancho onMount é uma função que recebe um único argumento. Este argumento é a função que o aplicativo chamará quando renderizar o componente pela primeira vez.

Aqui está um exemplo de como você pode usar o 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>

Na tua aplicativo esbelto projeto, crie um src/Test.svelte arquivo e adicione o código acima a ele. Este código importa o gancho onMount do Svelte e o chama para executar uma função simples que registra texto no console. Para testar o gancho onMount, renderize o Teste componente em seu src/App.svelte arquivo:

Por exemplo:

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

Em seguida, execute o aplicativo:

npm run dev

A execução deste comando fornecerá um URL local como http://localhost: 8080. Visite o link em um navegador da web para visualizar seu aplicativo. O aplicativo registrará o texto “O componente foi adicionado ao DOM” no console do seu navegador.

Trabalhando com o gancho onDestroy

Como o oposto do no Monte gancho, Svelte chama o onDestroy hook quando está prestes a remover um componente do DOM. O gancho onDestroy é útil para limpar quaisquer recursos ou ouvintes de eventos que você configurou durante o ciclo de vida do componente.

Este gancho é semelhante ao do React componenteWillUnmount método de ciclo de vida e sua useEfeito gancho com uma função de limpeza.

Aqui está um exemplo de como usar o gancho onDestroy:

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

Este código inicia um cronômetro que registra o texto “intervalo” no console do seu navegador a cada segundo. Ele usa o gancho onDestroy para limpar o intervalo quando o componente sai do DOM. Isso evita que o intervalo continue em execução quando o componente não for mais necessário.

Trabalhando com os ganchos beforeUpdate e afterUpdate

O antes da atualização e depois da atualização ganchos são funções de ciclo de vida executadas antes e depois do DOM passar por uma atualização. Esses ganchos são úteis para executar ações com base em mudanças de estado, como atualizar a interface do usuário ou desencadear efeitos colaterais.

O gancho beforeUpdate é executado antes das atualizações do DOM e sempre que o estado do componente muda. É similar à getSnapshotBeforeUpdate nos componentes da classe React. Você usa principalmente o gancho beforeUpdate ao comparar o novo estado do aplicativo com o estado antigo.

Abaixo está um exemplo de como usar o 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>

Substitua o código no seu Teste componente com o bloco de código acima. Este código usa o gancho beforeUpdate para registrar o valor do contar estado antes das atualizações do DOM. Cada vez que você clica no botão, a função de incremento é executada e aumenta o valor do estado de contagem em 1. Isso faz com que a função beforeUpdate seja executada e registre o valor do estado de contagem.

O gancho afterUpdate é executado após as atualizações do DOM. Geralmente é usado para executar código que precisa acontecer após as atualizações do DOM. Este gancho é semelhante a componenteDidUpdate em Reagir. O gancho afterUpdate funciona como o gancho beforeUpdate.

Por exemplo:

<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>

O bloco de código acima é semelhante ao anterior, mas este usa o gancho afterUpdate para registrar o valor do estado de contagem. Isso significa que ele registrará o estado da contagem após as atualizações do DOM.

Crie aplicativos robustos usando os ganchos de ciclo de vida do Svelte

Os ganchos de ciclo de vida no Svelte são ferramentas essenciais usadas para criar aplicativos dinâmicos e responsivos. Compreender os ganchos do ciclo de vida é uma parte valiosa da programação do Svelte. Usando esses ganchos, você pode controlar a inicialização, atualização e destruição de seus componentes e lidar com suas alterações de estado.