Tín hiệu và Vòng lặp sự kiện JS: Tái định nghĩa đồng bộ phản ứng Angular

Giới thiệu

Trong phát triển ứng dụng Angular, công nghệ phản ứng đã trở thành một phần thiết yếu trong việc quản lý trạng thái và cập nhật giao diện người dùng. Bài viết này sẽ khám phá khái niệm về tín hiệu (Signals) và cách mà vòng lặp sự kiện (Event Loop) ảnh hưởng đến hiệu suất của ứng dụng Angular, từ đó tối ưu hóa việc xử lý thay đổi trạng thái.

Định nghĩa tín hiệu

Tín hiệu là các thực thể phản ứng đồng bộ có khả năng chứa một giá trị duy nhất không thể thay đổi. Điều này có nghĩa là khi bạn tạo một tín hiệu bằng cách sử dụng signal(initialValue), bạn không thay thế tín hiệu đó mà chỉ cập nhật trạng thái nội bộ của nó thông qua các phương thức như set() hoặc update().

Tín hiệu và tính bất biến

• Tín hiệu là bất biến: Điều này có nghĩa là tham chiếu đến tín hiệu không thay đổi và nó bao gồm hành vi phản ứng và các phụ thuộc của nó.
• Tính bất biến với tín hiệu có nghĩa rằng, nếu giá trị của tín hiệu là một đối tượng tham chiếu (ví dụ: một đối tượng hoặc mảng), bạn vẫn có thể thay đổi tham chiếu đó mà không cần gọi set() hoặc update(). Điều này có thể dẫn đến việc giá trị tuyệt đối của tín hiệu thay đổi mà không thông báo cho tất cả người tiêu dùng của tín hiệu.

Tín hiệu và sự biến đổi bất biến

🚨 Tín hiệu là các container bất biến, nhưng nếu giá trị mà chúng giữ là một tham chiếu (như một đối tượng hoặc mảng), thì tham chiếu đó có thể bị biến đổi trực tiếp, điều này sẽ bỏ qua hệ thống phản ứng của Angular.

const user = signal({ name: 'Alice', age: 30 });

user().name = 'Bob';  // KHÔNG TỐT 

user.set({ ...user(), name: 'Bob' }); // TỐT

Cơ chế phát hiện thay đổi của Angular và tín hiệu

Angular đang chuyển sang phản ứng tinh vi hơn. Nhờ vào cơ chế phát hiện thay đổi mặc định, Angular không thể biết chính xác điều gì đã thay đổi trên trang. Điều này khiến chúng ta không thể đưa ra bất kỳ "giả định" nào về những gì đã xảy ra và chúng ta cần kiểm tra mọi thứ.

Tín hiệu và hiệu suất

Tín hiệu cho phép cập nhật rất tinh vi đến DOM mà không thể thực hiện với hệ thống phát hiện thay đổi hiện tại. Khi một tín hiệu thay đổi, Angular không cần chạy phát hiện thay đổi toàn cục. Thay vào đó, nó chỉ cập nhật các thành phần (hoặc giá trị tính toán) phụ thuộc trực tiếp vào tín hiệu đó.

Vòng lặp sự kiện và tín hiệu

Vòng lặp sự kiện là rất quan trọng cho khả năng phản ứng và hiệu suất của Angular. Hệ thống Zone.js giúp Angular theo dõi các tác vụ bất đồng bộ và đảm bảo rằng mọi thay đổi trạng thái đều được xử lý đúng cách.

Tín hiệu làm thay đổi câu chuyện

Tín hiệu giúp phá vỡ sự phụ thuộc chính vào vòng lặp sự kiện + Zone.js. Thay vì chờ đợi bất kỳ microtask nào hoàn thành, một tín hiệu biết chính xác những phần trạng thái nào đang được “theo dõi” bởi những người tiêu dùng nào.

Điều này giúp tránh việc phải đi qua toàn bộ cây thành phần mỗi khi vòng lặp sự kiện hoàn thành.

Các loại tín hiệu trong Angular

Angular có 4 loại tín hiệu chính, mỗi loại có cách tương tác và hành vi riêng với cơ chế phát hiện thay đổi:

Lưu ý quan trọng

• WritableSignal: Container trạng thái có thể thay đổi. Kích hoạt phát hiện thay đổi khi .set(), .update(), hoặc .mutate() được gọi.
• Readonly Signal: Cung cấp trạng thái mà không cho phép biến đổi. Không kích hoạt phát hiện thay đổi.
• ComputedSignal: Được tạo ra từ các tín hiệu khác và không có tác dụng phụ. Không kích hoạt phát hiện thay đổi trực tiếp.
• LinkedSignal: Tín hiệu lai — có thể tương tác với các tín hiệu khác và có thể được ghi.

Khi nào sử dụng loại nào?

• signal(): Khi bạn cần một biến phản ứng mà có thể thay đổi thường xuyên, chẳng hạn như trạng thái cục bộ của thành phần.
• signal.asReadonly(): Khi bạn muốn cung cấp trạng thái mà không cho phép biến đổi.
• computed(): Khi bạn cần các giá trị được tính toán từ các tín hiệu khác mà không có tác dụng phụ.
• LinkedSignal(): Khi bạn cần một tín hiệu có thể thay đổi nguồn phụ thuộc tại thời điểm chạy.

Thực hành tốt nhất

• Luôn sử dụng set(), update(), hoặc mutate() để cập nhật trạng thái của tín hiệu để đảm bảo rằng Angular có thể theo dõi thay đổi.
• Tránh thay đổi trực tiếp các giá trị trong tín hiệu nếu không muốn bỏ qua phát hiện thay đổi.

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

• Thay đổi giá trị trực tiếp: Điều này có thể dẫn đến việc trạng thái không được cập nhật đúng cách trong giao diện người dùng.
• Quá tải phát hiện thay đổi: Tránh việc kích hoạt phát hiện thay đổi không cần thiết bằng cách sử dụng tín hiệu một cách hợp lý.

Mẹo tối ưu hóa hiệu suất

• Sử dụng tín hiệu đúng cách để giảm thiểu số lần phát hiện thay đổi toàn cục.
• Tận dụng các tín hiệu tính toán để giảm tải cho ứng dụng khi cần tính toán dựa trên các trạng thái khác.

Kết luận

Tín hiệu và vòng lặp sự kiện là hai khái niệm quan trọng trong Angular giúp tối ưu hóa hiệu suất và cải thiện khả năng quản lý trạng thái của ứng dụng. Hiểu rõ về chúng sẽ giúp các nhà phát triển tạo ra các ứng dụng phản ứng mạnh mẽ và hiệu quả hơn. Hãy bắt đầu áp dụng tín hiệu trong dự án Angular của bạn ngay hôm nay!

Câu hỏi thường gặp

1. Tín hiệu là gì?
   Tín hiệu là các thực thể phản ứng đồng bộ chứa một giá trị duy nhất không thể thay đổi.
2. Tại sao tính bất biến lại quan trọng?
   Tính bất biến giúp đảm bảo rằng các thay đổi trạng thái được theo dõi và quản lý một cách hiệu quả.
3. Có bao nhiêu loại tín hiệu trong Angular?
   Có 4 loại tín hiệu: WritableSignal, Readonly Signal, ComputedSignal, và LinkedSignal.

Liên kết tài nguyên

• Tài liệu Angular về tín hiệu
• Hướng dẫn về Zone.js

Hãy bắt đầu khám phá những khả năng mới mà tín hiệu mang lại cho Angular và nâng cao kỹ năng phát triển của bạn!