Change Detection
Zone.js, กลยุทธ์ change detection, กลยุทธ์ OnPush, ChangeDetectorRef, markForCheck, detectChanges, การปรับแต่งประสิทธิภาพ
1กลไก change detection ใน Angular คืออะไร?
กลไก change detection ใน Angular คืออะไร?
คำตอบ
Change detection คือกระบวนการที่ Angular ตรวจจับการเปลี่ยนแปลงในสถานะของแอปพลิเคชันและอัปเดต DOM ตามนั้น โดยค่าเริ่มต้น Angular ใช้ Zone.js เพื่อตรวจจับ event แบบ asynchronous (clicks, HTTP requests, timers) โดยอัตโนมัติ และเรียกใช้การตรวจสอบ component ตั้งแต่ root การตรวจสอบนี้จะเดินผ่านต้นไม้ของ component เพื่อระบุการแก้ไขที่จะนำไปใช้กับ DOM
2บทบาทของ Zone.js ใน Angular change detection คืออะไร?
บทบาทของ Zone.js ใน Angular change detection คืออะไร?
คำตอบ
Zone.js เป็นไลบรารีที่ patch API asynchronous ของเบราว์เซอร์ (setTimeout, Promise, addEventListener เป็นต้น) เพื่อสกัดการทำงานของมัน เมื่อการทำงานแบบ asynchronous เสร็จสิ้น Zone.js จะแจ้ง Angular ซึ่งจะกระตุ้น change detection โดยอัตโนมัติจาก root component สิ่งนี้ทำให้ Angular ตรวจจับการเปลี่ยนแปลงได้โดยไม่ต้องมีการแทรกแซงด้วยตนเองจากนักพัฒนา
3ความแตกต่างระหว่างกลยุทธ์ Default และ OnPush คืออะไร?
ความแตกต่างระหว่างกลยุทธ์ Default และ OnPush คืออะไร?
คำตอบ
กลยุทธ์ Default ตรวจสอบ component ทั้งหมดในต้นไม้ในทุก ๆ รอบของ change detection ซึ่งอาจมีค่าใช้จ่ายสูง OnPush เพิ่มประสิทธิภาพโดยตรวจสอบ component เฉพาะเมื่อ input เปลี่ยนแปลง (การอ้างอิงที่ไม่เปลี่ยนแปลง) หากมี event ถูกปล่อยจาก template หาก async pipe ได้รับค่าใหม่ หรือหาก markForCheck() ถูกเรียกใช้ด้วยตนเอง OnPush ลดจำนวนการตรวจสอบลงอย่างมากและช่วยปรับปรุงประสิทธิภาพ
วิธีเปิดใช้กลยุทธ์ OnPush บน component อย่างไร?
วัตถุประสงค์ของ ChangeDetectorRef ใน component ของ Angular คืออะไร?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ Angular อื่นๆ
พื้นฐาน TypeScript
TypeScript ขั้นสูง
พื้นฐาน Angular
คอมโพเนนต์และวงจรชีวิต
Services & Dependency Injection
การจัดระเบียบโมดูล Angular
Angular CLI
Directives และ Pipes
Routing และการนำทาง
Reactive Forms
Template-driven Forms
พื้นฐาน RxJS
Operator ของ RxJS
HttpClient และการเรียก API
การจัดการ state พื้นฐาน
Angular Signals
Standalone Components
การทำ Unit Testing ใน Angular
การทดสอบ End-to-End
Build และการเพิ่มประสิทธิภาพ
พื้นฐาน NgRx
NgRx ขั้นสูง
สถาปัตยกรรม Angular
การปรับแต่งประสิทธิภาพ
ความปลอดภัยและแนวทางปฏิบัติที่ดี
รูปแบบ RxJS ขั้นสูง
Angular Universal และ SSR
Angular Micro-frontends
เชี่ยวชาญ Angular สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี