Bagaimana cara menyebabkan kebocoran memori pada aplikasi Angular?

Apa itu manajemen memori?

1. Alokasi memori yang diperlukan.
2. Bekerja dengan memori yang dialokasikan, melakukan operasi baca dan tulis.
3. Melepaskan memori setelah itu tidak lagi diperlukan.

Bagaimana cara kerja pengumpulan sampah?

▍ Fase bendera

▍ Tahap pembersihan

Kebocoran memori sudut

@Component({
  selector: 'app-root',
  template: `<app-sub *ngIf="hide"></app-sub>`
})
export class AppComponent {
  hide = false;

  constructor() {
    setInterval(() => this.hide = !this.hide, 50);
  }
}

▍ Skenario # 1: besar untuk loop

@Component({
  selector:'app-sub',
  // ...
})
export class SubComponent {
  arr = [];

  constructor() {
    for (let i = 0; i < 100000; ++i) {
      this.arr.push(Math.random());
    }
  }
}

▍ Skenario 2: Berlangganan BehaviorSubject

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  subject = new BehaviorSubject(42);
  
  constructor() {
    this.subject.subscribe(value => {
        const foo = value;
    });
  }
}

▍ Skenario 3: menugaskan nilai ke bidang kelas di dalam langganan

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  subject = new BehaviorSubject(42);
  randomValue = 0;
  
  constructor() {
    this.subject.subscribe(value => {
        this.randomValue = value;
    });
  }
}

Skenario yang menggunakan layanan

@Injectable({
  providedIn: 'root'
})
export class DummyService {

   some$ = new BehaviorSubject<number>(42);
}

▍ Skenario 4: Berlangganan aliran dan menetapkan nilai ke konstanta lokal

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  
  constructor(private dummyService: DummyService) {
    this.dummyService.some$.subscribe(value => {
        const foo = value;
    });
  }
}

▍ Skenario 5: berlangganan layanan dan memberikan nilai ke bidang kelas

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  randomValue = 0;
  
  constructor(private dummyService: DummyService) {
    this.dummyService.some$.subscribe(value => {
        this.randomValue = value;
    });
  }
}

HenKetika kebocoran memori terjadi?

Pekerjaan Berlangganan yang Tepat

@Component({
  selector:'app-sub',
  // ...
})
export class SubComponent implements OnDestroy {

  private destroy$: Subject<void> = new Subject<void>();
  randomNumber = 0;

  constructor(private dummyService: DummyService) {
      dummyService.some$.pipe(
          takeUntil(this.destroy$)
      ).subscribe(value => this.randomNumber = value);
  }

  ngOnDestroy(): void {
      this.destroy$.next();
      this.destroy$.complete();
  }
}

Bagaimana cara mengingat untuk menghapus langganan?

npm install @angular-extensions/lint-rules --save-dev

{
  "extends": [
    "tslint:recommended",
    "@angular-extensions/lint-rules"
  ]
}

Ringkasan