Giới thiệu

Một trong những lý do lớn nhất mà các nhà phát triển yêu thích Svelte chính là mô hình phản ứng của nó. Khác với các framework như React (khi bạn phải gọi setState hoặc sử dụng hooks), trong Svelte, bạn chỉ cần gán giá trị cho một biến, và UI sẽ tự động cập nhật. Không cần nghi thức phức tạp. Không cần boilerplate. Chỉ là phép thuật. ✨

Bài viết này sẽ giúp bạn hiểu:

• Cách Svelte theo dõi trạng thái phản ứng.
• Các khai báo phản ứng là gì.
• Cách hoạt động của việc cập nhật tự động (và khi nào thì không).
• Những điều cần lưu ý mà bạn nên chú ý.

Mục lục

1. Bước 1: Biến phản ứng đầu tiên
2. Bước 2: Phản ứng suy diễn
3. Bước 3: Nhiều giá trị suy diễn
4. Bước 4: Mảng và tính phản ứng
5. Bước 5: Tính phản ứng với đối tượng
6. Bước 6: Tính phản ứng chuỗi
7. Bước 7: Khối phản ứng
8. Bước 8: Giá trị suy diễn (Giá trị tính toán)
9. Bước 9: Tính phản ứng bất đồng bộ
10. Bước 10: Các vấn đề thường gặp
11. Bước 11: Tóm tắt thực hành: Phiên bản giỏ hàng

Bước 1: Biến phản ứng đầu tiên

Lần trước (trong bài viết trước), chúng ta đã xây dựng một bộ đếm và nó “chỉ hoạt động”. Nhưng tại sao? Tại sao Svelte biết cách để cập nhật UI khi bạn tăng một biến?

Đó là cốt lõi của mô hình phản ứng trong Svelte — và để thực sự hiểu, chúng ta sẽ đi sâu vào ví dụ nhỏ này và phân tích từng phần.

Khai báo trạng thái phản ứng

let count = $state(0);

Nhìn thoáng qua, điều này có vẻ như một khai báo biến thông thường. Nhưng wrapper $state là cách để bạn nói với Svelte:

“Này, trình biên dịch — hãy theo dõi giá trị này. Bất cứ khi nào nó thay đổi, hãy đảm bảo rằng UI được cập nhật.”

Nếu không có $state, count chỉ là một biến cục bộ trong script của bạn. Với $state, nó trở thành trạng thái phản ứng, gắn trực tiếp với markup của bạn.

👉 Mẹo chuyên nghiệp: Nếu bạn là một nhà phát triển JavaScript, bạn có thể tiếp tục với biến let count = 0;. Hiện tại, tất cả các biến đều được theo dõi. Nhưng Svelte đang khuyến khích chúng ta hướng tới $state để làm cho các biến phản ứng trở nên rõ ràng, và sự linh hoạt đó có thể không còn trong tương lai. Đáng để làm quen với $state ngay bây giờ.

Tham chiếu trong markup

<h1>Count: {count}</h1>

Đây là nơi phép thuật bắt đầu. Dấu ngoặc nhọn ({}) cho Svelte biết:

“Chèn giá trị hiện tại của count vào đây. Và nếu nó thay đổi, hãy cập nhật phần này của DOM.”

Phía sau, trình biên dịch không chỉ “in số một lần”. Nó tạo ra mã mà khi count cập nhật, văn bản sẽ được gán lại. Điều đó có nghĩa là <h1> của bạn luôn đồng bộ mà không cần bạn phải làm gì.

Cập nhật trạng thái

count++;

Đây là phần gây sốc: bạn không gọi setCount, hay this.setState, hay dispatch. Bạn chỉ cần tăng một biến như bạn làm trong JavaScript thuần túy.

Nhưng vì nó là một biến $state, mã biên dịch của Svelte biết để re-render bất cứ thứ gì phụ thuộc vào nó. Đó chính là tính phản ứng đang hoạt động.

Tại sao cảm thấy khác biệt

Nếu bạn đã sử dụng React, Vue, hoặc Angular, có thể bạn đang nháy mắt vào màn hình của mình ngay bây giờ. “Chờ đã, chỉ vậy thôi?”

Vâng, chỉ vậy thôi. Không cần gọi hàm đặc biệt. Không cần useState. Không cần mảng phụ thuộc. Không có “thuật toán so sánh” kỳ diệu nào chạy tại thời gian chạy.

Svelte xử lý mọi thứ trước trong quá trình biên dịch. Đó là lý do tại sao bạn có thể viết mã cảm giác như JavaScript thuần túy nhưng hoạt động như một framework UI phản ứng. Ngay cả $state cũng là tùy chọn hôm nay — cho đến khi nó không còn.

Bước 2: Phản ứng suy diễn

Cho đến nay, tính phản ứng đã liên quan đến: “UI phản ứng khi một biến thay đổi.”
Nhưng nếu một biến khác phụ thuộc vào biến đó thì sao?

Đó là nơi mà phản ứng suy diễn xuất hiện.

let doubled = $derived(count * 2);

Khi bạn nhấp vào nút, cả <h1> và <h2> sẽ cập nhật ngay lập tức. Không cần hooks, không cần mảng phụ thuộc, không cần useMemo. Chỉ cần khai báo mối quan hệ, và Svelte sẽ lo liệu phần còn lại.

Bước 3: Nhiều giá trị suy diễn

Đôi khi bạn không chỉ muốn theo dõi trạng thái — bạn muốn tính toán giá trị mới từ nó. Ví dụ, với một count, bạn có thể muốn hiển thị cả giá trị gấp đôi và bình phương của nó.

Đó là nơi $derived xuất hiện.

let squared = $derived(count * count);

Tính phản ứng với mảng

Nơi mà nhiều người mới bắt đầu gặp phải những khoảnh khắc “Chờ đã, tại sao không cập nhật?”

Khi bạn thực hiện:

numbers.push(4);

Mảng bị thay đổi tại chỗ. Biến numbers vẫn giữ nguyên. Svelte chỉ theo dõi các gán lại như:

numbers = [...numbers, 4];

Cách khắc phục: Gán lại mảng

Thay vì thay đổi, bạn cần cung cấp cho numbers một giá trị hoàn toàn mới:

function addNumber() {
  numbers = [...numbers, numbers.length + 1];
}

Cách tốt hơn: Sử dụng $state

Dĩ nhiên, việc liên tục sao chép mảng cảm thấy không tự nhiên. Đây là lúc $state phát huy tác dụng:

let numbers = $state([1, 2, 3]);

Tính phản ứng với đối tượng

Đối tượng không phải là cấu trúc dữ liệu duy nhất bạn cần trong ứng dụng của mình. Hãy xem xét ví dụ cơ bản:

let user = $state({ name: "Alice", age: 30 });

Tính phản ứng chuỗi

Trước đây, chúng ta đã thấy cách bạn có thể phân nhánh từ một phần trạng thái thành nhiều giá trị suy diễn. Đó là phân nhánh song song — nhiều giá trị phụ thuộc trực tiếp vào cùng một nguồn.

Khối phản ứng

Cho đến nay, mã phản ứng của chúng ta chủ yếu liên quan đến các gán lại: “giá trị này phụ thuộc vào giá trị kia.” Nhưng đôi khi bạn muốn chạy một khối mã mỗi khi một số biến nhất định thay đổi. Đó là lúc $effect xuất hiện.

Giá trị suy diễn (Giá trị tính toán)

Vì vậy, cho đến nay, chúng ta đã xử lý các trạng thái đơn giản — các biến mà bạn cập nhật trực tiếp. Nhưng những giá trị luôn nên được tính toán từ các giá trị khác thì sao?

Tính phản ứng bất đồng bộ

Cho đến nay, các ví dụ về tính phản ứng của chúng ta đều là ngay lập tức: thay đổi một số, thấy DOM được cập nhật ngay lập tức. Nhưng các ứng dụng thực tế thường xử lý dữ liệu mà mất thời gian để đến — có thể từ một máy chủ hoặc API.

Các vấn đề thường gặp

Đến bây giờ, bạn đã thấy tính phản ứng mượt mà như thế nào trong Svelte. Nhưng mỗi trò ảo thuật đều có một vài “dây ẩn” — những chi tiết nhỏ có thể khiến bạn gặp khó khăn nếu bạn không biết chúng ở đó. Hãy cùng khám phá những sai lầm phổ biến mà người mới thường gặp phải (và cách để tránh chúng).

Tóm tắt thực hành: Phiên bản giỏ hàng

Chúng ta đã thấy $state, $derived, $effect, và điều kiện hiển thị một cách riêng lẻ. Bây giờ hãy kết hợp chúng thành một ứng dụng giỏ hàng mini.

Bài viết này đã hoàn thành hành trình tìm hiểu về hệ thống tính phản ứng trong Svelte — trái tim của cách các ứng dụng giữ đồng bộ với dữ liệu của bạn. Từ bộ đếm $state khiêm tốn, cho đến mảng, công thức suy diễn, fetch bất đồng bộ, và thậm chí là một ứng dụng giỏ hàng mini, bạn đã thấy bạn có thể đi xa như thế nào chỉ với các gán đơn giản và ý định rõ ràng.

Kết luận

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về tính phản ứng trong Svelte và cách nó giúp bạn xây dựng ứng dụng hiệu quả hơn. Nếu bạn thấy bài viết hữu ích, hãy chia sẻ với đồng nghiệp và bắt tay vào thực hành nhé!