Lifecycle Hook trong Svelte: Mọi điều bạn cần biết

Svelte là một framework JavaScript hiện đại, cho phép bạn xây dựng các ứng dụng web hiệu quả. Một trong số những tính năng quan trọng của Svelte là lifecycle hook - cung cấp cho bạn quyền kiểm soát các giai đoạn khác nhau của một chu kỳ chạy thành phần nào đó.

Lifecycle hook là gì?

Lifcycle hook là các phương pháp kích hoạt một điểm cụ thể trong chu kỳ của một thành phần. Chúng cho phép bạn triển khai các tác vụ cụ theo từng thời điểm, như khởi tạo thành phần, phản hồi với những thay đổi hoặc dọn dẹp tài nguyên.

Những framework khác nhau có lifecycle hook khác nhau, nhưng chúng đều chia sẻ một số đặc điểm chung. Svelte cung cấp 4 lifecycle hook chính: onMount, onDestroy, beforeUpdate, và afterUpdate.

Thiết lập dự án Svelte

Để hiểu cách bạn có thể dùng lifecycle hook của Svelte, bắt đầu bằng cách tạo một dự án Svelte. Bạn có thể làm việc này theo nhiều cách, chẳng hạn như dùng Vite (một công cụ xây dựng front-end) hoặc degit.Degit là một công cụ dòng lệnh để tải và nhân bản repository git mà không cần tải toàn bộ lịch sử git.

Dùng Vite

Để tạo một dự án Svelte bằng Vite, chạy lệnh sau trong terminal:

npm init vite

Sau khi chạy lệnh này, bạn sẽ trả lời một số nhắc nhở cung cấp tên dự án, framework muốn dùng và biến cụ thể của framework đó.

Giờ, điều hướng tới thư mục của dự án và cài đặt các phần phụ thuộc cần thiết.

Chạy lệnh sau để làm việc này:

cd svelte-app
npm install

Dùng degit

Để thiết lập dự án Svelte bằng degit, chạy lệnh này trong terminal:

npx degit sveltejs/template svelte-app

Sau đó, điều hướng tới thư mục của dự án và cài đặt các phần phụ thuộc cần thiết:

cd svelte-app
npm install

Làm việc với onMount Hook

Hook onMount là một hook lifecycle quan trọng trong Svelte. Svelte gọi hook onMount khi một thành phần được kết xuất đầu tiên và được chèn vào DOM. Nó tương tự phương thức lifecycle componentDidMount trong các thành phần class React hoặc hook useEffect trong thành phần chức năng của React với một mảng phụ thuộc trống.

Bạn sẽ chủ yếu dùng hook onMount để thực hiện những nhiệm vụ khởi tạo, như tìm nạp dữ liệu từ API hoặc thiết lập trình nghe sự kiện. Hook onMount là hàm nhận đối số riêng lẻ. Đối số này là hàm mà ứng dụng sẽ gọi khi lần đầu tiên nó hiện thành phần.

Đây là ví dụ về cách bạn có thể dùng hook onMount:

<script>
import { onMount } from 'svelte'
onMount( () => { console.log('Component has been added to the DOM')} );
</script>

<div>
    <p>This is a random component</p>
</div>

Trong dự án svelte-app, tạo file src/Test.svelte và thêm code trên vào nó. Code này nhập hook onMount từ Svelte và gọi nó để chạy một hàm đơn giản, ghi lại nội dung trên console. Để kiểm tra hook onMount, hiện thành phần Test trong file src/App.svelte.

Ví dụ:

<script>
import Test from "./Test.svelte";
</script>

<main>
    <h1>Hello There!</h1>
    <Test />
</main>

Sau đó chạy ứng dụng:

npm run dev

Chạy lệnh này sẽ cho bạn một URL cục bộ như http://localhost:8080. Truy cập link trong trình duyệt web để xem ứng dụng. App này sẽ ghi lại dòng chữ “Component has been added to the DOM” trong console của trình duyệt.

Làm việc với hook onDestroy

Đối lập với hook onMount, Svelte gọi hook onDestroy khi nó loại bỏ một thành phần từ DOM. Hook onDestroy hữu ích trong việc dọn dẹp nguồn bất kỳ hoặc trình nghe sự kiện bạn thiết lập trong vòng đời của phần tử.

Hook này tương tự như phương thức lifecycle componentWillUnmount và hook useEffect của nó với một hàm dọn dẹp.

Ví dụ cách dùng hook onDestroy:

<script>
import { onDestroy } from "svelte";
let intervalId;

intervalId = setInterval(() => {
  console.log("interval");
}, 1000);

onDestroy(() => {
  clearInterval(intervalId);
});
</script>

Code trên khởi động đồng hồ bấm giờ ghi lại nội dung “interval” tới console của trình duyệt theo từng giây. Nó dùng hook onDestroy để xóa khoảng thời gian khi thành phần rời khỏi DOM. Điều này ngăn chặn ngắt quãng từ việc liên tục chạy khi thành phần đó không còn cần thiết.

Làm việc với hook beforeUpdate và afterUpdate

Hook beforeUpdate và afterUpdate là các hàm lifecycle chạy trước và sau khi cập nhật DOM. Những hook này hữu ích cho việc triển khai hành động dựa trên thay đổi trạng thái, như cập nhật UI hoặc kích hoạt hiệu ứng phụ.

Hook beforeUpdate chạy trước khi DOM update và bất kỳ lúc nào trạng thái của thành phần thay đổi. Nó tương tự như getSnapshotBeforeUpdate trong thành phần class React. Bạn chủ yếu dùng hook beforeUpdate khi so sánh trạng thái mới với trạng thái cũ của ứng dụng.

Dưới đây là ví dụ về cách dùng hook beforeUpdate:

<script>
import { beforeUpdate } from "svelte";

let count = 0;

beforeUpdate(() => {
  console.log("Count before update:", count);
});

function increment() {
  count += 1;
}
</script>

<button on:click={increment}>Count: {count}</button>

Thay thế code trong thành phần Test bằng khối code trên. Code này dùng hook beforeUpdate để ghi lại giá trị của trạng thái count trước khi DOM cập nhật. Mỗi lần bạn click nút bấm, hàm gia số chạy và tăng 1 giá trị của trạng thái đếm. Điều này khiến hàm beforeUpdate chạy và ghi giá trị của trạng thái đếm.

Hook afterUpdate chạy sau khi cập nhật DOM. Nó thường được dùng để chạy code cần thiết sau khi update DOM. Hook này tương tự như componentDidUpdate trong React. Hook afterUpdate hoạt động giống như hook beforeUpdate.

Ví dụ:

<script>
import { afterUpdate } from "svelte";

let count = 0;

afterUpdate(() => {
  console.log("Count after update:", count);
});

function increment() {
  count += 1;
}
</script>

<button on:click={increment}>Count: {count}</button>

Khối code trên tương tự như khối code trước, nhưng nó dùng hook afterUpdate để ghi giá trị của trạng thái đếm. Điều này có nghĩa nó sẽ ghi lại trạng thái đếm sau khi update DOM.

Lifecycle hook trong Svelte là công cụ cần thiết được dùng để tạo các ứng dụng đáp ứng và linh động. Hiểu hook lifecycle là một phần giá trị của lập trình Svelte. Dùng những hook này, bạn có thể kiểm soát việc khởi tạo, cập nhật và hủy các thành phần của mình cũng như xử lý các thay đổi trạng thái của chúng.