Angular Academy · บทเรียน

การเก็บกวาดเอฟเฟกต์และวงจรชีวิต

เก็บกวาดทรัพยากรภายในเอฟเฟกต์

การเก็บกวาดเอฟเฟกต์และวงจรชีวิต เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดการล้างข้อมูลจึงสำคัญ

เอฟเฟกต์สามารถเริ่มทรัพยากรต่าง ๆ ได้ เช่น ตัวจับเวลา การสมัครรับข้อมูล และตัวรับฟังเหตุการณ์ ทุกครั้งที่เอฟเฟกต์ทำงานซ้ำ ต้องยกเลิกทรัพยากรเดิมก่อน มิฉะนั้นจะทำให้ตัวจับเวลาและตัวรับฟังรั่วไหล Angular มีฮุก onCleanup สำหรับงานนี้

การเรียกกลับ onCleanup

ฟังก์ชันเอฟเฟกต์จะได้รับฟังก์ชัน onCleanup ให้ลงทะเบียนการเรียกกลับสำหรับยกเลิกทรัพยากรด้วยฟังก์ชันนี้ Angular จะเรียกใช้ก่อนการทำงานรอบถัดไปและเมื่อถูกทำลาย

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

การล้างข้อมูลทำงานก่อนการทำงานซ้ำแต่ละครั้ง

เมื่อสิ่งที่ต้องพึ่งพาเปลี่ยนแปลง Angular จะเรียกใช้การล้างข้อมูลที่ลงทะเบียนไว้ก่อน แล้วจึงทำงานส่วนเนื้อหาของเอฟเฟกต์อีกครั้ง ซึ่งรับประกันว่าจะมีทรัพยากรที่ทำงานอยู่เพียงรายการเดียวในแต่ละครั้ง

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

การล้างตัวรับฟังเหตุการณ์

ตัวรับฟังเหตุการณ์ของ DOM ที่เพิ่มในเอฟเฟกต์ต้องถูกนำออกในการล้างข้อมูล เพื่อหลีกเลี่ยงตัวจัดการซ้ำและการรั่วไหล

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

การล้างข้อมูลด้วยการสมัครรับข้อมูล

หากเอฟเฟกต์สมัครรับข้อมูลจาก Observable ให้ยกเลิกการสมัครรับข้อมูลในการล้างข้อมูล (โดยทั่วไปคุณอาจใช้เครื่องมืออื่น แต่ตัวอย่างนี้แสดงรูปแบบการทำงาน)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

การล้างข้อมูลเมื่อถูกทำลาย

เมื่อคอมโพเนนต์ที่เป็นเจ้าของเอฟเฟกต์ถูกทำลาย Angular จะดำเนินการล้างข้อมูลครั้งสุดท้ายโดยอัตโนมัติ แล้วจึงทำลายเอฟเฟกต์ จะไม่มีตัวจับเวลารั่วไหลเหลืออยู่

ลำดับ: ล้างข้อมูลแล้วจึงทำงานเนื้อหา

ในการทำงานครั้งแรกของเอฟเฟกต์จะไม่มีสิ่งใดให้ล้าง ตั้งแต่การทำงานครั้งที่สองเป็นต้นไป ลำดับจะเป็นเช่นนี้เสมอ: ล้างข้อมูล -> เนื้อหา

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

หลีกเลี่ยงงานหนักที่ไม่มีการล้างข้อมูล

ทรัพยากรที่ทำงานเป็นเวลานานซึ่งเริ่มจากเอฟเฟกต์ควรมีการล้างข้อมูลที่สอดคล้องกัน ข้อผิดพลาดที่พบบ่อยคือการลืมล้างข้อมูล ทำให้ช่วงเวลาทำงานซ้อนกันมากขึ้นทุกครั้งที่สิ่งที่ต้องพึ่งพาเปลี่ยนแปลง

ตัวเลือก manualCleanup

สำหรับเอฟเฟกต์ที่สร้างนอกคอมโพเนนต์ เช่น ในบริการรากที่ทำงานตลอดเวลา คุณสามารถใช้ตัวเลือก manualCleanup แล้วเรียกใช้ ref.destroy() ด้วยตนเองเมื่อเหมาะสม

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef เป็นทางเลือก

สำหรับการยกเลิกทรัพยากรที่ไม่เกี่ยวกับเอฟเฟกต์ คุณสามารถฉีด DestroyRef และลงทะเบียนการเรียกกลับด้วย onDestroy ภายในเอฟเฟกต์ ควรใช้ onCleanup สำหรับการยกเลิกทรัพยากรในแต่ละรอบ

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

นำทุกอย่างมาประกอบกัน

เอฟเฟกต์ซิงค์แบบหน่วงเวลา: ทุกครั้งที่ค่าเปลี่ยนแปลง ตัวจับเวลาเดิมจะถูกยกเลิกและกำหนดเวลาบันทึกใหม่

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับการล้างข้อมูลของเอฟเฟกต์

สรุป: การล้างข้อมูลและวงจรชีวิตของเอฟเฟกต์

ใช้พารามิเตอร์ onCleanup เพื่อยกเลิกทรัพยากรที่เริ่มต้นภายในเอฟเฟกต์

การล้างข้อมูลทำงานก่อนการทำงานซ้ำแต่ละครั้งและเมื่อถูกทำลาย
ล้างตัวจับเวลา ตัวรับฟังเหตุการณ์ และการสมัครรับข้อมูลเสมอ
ใช้ manualCleanup สำหรับเอฟเฟกต์ที่มีอายุยาวนาน และใช้ DestroyRef สำหรับการยกเลิกทรัพยากรทั่วไป

ถัดไป: linkedSignal และรูปแบบขั้นสูง

คำถามที่พบบ่อย

บทเรียน “การเก็บกวาดเอฟเฟกต์และวงจรชีวิต” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเก็บกวาดเอฟเฟกต์และวงจรชีวิต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเก็บกวาดเอฟเฟกต์และวงจรชีวิต”

เก็บกวาดทรัพยากรภายในเอฟเฟกต์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การเก็บกวาดเอฟเฟกต์และวงจรชีวิต” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy