Angular Academy · บทเรียน

เอฟเฟกต์และผลข้างเคียง

ตอบสนองต่อการเปลี่ยนแปลงของสัญญาณด้วยเอฟเฟกต์

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

เอฟเฟกต์คืออะไร

effect() จะทำงานฟังก์ชันหนึ่งทุกครั้งที่สัญญาณใด ๆ ที่ฟังก์ชันนั้นอ่านมีการเปลี่ยนแปลง ต่างจากค่าคำนวณ เอฟเฟกต์มีไว้สำหรับผลข้างเคียง เช่น การบันทึกข้อมูล การซิงค์ไปยัง localStorage การเรียก API และการจัดการ DOM

เอฟเฟกต์ไม่ส่งคืนค่า

การสร้างเอฟเฟกต์

เอฟเฟกต์จะทำงานทันทีหนึ่งครั้ง จากนั้นจะทำงานซ้ำทุกครั้งที่สัญญาณที่ติดตามมีการเปลี่ยนแปลง

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

เอฟเฟกต์ต้องมีบริบทการฉีด

โดยค่าเริ่มต้น ต้องสร้าง effect() ภายในบริบทการฉีด ซึ่งโดยทั่วไปคือคอนสตรัคเตอร์หรือตัวเริ่มต้นฟิลด์ของคอมโพเนนต์ คำสั่ง หรือบริการ

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

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

การติดตามสิ่งที่ต้องพึ่งพาโดยอัตโนมัติ

เช่นเดียวกับค่าคำนวณ เอฟเฟกต์จะติดตามเฉพาะสัญญาณที่มีการอ่านขณะทำงานเท่านั้น การอ่านแบบมีเงื่อนไขจะถูกติดตามเมื่อไปถึงส่วนนั้นเท่านั้น

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

การซิงค์สัญญาณไปยัง localStorage

กรณีการใช้เอฟเฟกต์แบบคลาสสิกคือการบันทึกสถานะไว้ทุกครั้งที่สถานะเปลี่ยนแปลง

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

เอฟเฟกต์ไม่ส่งคืนค่า

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

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

การกำหนดค่าให้สัญญาณภายในเอฟเฟกต์

โดยค่าเริ่มต้น Angular ไม่อนุญาตให้เขียนค่าลงในสัญญาณภายในเอฟเฟกต์ เพื่อป้องกันการวนซ้ำ หากจำเป็นจริง ๆ ให้ส่ง { allowSignalWrites: true } แต่ควรใช้ค่าคำนวณสำหรับค่าที่ได้จากการคำนวณ

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

การล้างข้อมูลด้วยตนเองด้วย EffectRef

effect() จะส่งคืน EffectRef เรียกใช้ .destroy() เพื่อหยุดเอฟเฟกต์ด้วยตนเองก่อนที่เจ้าของจะถูกทำลาย

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

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

เอฟเฟกต์ล้างข้อมูลโดยอัตโนมัติ

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

เอฟเฟกต์ทำงานหลังการเรนเดอร์

เอฟเฟกต์จะถูกจัดกำหนดการและทำงานหลังการตรวจจับการเปลี่ยนแปลง โดยรวมกลุ่มตามงานย่อยระดับจุลภาค การเปลี่ยนแปลงสัญญาณแบบพร้อมกันหลายครั้งจะกระตุ้นเอฟเฟกต์เพียงครั้งเดียว

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

ควรใช้เอฟเฟกต์หรือค่าคำนวณเมื่อใด

ค่าคำนวณ: คำนวณค่าจากสัญญาณ (บริสุทธิ์)
เอฟเฟกต์: ตอบสนองต่อสัญญาณด้วยการทำบางสิ่งภายนอก (ไม่บริสุทธิ์)

หากคุณพบว่าตนเองกำลังส่งคืนค่าจากเอฟเฟกต์ คุณอาจต้องการใช้ค่าคำนวณแทน

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

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

สรุป: เอฟเฟกต์

effect() จะทำงานฟังก์ชันหนึ่งทุกครั้งที่สัญญาณที่ติดตามมีการเปลี่ยนแปลง และมีไว้สำหรับผลข้างเคียงเท่านั้น

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

ถัดไป: การล้างทรัพยากรภายในเอฟเฟกต์

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

บทเรียน “เอฟเฟกต์และผลข้างเคียง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เอฟเฟกต์และผลข้างเคียง”

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

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

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

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

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

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

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

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

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