Angular Signals và Effects
Angular đã thay đổi cách xử lý tính phản ứng (reactivity). Bạn không còn cần Zone.js để phát hiện mọi thay đổi nhỏ nữa. Signals cho phép Angular chỉ cập nhật những phần cụ thể của UI khi có thay đổi. Điều này giúp ứng dụng của bạn nhanh hơn và cho phép chế độ zoneless.
Signals là gì?
Một signal là một vật chứa (container) cho một giá trị có tính phản ứng. Khi giá trị thay đổi, Angular biết chính xác những phần nào của template cần được cập nhật.
signal(): Tạo một signal mới. Sử dụng.set()để thay thế một giá trị hoặc.update()để thay đổi giá trị dựa trên giá trị hiện tại.computed(): Tạo một signal chỉ đọc (read-only). Nó lấy giá trị từ các signal khác. Angular chỉ tính toán giá trị này khi bạn đọc nó và sẽ lưu kết quả vào bộ nhớ đệm (cache).effect(): Chạy mã khi một signal thay đổi. Sử dụng cái này cho các tác vụ phụ (side effects) như ghi log hoặc thay đổi DOM thủ công.
Khi nào nên dùng Signals so với RxJS
Bạn không cần phải chọn một trong hai. Bạn nên sử dụng cả hai cho các tác vụ khác nhau.
Sử dụng Signals để:
- Lưu trữ trạng thái UI.
- Điều khiển việc render template.
- Thay thế
@Input()và@Output(). - Làm việc trong các ứng dụng zoneless.
Sử dụng RxJS để:
- Xử lý các luồng bất đồng bộ (async streams) như HTTP hoặc WebSockets.
- Các logic phức tạp như debouncing hoặc chuyển đổi luồng (switching streams).
- Kết hợp nhiều chuỗi sự kiện.
Bạn có thể kết nối chúng bằng cách sử dụng rxjs-interop:
toSignal(): Chuyển đổi một Observable thành một Signal.toObservable(): Chuyển đổi một Signal thành một Observable.
Các API mới không dùng Decorator
Angular 17+ đã giới thiệu những cách mới để xử lý luồng dữ liệu mà không cần sử dụng decorator.
input(): Một signal chỉ đọc cho dữ liệu truyền từ component cha.model(): Một signal có thể ghi (writable) để liên kết hai chiều (two-way binding). Nó thay thế mô hình@Input()và@Output()cũ.output(): Một cách để phát (emit) các sự kiện từ component con lên component cha. Nó không phải là một signal, nhưng nó giúp đơn giản hóa mã nguồn của bạn.
Tại sao điều này tốt hơn React
Nếu bạn biết React, các khái niệm sẽ tương tự nhưng cách thực thi thì khác nhau.
- Theo dõi tự động: Trong React, bạn phải liệt kê các phụ thuộc (dependencies) trong một mảng. Trong Angular, hệ thống tự động theo dõi các signal mà bạn sử dụng. Bạn sẽ không thể quên một dependency nào đó.
- Cập nhật chính xác: React thường render lại toàn bộ component. Angular signals chỉ cập nhật các nút DOM cụ thể phụ thuộc vào giá trị đó.
- Không có Stale Closures: Signals luôn cung cấp giá trị hiện tại khi bạn gọi chúng.
Nguồn: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn