Temukan cara menjalankan kode di berbagai titik siklus hidup komponen Anda.

Poin Penting

  • Kait siklus hidup Svelte memungkinkan Anda mengontrol berbagai tahapan siklus hidup komponen, seperti inisialisasi, pembaruan, dan penghancuran.
  • Empat kait siklus hidup utama di Svelte adalah onMount, onDestroy, beforeUpdate, dan afterUpdate.
  • Dengan memanfaatkan kait siklus hidup ini, Anda dapat melakukan tindakan seperti mengambil data, menyiapkan pemroses peristiwa, membersihkan sumber daya, dan memperbarui UI berdasarkan perubahan status.

Svelte adalah kerangka kerja JavaScript modern yang memungkinkan Anda membangun aplikasi web yang efisien. Salah satu fitur penting Svelte adalah kait siklus hidupnya yang memberi Anda kendali atas berbagai tahapan siklus hidup komponen.

Apa itu Kait Siklus Hidup?

Kait siklus hidup adalah metode yang terpicu pada titik tertentu dalam siklus hidup suatu komponen. Mereka memungkinkan Anda melakukan tindakan tertentu pada titik ini, seperti menginisialisasi komponen, merespons perubahan, atau membersihkan sumber daya.

instagram viewer

Kerangka kerja yang berbeda memiliki kaitan siklus hidup yang berbeda, namun semuanya memiliki beberapa fitur yang sama. Svelte menawarkan empat kaitan siklus hidup utama: diMount, di Hancurkan, sebelum Pembaruan, Dan setelah Pembaruan.

Menyiapkan Proyek Langsing

Untuk memahami bagaimana Anda dapat menggunakan kait siklus hidup Svelte, mulailah dengan membuat proyek Svelte. Anda dapat melakukannya dengan berbagai cara, misalnya seperti menggunakan Vite (alat pembuatan front-end) atau angka. Degit adalah alat baris perintah untuk mengunduh dan mengkloning repositori git tanpa mengunduh seluruh riwayat git.

Menggunakan Vite

Untuk membuat proyek Svelte menggunakan Vite, jalankan perintah berikut di terminal Anda:

npm init vite

Setelah Anda menjalankan perintah, Anda akan menjawab beberapa pertanyaan untuk memberikan nama proyek Anda, kerangka kerja yang ingin Anda gunakan, dan varian spesifik kerangka tersebut.

Sekarang, navigasikan ke direktori proyek dan instal dependensi yang diperlukan.

Jalankan perintah berikut untuk melakukan ini:

cd svelte-app
npm install

Menggunakan angka

Untuk menyiapkan proyek Svelte Anda menggunakan degit, jalankan perintah ini di terminal Anda:

npx degit sveltejs/template svelte-app

Kemudian, navigasikan ke direktori proyek dan instal dependensi yang diperlukan:

cd svelte-app
npm install

Bekerja dengan onMount Hook

Itu diMount hook adalah kait siklus hidup yang penting di Svelte. Svelte memanggil hook onMount saat komponen pertama kali dirender dan dimasukkan ke dalam DOM. Hal ini mirip dengan komponenDidMount metode siklus hidup dalam komponen kelas React atau gunakanEffectkaitkan komponen fungsional React dengan array ketergantungan kosong.

Anda terutama akan menggunakan kait onMount untuk melakukan tugas inisialisasi, seperti mengambil data dari API atau menyiapkan pendengar acara. Kait onMount adalah fungsi yang mengambil satu argumen. Argumen ini adalah fungsi yang akan dipanggil oleh aplikasi saat pertama kali merender komponen.

Berikut adalah contoh bagaimana Anda dapat menggunakan hook 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>

Di dalam kamu aplikasi langsing proyek, buat a src/Test.svelte file dan tambahkan kode di atas ke dalamnya. Kode ini mengimpor kait onMount dari Svelte dan memanggilnya untuk menjalankan fungsi sederhana itu mencatat teks di konsol. Untuk menguji kait onMount, render Tes komponen di Anda src/App.svelte mengajukan:

Misalnya:

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

Kemudian jalankan aplikasinya:

npm run dev

Menjalankan perintah ini akan memberi Anda URL lokal seperti http://localhost: 8080. Kunjungi tautan di browser web untuk melihat aplikasi Anda. Aplikasi akan mencatat teks “Komponen telah ditambahkan ke DOM” di konsol browser Anda.

Bekerja dengan Kait onDestroy

Sebagai kebalikan dari diMount kait, Svelte memanggil di Hancurkan hook ketika hendak menghapus komponen dari DOM. Kait onDestroy berguna untuk membersihkan sumber daya atau pemroses peristiwa apa pun yang Anda siapkan selama siklus hidup komponen.

Kait ini mirip dengan React komponenWillUnmount metode siklus hidup dan itu gunakanEffect kait dengan fungsi pembersihan.

Berikut ini contoh cara menggunakan hook onDestroy:

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

Kode ini memulai pengatur waktu yang mencatat teks “interval” ke konsol browser Anda setiap detik. Ia menggunakan hook onDestroy untuk menghapus interval ketika komponen meninggalkan DOM. Hal ini mencegah interval untuk terus berjalan ketika komponen tidak lagi diperlukan.

Bekerja dengan Hooks beforeUpdate dan afterUpdate

Itu sebelum Pembaruan Dan setelah Pembaruan hooks adalah fungsi siklus hidup yang dijalankan sebelum dan sesudah DOM mengalami pembaruan. Kait ini berguna untuk melakukan tindakan berdasarkan perubahan status, seperti memperbarui UI atau memicu efek samping.

Hook beforeUpdate berjalan sebelum DOM diperbarui dan kapan pun status komponen berubah. Hal ini mirip dengan dapatkanSnapshotBeforeUpdate dalam komponen kelas React. Anda terutama menggunakan hook beforeUpdate saat membandingkan status baru aplikasi dengan status lamanya.

Di bawah ini adalah contoh cara menggunakan hook 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>

Ganti kode di Tes komponen dengan blok kode di atas. Kode ini menggunakan kait beforeUpdate untuk mencatat nilai menghitung nyatakan sebelum DOM diperbarui. Setiap kali Anda mengklik tombol, fungsi kenaikan berjalan dan meningkatkan nilai status hitungan sebesar 1. Hal ini menyebabkan fungsi beforeUpdate dijalankan dan mencatat nilai status penghitungan.

Kait afterUpdate berjalan setelah pembaruan DOM. Biasanya digunakan untuk menjalankan kode yang perlu dilakukan setelah pembaruan DOM. Kait ini mirip dengan komponenDidUpdate di Bereaksi. Kait afterUpdate berfungsi seperti kait beforeUpdate.

Misalnya:

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

Blok kode di atas mirip dengan yang sebelumnya, tetapi yang ini menggunakan hook afterUpdate untuk mencatat nilai status hitungan. Ini berarti ia akan mencatat status penghitungan setelah pembaruan DOM.

Bangun Aplikasi Kuat Menggunakan Lifecycle Hooks Svelte

Kait siklus hidup di Svelte adalah alat penting yang digunakan untuk membuat aplikasi dinamis dan responsif. Memahami kaitan siklus hidup adalah bagian berharga dari pemrograman Svelte. Dengan menggunakan kait ini, Anda dapat mengontrol inisialisasi, pembaruan, dan penghancuran komponen, serta menangani perubahan statusnya.