การยกเลิกการสมัครและหน่วยความจำรั่ว
หลีกเลี่ยงหน่วยความจำรั่วด้วย takeUntilDestroyed
การยกเลิกการสมัครและหน่วยความจำรั่ว เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหาหน่วยความจำรั่ว
หากคุณสมัครรับข้อมูลจาก Observable ที่มีอายุยาวนานในคอมโพเนนต์แล้วไม่เคยยกเลิกการสมัครรับข้อมูล ฟังก์ชันเรียกกลับจะยังทำงานต่อหลังจากคอมโพเนนต์ถูกทำลาย ทำให้หน่วยความจำรั่วและอาจทำให้เกิดข้อผิดพลาดหรือการทำงานซ้ำ
การยกเลิกการสมัครรับข้อมูลด้วยตนเอง
วิธีแก้พื้นฐานคือเก็บ Subscription ไว้ แล้วเรียก unsubscribe ใน ngOnDestroy
import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';
export class WidgetComponent implements OnDestroy {
private sub = interval(1000).subscribe(n => console.log(n));
ngOnDestroy() { this.sub.unsubscribe(); }
}การจัดการการสมัครรับข้อมูลหลายรายการ
Subscription เดียวสามารถรวบรวมรายการย่อยด้วย .add() จากนั้นเรียก unsubscribe() เพียงครั้งเดียวเพื่อยกเลิกทั้งหมด
private subs = new Subscription();
ngOnInit() {
this.subs.add(a$.subscribe());
this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }takeUntilDestroyed
Angular มี takeUntilDestroyed() ซึ่งจะจบกระแสโดยอัตโนมัติเมื่อคอมโพเนนต์ถูกทำลาย คุณจึงไม่ต้องเขียน ngOnDestroy เอง
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
export class WidgetComponent {
constructor() {
interval(1000)
.pipe(takeUntilDestroyed())
.subscribe(n => console.log(n));
}
}ข้อกำหนดของบริบทการฉีด
เมื่อเรียกโดยไม่ส่งอาร์กิวเมนต์ takeUntilDestroyed() ต้องทำงานอยู่ในบริบทการฉีด (เช่น ในตัวสร้าง) หากอยู่นอกบริบทดังกล่าว ให้ส่ง DestroyRef อย่างชัดเจน
import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
const destroyRef = inject(DestroyRef);
ngOnInit() {
source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}รูปแบบ takeUntil (แบบดั้งเดิม)
ก่อนมี takeUntilDestroyed รูปแบบมาตรฐานคือใช้ Subject ที่ส่งค่าใน ngOnDestroy
private destroy$ = new Subject<void>();
ngOnInit() {
source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}กระแสที่จบการทำงานไม่ต้องทำความสะอาด
คำขอของ HttpClient จะส่งค่าเพียงครั้งเดียวแล้วจบการทำงาน จึงทำความสะอาดตัวเอง โดยทั่วไปคุณไม่ต้องยกเลิกการสมัครรับข้อมูลจากการเรียก HTTP ครั้งเดียว แม้การใช้ takeUntilDestroyed จะยังปลอดภัย
ไปป์ async จัดการให้คุณ
แนวทางที่ดีที่สุดสำหรับแม่แบบคือให้ไปป์ async สมัครและยกเลิกการสมัครรับข้อมูลโดยอัตโนมัติ เราจะอธิบายเรื่องนี้ในบทเรียนถัดไป
// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe neededสัญญาณของการรั่วไหลจากการสมัครรับข้อมูล
คำขอเครือข่ายซ้ำ ตัวจัดการทำงานหลังการนำทาง หน่วยความจำในเครื่องมือสำหรับนักพัฒนาเพิ่มขึ้นเรื่อย ๆ หรือข้อผิดพลาด "Cannot read property of destroyed view" มักชี้ว่าลืมยกเลิกการสมัครรับข้อมูล
toSignal ทำความสะอาดโดยอัตโนมัติเช่นกัน
การแปลง Observable เป็นสัญญาณด้วย toSignal() จะยกเลิกการสมัครรับข้อมูลโดยอัตโนมัติเมื่อบริบทเจ้าของถูกทำลาย
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroyการเลือกแนวทาง
ควรใช้ไปป์ async หรือ toSignal ในแม่แบบ ใช้ takeUntilDestroyed() สำหรับการสมัครรับข้อมูลด้วยตนเอง และใช้การรวบรวม Subscription เป็นทางเลือกสำรองเฉพาะเมื่อจำเป็น
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเกี่ยวกับการยกเลิกการสมัครรับข้อมูลของคุณ
สรุป: การยกเลิกการสมัครรับข้อมูลและหน่วยความจำรั่ว
ยกเลิกการสมัครรับข้อมูลที่มีอายุยาวนานเสมอ
takeUntilDestroyed()จะจบการทำงานโดยอัตโนมัติเมื่อถูกทำลาย- ไปป์
asyncและtoSignal()จัดการการสมัครรับข้อมูลให้คุณ - การเรียก HTTP ครั้งเดียวจะจบการทำงานเอง
ถัดไป: ไปป์ async โดยละเอียด
คำถามที่พบบ่อย
บทเรียน “การยกเลิกการสมัครและหน่วยความจำรั่ว” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การยกเลิกการสมัครและหน่วยความจำรั่ว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การยกเลิกการสมัครและหน่วยความจำรั่ว”
หลีกเลี่ยงหน่วยความจำรั่วด้วย takeUntilDestroyed คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การยกเลิกการสมัครและหน่วยความจำรั่ว” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ออบเซอร์เวเบิลและการสมัครรับข้อมูล
- ซับเจกต์และ BehaviorSubject
- การยกเลิกการสมัครและหน่วยความจำรั่ว
- ไปป์ async