การตรวจจับการเปลี่ยนแปลงคืออะไร? เรามาพูดถึงกลไกการเปลี่ยนแปลงของเชิงมุมกันดีกว่า

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

1. การตรวจจับการเปลี่ยนแปลงคืออะไร?

• สรุป:检测机制การเปลี่ยนแปลงที่สำรวจแผนผังส่วนประกอบ ตรวจสอบการเปลี่ยนแปลงในแต่ละส่วนประกอบ และทริกเกอร์การอัปเดต DOM เมื่อคุณสมบัติของส่วนประกอบเปลี่ยนแปลง [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

• งานพื้นฐานของการตรวจจับการเปลี่ยนแปลง: รับ状态ภายในของโปรแกรมและทำให้可见ในส่วนต่อประสานผู้ใช้ สถานะนี้สามารถเป็นวัตถุ อาร์เรย์ หรือชนิดข้อมูลพื้นฐานก็ได้

2. อะไรทำให้เกิดการเปลี่ยนแปลง?

แหล่งที่มาที่ขับเคลื่อนด้วยเหตุการณ์แบ่งออกเป็นสามประเภทต่อไปนี้:

• เหตุการณ์: คลิกหน้า, ส่ง, เลื่อนเมาส์ลง...

• XHR: รับข้อมูลจากเซิร์ฟเวอร์แบ็กเอนด์

• ตัวจับเวลา: setTimeout(), setInterval()

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

3. วิธีการแจ้งการตรวจสอบการเปลี่ยนแปลงสถานะการเปลี่ยนแปลง

ใน Angular มีการเชื่อมต่อ NgZone ซึ่งจะตรวจสอบ异步事件ทั้งหมดของ Angular จะเขียนใหม่ (ผ่าน Zone.js ) API ของเบราว์เซอร์พื้นฐานบางส่วนเมื่อเริ่มต้น (สกัดกั้นเหตุการณ์อะซิงโครนัสทั้งหมดอย่างรุนแรง)

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

 ngAfterViewChecked() {
console.log('คลัสเตอร์-master.component cd');
-

อีกวิธีหนึ่งคือควบคุมการเปิดหรือปิดการตรวจจับการเปลี่ยนแปลงด้วยตนเองและทริกเกอร์ด้วยตนเอง

 ตัวสร้าง (ซีดีส่วนตัว: ChangeDetectorRef) {
cd.ถอด()
setInterval(() => {
นี้.cd.detectChanges()
}, 5,000)
-

3. การตรวจจับการเปลี่ยนแปลงเชิงมุม

แกนหลักของ Angular คือการจัดองค์ประกอบ ในที่สุดการซ้อนส่วนประกอบจะก่อตัวเป็น组件树ส่วนประกอบ การ变化检测器ChangeDetector การเปลี่ยนแปลงของ Angular สามารถแบ่งออกเป็นส่วนประกอบต่างๆ ได้
ใน Angular แต่ละส่วนประกอบจะมีตัวตรวจจับการเปลี่ยนแปลงของตัวเอง ซึ่งช่วยให้เราสามารถควบคุมวิธีการและเวลาที่จะดำเนินการตรวจจับการเปลี่ยนแปลงสำหรับแต่ละส่วนประกอบ

4. เปลี่ยนกลยุทธ์การตรวจจับ

Angular ยังช่วยให้นักพัฒนาสามารถปรับแต่งกลยุทธ์การตรวจจับการเปลี่ยนแปลงได้

• ค่าเริ่มต้น: การตรวจจับการเปลี่ยนแปลง每次จะทำให้เกิดการตรวจจับการเปลี่ยนแปลงของส่วนประกอบ รวมถึงการเปลี่ยนแปลงสถานะของ其他组件และการเปลี่ยนแปลงค่าแอตทริบิวต์ภายในของตัวแปรอ้างอิง本组件

• Onpush: การตรวจจับการเปลี่ยนแปลงแต่ละครั้งจะข้ามการตรวจสอบการเปลี่ยนแปลงของส่วนประกอบนี้ เว้นแต่满足一些条件

4.1 ค่าเริ่มต้น

กลไกการตรวจจับการเปลี่ยนแปลงเริ่มต้นของ Angular คือ ChangeDetectionStrategy.Default หลังจากการเรียกกลับเหตุการณ์แบบอะซิงโครนัสแต่ละครั้งสิ้นสุดลง NgZone จะทริก整个组件树เพื่อดำเนินการตรวจจับการเปลี่ยนแปลง至上而下

4.2 onPush

กลยุทธ์ OnPush ใช้เพื่อ跳过การตรวจจับการเปลี่ยนแปลงของส่วนประกอบและ所有子组件ที่อยู่ข้างใต้

ที่จริงแล้ว หลังจากที่ตั้งค่านโยบาย OnPush แล้ว ยังมีหลายวิธีในการทริกเกอร์การตรวจจับการเปลี่ยนแปลง

• 1)引用การเปลี่ยนแปลงแอตทริบิวต์ @Input ของส่วนประกอบ

• 2) เหตุการณ์ DOM ภายในส่วนประกอบ รวมถึงเหตุการณ์ DOM ของส่วนประกอบย่อย เช่น click、submit、mouse down

• 3) Observable ในองค์ประกอบสมัครรับเหตุการณ์และตั้งค่า Async pipe ในเวลาเดียวกัน

• 4) ใช้เมธอด ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() ด้วยตนเองในคอมโพเนนต์

5. เปลี่ยนการอ้างอิงวัตถุการตรวจจับ

• markForCheck(): ใช้สำหรับ子组件该子组件到根组件โดยแจ้งให้เครื่องตรวจจับเชิงมุมตรวจ一定ส่วนประกอบบนเส้นทางนี้ในระหว่างการตรวจจับการเปลี่ยนแปลงครั้งถัดไป แม้ว่ากลยุทธ์การตรวจจับการเปลี่ยนแปลงจะถูกตั้งค่าเป็น onPush

• detectorChanges(): เริ่มต้นการตรวจจับการเปลี่ยนแปลงจาก该组件到各个子组件ด้วยตนเอง

• detach():脱离ตัวตรวจจับส่วนประกอบออกจากจำนวนตัวตรวจจับ และกลไกการตรวจจับจะไม่ถูกควบคุมอีกต่อไป เว้นแต่จะติดตั้งกลับเข้าไปใหม่

• reattach():重新链接เครื่องตรวจจับที่แยกออกมาเข้ากับแผนผังเครื่องตรวจจับอีกครั้ง