Tối Ưu Hóa Angular Signals với Kiểm Tra Bình Đẳng Thông Minh

Signals là một công cụ mạnh mẽ trong Angular để xử lý tính phản ứng, nhưng nếu không được quản lý cẩn thận, chúng có thể gây ra các bản cập nhật không cần thiết, yêu cầu lãng phí và các vấn đề về hiệu suất. Trong bài viết này, chúng ta sẽ khám phá cách Signals phát ra các bản cập nhật, tại sao kiểm tra bình đẳng (equal) là quan trọng và cách triển khai các chiến lược so sánh sâu hiệu quả để giữ cho ứng dụng của bạn mượt mà và đáng tin cậy.

Mục Lục

1. Cách Signals Phát Ra Bản Cập Nhật
2. Ngăn Chặn Các Bản Cập Nhật Không Cần Thiết với equal
3. Tài Nguyên Angular và Các Bản Cập Nhật Khó Chịu Từ Nguồn
4. Hiệu Suất của equal với Các Đối Tượng Lồng Ghép Sâu
5. Cách Tạo So Sánh Sâu Nhanh Nhất trong JavaScript
6. @traversable: Giải Pháp Đơn Giản cho Bình Đẳng Sâu với Các Bộ Xác Thực Sơ Đồ
7. Thực Hành Tốt và Cảnh Báo
8. Câu Hỏi Thường Gặp

Cách Signals Phát Ra Bản Cập Nhật

Mỗi khi tham chiếu thay đổi, Signal được coi là “bẩn”, và tất cả các Signal dẫn xuất, DOM, và các hàm effect cũng sẽ được cập nhật. Điều này có thể dẫn đến việc cập nhật không cần thiết nếu không được quản lý đúng cách.

Ví dụ Thực Tế

const mySignal = signal({ id: 1 });
mySignal.set({ id: 2 }); // Signal sẽ phát ra bản cập nhật.

Ngăn Chặn Các Bản Cập Nhật Không Cần Thiết với equal

Để tránh các bản cập nhật không cần thiết trong pipeline của Signal, bạn có thể sử dụng tùy chọn equal để định nghĩa logic so sánh một cách thủ công. Điều này có vẻ đơn giản với các đối tượng nông, nhưng với các đối tượng sâu, công việc trở nên nặng nề và khó duy trì hơn.

Ví dụ Về Sử Dụng equal

const mySignal = signal({ id: 1 }, { equal: (a, b) => a.id === b.id });

Tài Nguyên Angular và Các Bản Cập Nhật Khó Chịu Từ Nguồn

Vấn đề tương tự cũng xảy ra với Angular Resource. Bạn có thể sử dụng một Signal làm nguồn cho tùy chọn params. Điều này kích hoạt một cuộc gọi bất đồng bộ mỗi khi Signal phát ra một giá trị mới. Tuy nhiên, mỗi cuộc gọi mới hủy bỏ cuộc gọi trước đó (tương tự như switchMap trong RxJS).

Điều này không chỉ gây ra các yêu cầu không cần thiết mà còn loại bỏ giá trị trước đó khỏi Resource, có thể dẫn đến các tác dụng phụ kỳ lạ như rendering trang không ổn định.

Tình Huống Thực Tế

const resourceData = resource({ params: mySignal });

Hiệu Suất của equal với Các Đối Tượng Lồng Ghép Sâu

Để ngăn chặn các bản cập nhật không cần thiết, bạn có thể thêm các kiểm tra bình đẳng thủ công trước khi gọi mySignal.set(...) hoặc mySignal.update(...). Nhưng điều này rất dễ bị quên. Đó là lý do tại sao tôi thích sử dụng tùy chọn equal.

Ví dụ Kiểm Tra Bình Đẳng Thủ Công

if (previousValue.id !== newValue.id) {
  mySignal.set(newValue);
}

Cách Tạo So Sánh Sâu Nhanh Nhất trong JavaScript

Andrew Jarrett đã khám phá ra giải pháp JavaScript nhanh nhất cho so sánh sâu, có thể hữu ích cho bạn. Dưới đây là đoạn mã mẫu:

const addressEquals = Function(
  "x",
  "y",
  `
  if (x === y) return true;
  if (x.street1 !== y.street1) return false;
  if (x.street2 !== y.street2) return false;
  if (x.city !== y.city) return false;
  return true;
`
);

Cảnh Báo

Phương pháp này nhanh nhưng không an toàn về kiểu. Nếu hình dạng của đối tượng của bạn thay đổi, bạn có thể quên cập nhật chuỗi so sánh.

@traversable: Giải Pháp Đơn Giản cho Bình Đẳng Sâu với Các Bộ Xác Thực Sơ Đồ

Andrew Jarrett cũng đã tạo ra một thư viện giúp việc bình đẳng sâu trở nên đơn giản khi làm việc với các bộ xác thực sơ đồ. Sử dụng zod làm ví dụ:

import { z } from "zod";
import { zx } from "@traversable/zod";

const Address = z.object({
  street1: z.string(),
  street2: z.optional(z.string()),
  city: z.string(),
});

const addressEquals = zx.deepEqual(Address);

addressEquals(
  { street1: "221B Baker St", city: "London" },
  { street1: "221B Baker St", city: "London" }
); // => true

Khi sử dụng với một Signal:

const addressSignal = signal(..., { equal: addressEquals });
const streetViewFromAddressResource = resource({ params: addressSignal, ... });

Hiệu Quả

Bây giờ, streetViewFromAddressResource chỉ được gọi khi địa chỉ thực sự thay đổi. Giải pháp này hoạt động với nhiều thư viện sơ đồ khác nhau như:

• Zod
• JSON Schema
• ArkType
• TypeBox
• Valibot

Đây là một giải pháp sạch sẽ, phát triển cùng với sơ đồ của bạn mà không cần cập nhật thủ công.

Lưu ý: Hãy cẩn thận rằng nếu đối tượng/sơ đồ của bạn chứa các hàm hoặc ngày tháng, cách chúng được xử lý có thể không chắc chắn.

Thực Hành Tốt và Cảnh Báo

• Thực Hành Tốt: Luôn sử dụng tùy chọn equal cho các Signal mà bạn biết có thể có sự thay đổi sâu.
• Cảnh Báo: Kiểm tra bình đẳng thủ công có thể dễ bị quên, hãy xây dựng các hàm kiểm tra bình đẳng rõ ràng và dễ duy trì.

Câu Hỏi Thường Gặp

1. Tại sao lại cần sử dụng kiểm tra bình đẳng cho Signals?

Kiểm tra bình đẳng giúp ngăn chặn các cập nhật không cần thiết, tiết kiệm tài nguyên và cải thiện hiệu suất.

2. Có cách nào đơn giản hơn để kiểm tra bình đẳng không?

Sử dụng thư viện như @traversable kết hợp với các bộ xác thực như zod để đơn giản hóa quá trình này.

👉 Nếu bạn thấy bài viết này hữu ích, đừng ngần ngại để lại một 👍 hoặc chia sẻ ý kiến của bạn trong phần bình luận — tôi rất muốn nghe phản hồi của bạn!

Nếu bạn chưa biết tôi, tôi là Romain Geffrault, và tôi thường xuyên chia sẻ nội dung liên quan đến Angular/TypeScript/RxJs/Signal. Hãy xem các bài viết khác của tôi và theo dõi tôi trên LinkedIn.