Svelte, 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ả. Trong loạt bài viết này, chúng ta sẽ khám phá một tính năng quan trọng của Svelte gọi là lifecycle hook. Đây là một công cụ mạnh mẽ, giúp bạ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ì?
Lifecycle 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.
Các 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ể sử dụng lifecycle hook của Svelte, hãy bắt đầu bằng cách tạo một dự án Svelte. Có nhiều cách để làm điều này, ví dụ như sử 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 cho phép bạn tải và nhân bản repository git mà không cần tải toàn bộ lịch sử git.
Sử dụng Vite
Để tạo một dự án Svelte bằng Vite, hãy chạy lệnh sau trong terminal:
npm init viteSau khi chạy lệnh này, bạn sẽ được hỏi một số thông tin như tên dự án, framework bạn muốn sử dụng, và các biến cụ thể của framework đó.
Tiếp theo, hãy điều hướng đến thư mục của dự án và cài đặt các phụ thuộc cần thiết. Chạy lệnh sau để làm việc này:
cd svelte-app
npm installSử dụng degit
Để thiết lập dự án Svelte bằng degit, hãy chạy lệnh sau trong terminal:
npx degit sveltejs/template svelte-appSau đó, hãy điều hướng đến thư mục của dự án và cài đặt các phụ thuộc cần thiết:
cd svelte-app
npm installLàm việc với hook onMount
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 các thành phần chức năng React với một mảng phụ thuộc trống.
Bạn sẽ chủ yếu sử dụng hook onMount để thực hiện các nhiệm vụ khởi tạo, như tải dữ liệu từ API hoặc thiết lập lắng nghe sự kiện. Hook onMount là một 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 hiển thị thành phần.
Dưới đây là một ví dụ về cách bạn có thể sử 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, hãy tạo một file src/Test.svelte và thêm đoạn mã trên vào nó. Đoạn mã 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ị 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 đó, hãy chạy ứng dụng:
npm run devChạy lệnh này sẽ cung cấp cho bạn một URL cục bộ như http://localhost:8080. Hãy truy cập vào liên kết đó trong trình duyệt để xem ứng dụng. Ứng dụng 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 tài nguyên hoặc loại bỏ các trình lắng nghe sự kiện bạn đã thiết lập trong vòng đời của thành phần.
Hook này tương tự như phương thức lifecycle componentWillUnmount và hook useEffect của React với một hàm dọn dẹp.
Dưới đây là ví dụ về cách sử dụng hook onDestroy:
<script>
import { onDestroy } from "svelte";
let intervalId;
intervalId = setInterval(() => {
console.log("interval");
}, 1000);
onDestroy(() => {
clearInterval(intervalId);
});
</script>Đoạn mã trên khởi động một đồng hồ bấm giờ ghi lại nội dung “interval” vào console của trình duyệt mỗi giây. Nó sử 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 khoảng thời gian tiếp tục chạy khi thành phần không còn được sử dụng.
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 để triển khai các hành động dựa trên thay đổi trạng thái, như cập nhật giao diện người dùng hoặc kích hoạt hiệu ứng phụ.
Hook beforeUpdate chạy trước khi DOM được cập nhật 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 sử 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à một ví dụ về cách sử 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>Hãy thay thế đoạn mã trong thành phần Test bằng đoạn mã trên. Đoạn mã này sử dụng hook beforeUpdate để ghi lại giá trị của trạng thái count trước khi DOM được cập nhật. Mỗi khi bạn nhấp vào nút, hàm tăng số chạy và tăng giá trị của trạng thái đếm. Điều này khiến hook beforeUpdate chạy và ghi lại giá trị của trạng thái đếm.
Hook afterUpdate chạy sau khi DOM được cập nhật. Nó thường được sử dụng để chạy mã cần thiết sau khi cập nhật DOM. Hook này tương tự như componentDidUpdate trong React. Hook afterUpdate hoạt động tương tự 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>Đoạn mã trên tương tự như đoạn mã trước, nhưng nó sử dụng hook afterUpdate để ghi lại giá trị của trạng thái đếm. Điều này có nghĩa là nó sẽ ghi lại trạng thái đếm sau khi DOM được cập nhật.
Lifecycle hook trong Svelte là một công cụ quan trọng để tạo ra các ứng dụng linh hoạt và đáp ứng. Hiểu rõ về lifecycle hook là một phần quan trọng của việc lập trình Svelte. Bằng cách sử 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à huỷ 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.
