Angular Academy · บทเรียน

ไปป์แบบบริสุทธิ์เทียบกับแบบไม่บริสุทธิ์

ทำความเข้าใจพฤติกรรมการตรวจจับการเปลี่ยนแปลงของไปป์

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

ไปป์แบบบริสุทธิ์เป็นค่าเริ่มต้น

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

เหตุผลที่ไปป์แบบบริสุทธิ์ทำงานเร็ว

Angular จะข้ามการเรียกใช้ไปป์แบบบริสุทธิ์ระหว่างการตรวจจับการเปลี่ยนแปลง หากการอ้างอิงอินพุตยังไม่เปลี่ยนแปลง จึงทำให้ไปป์แบบบริสุทธิ์มีประสิทธิภาพ

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

การเปลี่ยนแปลงการอ้างอิงกับการเปลี่ยนแปลงค่า

ไปป์แบบบริสุทธิ์ตรวจจับการเปลี่ยนแปลงของ การอ้างอิง การเปลี่ยนแปลงอาร์เรย์โดยตรงจะไม่เรียกใช้ไปป์แบบบริสุทธิ์ เพราะการอ้างอิงอาร์เรย์ยังคงเดิม

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

การประกาศไปป์แบบไม่บริสุทธิ์

กำหนด pure: false ในตัวตกแต่ง @Pipe เพื่อทำให้ไปป์เป็นแบบไม่บริสุทธิ์ ไปป์แบบไม่บริสุทธิ์จะทำงานในทุกวัฏจักรการตรวจจับการเปลี่ยนแปลง

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

เมื่อใดควรใช้ไปป์แบบไม่บริสุทธิ์

ใช้ไปป์แบบไม่บริสุทธิ์เมื่อการแปลงข้อมูลขึ้นอยู่กับข้อมูลที่เปลี่ยนแปลงได้ เช่น การกรองอาร์เรย์ที่คุณแก้ไขโดยตรง หรือค่าที่เปลี่ยนแปลงโดยไม่มีการสร้างการอ้างอิงใหม่

ต้นทุนของไปป์แบบไม่บริสุทธิ์

ไปป์แบบไม่บริสุทธิ์ทำงานถี่มากในทุกวัฏจักรการตรวจจับการเปลี่ยนแปลง ตรรกะที่หนักภายในไปป์อาจทำให้ประสิทธิภาพลดลง ดังนั้นควรทำให้ไปป์มีการประมวลผลเล็กน้อย

ไปป์ async เป็นแบบไม่บริสุทธิ์

ไปป์ในตัว async เป็นไปป์แบบไม่บริสุทธิ์ โดยจะสมัครรับข้อมูลจาก Observable หรือ Promise และอัปเดตมุมมองเมื่อมีค่าใหม่เข้ามา

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

ไปป์ async ยกเลิกการสมัครรับข้อมูลโดยอัตโนมัติ

ประโยชน์สำคัญของไปป์ async คือการยกเลิกการสมัครรับข้อมูลโดยอัตโนมัติเมื่อคอมโพเนนต์ถูกทำลาย ซึ่งช่วยป้องกันหน่วยความจำรั่ว

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

หลีกเลี่ยงการกลายค่าเมื่อใช้ไปป์แบบบริสุทธิ์

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

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

การเลือกไปป์แบบบริสุทธิ์หรือไม่บริสุทธิ์

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

แนวทางปฏิบัติที่ดีสำหรับไปป์แบบไม่บริสุทธิ์

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

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

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

ทดสอบความเข้าใจของคุณเกี่ยวกับไปป์แบบบริสุทธิ์และไปป์แบบไม่บริสุทธิ์

สรุปทบทวน

ไปป์แบบบริสุทธิ์จะทำงานเฉพาะเมื่อการอ้างอิงเปลี่ยนแปลงและมีประสิทธิภาพสูง ส่วนไปป์แบบไม่บริสุทธิ์ (pure: false) จะทำงานทุกวัฏจักรและเหมาะกับข้อมูลที่เปลี่ยนแปลงได้ ไปป์ async เป็นไปป์แบบไม่บริสุทธิ์และยกเลิกการสมัครรับข้อมูลโดยอัตโนมัติ

ควรใช้ข้อมูลที่ไม่เปลี่ยนแปลง เพื่อให้ไปป์แบบบริสุทธิ์ยังคงมีประสิทธิภาพ

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

บทเรียน “ไปป์แบบบริสุทธิ์เทียบกับแบบไม่บริสุทธิ์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ไปป์แบบบริสุทธิ์เทียบกับแบบไม่บริสุทธิ์”

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

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

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

บทเรียน “ไปป์แบบบริสุทธิ์เทียบกับแบบไม่บริสุทธิ์” ใช้เวลานานแค่ไหน

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

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

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

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

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