🔍 Nâng Cao Hiệu Suất Thay Đổi Dữ Liệu Trong Angular

Khi xây dựng các ứng dụng Angular mở rộng, việc thay đổi dữ liệu đóng vai trò quan trọng trong việc duy trì hiệu suất. Mặc định, cơ chế thay đổi dữ liệu mạnh mẽ của Angular đảm bảo rằng ứng dụng của bạn luôn đồng bộ với mô hình và giao diện. Tuy nhiên, nếu không được quản lý hiệu quả, nó có thể gây ra tải không cần thiết và làm chậm các ứng dụng lớn.

Trong bài viết này, chúng ta sẽ khám phá:

• Cách thức hoạt động của việc thay đổi dữ liệu trong Angular
• Các chiến lược khác nhau có sẵn
• Các thực tiễn tốt nhất để tối ưu hóa hiệu suất
• Các ví dụ thực tế

🚀 Thay Đổi Dữ Liệu Là Gì Trong Angular?

Thay đổi dữ liệu là quá trình mà Angular cập nhật DOM (Document Object Model) mỗi khi trạng thái của ứng dụng thay đổi.

Theo mặc định, Angular sử dụng thư viện zone.js để patch các hoạt động bất đồng bộ (như setTimeout, Promise hoặc sự kiện). Mỗi khi các sự kiện này được kích hoạt, Angular sẽ tái render các thành phần bằng cách chạy chu trình thay đổi dữ liệu.

Mặc dù điều này đảm bảo tính nhất quán, nhưng nó có thể trở nên tốn kém cho các ứng dụng lớn nếu mỗi thành phần được kiểm tra không cần thiết.

⚙️ Các Chiến Lược Thay Đổi Dữ Liệu

Angular cung cấp hai chiến lược chính để kiểm soát việc thay đổi dữ liệu:

1. Chiến Lược Mặc Định

Mỗi khi một sự kiện, cuộc gọi bất đồng bộ, hoặc tương tác của người dùng xảy ra, Angular kiểm tra toàn bộ cây thành phần.

• Phù hợp cho các ứng dụng nhỏ đến trung bình.
• Có thể dẫn đến các nút thắt cổ chai về hiệu suất trong các ứng dụng lớn.

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  changeDetection: ChangeDetectionStrategy.Default
})
export class UserComponent {
  @Input() user!: User;
}

2. Chiến Lược OnPush

Angular sẽ bỏ qua việc kiểm tra một thành phần trừ khi:

• Một thuộc tính @Input() thay đổi tham chiếu
• Một sự kiện phát sinh từ bên trong thành phần
• Bạn kích hoạt thay đổi dữ liệu một cách thủ công

Điều này giúp giảm thiểu các kiểm tra không cần thiết và cải thiện hiệu suất.

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {
  @Input() user!: User;
}

Mẹo: Khi sử dụng OnPush, hãy luôn truyền các đối tượng không thay đổi hoặc sử dụng các thư viện như Immer cho các cập nhật trạng thái.

🛠️ Công Cụ Quản Lý Thay Đổi Dữ Liệu

1. ChangeDetectorRef

Quản lý thay đổi dữ liệu một cách thủ công khi cần thiết.

• detach() → Dừng Angular khỏi việc chạy thay đổi dữ liệu.
• detectChanges() → Kích hoạt kiểm tra một cách thủ công.

import { ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'app-profile',
  template: ` <div>{{ counter }}</div> `
})
export class ProfileComponent {
  counter = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  increment() {
    this.counter++;
    this.cdr.detectChanges(); // Kích hoạt một cách thủ công
  }
}

2. Tối Ưu NgZone

Angular chạy thay đổi dữ liệu cho tất cả các tác vụ bất đồng bộ. Bạn có thể tối ưu hóa bằng cách chạy các tác vụ nặng bên ngoài vùng của Angular.

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-heavy',
  template: `<p>Tác vụ nặng đã hoàn thành!</p>`
})
export class HeavyComponent {
  constructor(private zone: NgZone) {
    this.zone.runOutsideAngular(() => {
      this.doHeavyTask();
      this.zone.run(() => console.log('Quay lại vùng Angular'));
    });
  }

  doHeavyTask() {
    for (let i = 0; i < 1e9; i++) {} // Vòng lặp nặng
  }
}

3. AsyncPipe

Thay vì đăng ký thủ công, hãy sử dụng AsyncPipe trong các template. Nó tự động xử lý đăng ký + thay đổi dữ liệu.

<div *ngIf="user$ | async as user">
  <h2>{{ user.name }}</h2>
</div>

Điều này tránh rò rỉ bộ nhớ và kích hoạt thay đổi dữ liệu không cần thiết.

✅ Các Thực Tiễn Tốt Nhất Để Thay Đổi Dữ Liệu Hiệu Quả

• Sử dụng ChangeDetectionStrategy.OnPush bất cứ khi nào có thể.
• Ưu tiên cấu trúc dữ liệu không thay đổi cho các cập nhật trạng thái dễ dự đoán.
• Chạy các tác vụ nặng bên ngoài vùng của Angular.
• Sử dụng trackBy trong *ngFor để tránh tái render các mục không thay đổi.

<li *ngFor="let user of users; trackBy: trackById">
  {{ user.name }}
</li>

trackById(index: number, user: any): number {
  return user.id;
}

• Tận dụng AsyncPipe để xử lý các observable.
• Tránh các binding không cần thiết và các biểu thức phức tạp trong template.
• Sử dụng ChangeDetectorRef.detach() cho các thành phần ít được cập nhật.

📊 Ví Dụ Thực Tế: Render Danh Sách

Hãy tưởng tượng việc render một danh sách 10.000 người dùng.

Với thay đổi dữ liệu mặc định, Angular sẽ tái render toàn bộ danh sách mỗi khi có cập nhật.

Với OnPush + trackBy, Angular chỉ tái render mục người dùng đã được cập nhật, cải thiện đáng kể hiệu suất.

🔑 Điểm Chính

Quản lý thay đổi dữ liệu hiệu quả trong Angular là chìa khóa để xây dựng các ứng dụng có hiệu suất cao và có khả năng mở rộng.

• Sử dụng OnPush bất cứ khi nào có thể.
• Kiểm soát thay đổi dữ liệu với ChangeDetectorRef.
• Tối ưu hóa các tác vụ bất đồng bộ với NgZone.
• Thực hiện các thực tiễn tốt nhất như AsyncPipe và trackBy.

Bằng cách làm chủ các chiến lược này, bạn sẽ giữ cho các ứng dụng Angular của mình nhanh chóng, phản hồi tốt và sẵn sàng cho quy mô doanh nghiệp.

📢 Kết Luận

Nếu bạn đang xây dựng các ứng dụng Angular lớn, hãy bắt đầu kiểm tra chiến lược thay đổi dữ liệu của các thành phần hôm nay. Sự khác biệt về hiệu suất có thể là một thay đổi lớn.

👉 Bạn sử dụng chiến lược nào để tối ưu hóa việc thay đổi dữ liệu trong Angular? Hãy chia sẻ ý kiến của bạn trong phần bình luận!