ระยะการเรนเดอร์และการคอมมิต DOM

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

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

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

ระยะคอมมิตมีสามระยะย่อย ได้แก่ ก่อนการเปลี่ยนแปลง (เมธอดของคอมโพเนนต์แบบคลาส getSnapshotBeforeUpdate ทำงานที่นี่เพื่ออ่านค่าจาก DOM ก่อนการเปลี่ยนแปลง), การเปลี่ยนแปลง (React แทรก อัปเดต และลบโหนด DOM) และการจัดวาง (เอฟเฟกต์แบบต่อเนื่องจะทำงานที่นี่ โดยเฉพาะ useLayoutEffect และ componentDidMount/componentDidUpdate ของคอมโพเนนต์แบบคลาส)

useEffect เป็นเอฟเฟกต์เบื้องหลัง ซึ่งหมายความว่าจะไม่ทำงานระหว่างระยะคอมมิต หลังจากระยะคอมมิตเสร็จสิ้นและเบราว์เซอร์วาดภาพแล้ว React จะจัดกำหนดการให้เอฟเฟกต์เบื้องหลังทำงานแบบไม่พร้อมกัน เอฟเฟกต์เหล่านี้จะทำงานหลังจากเบราว์เซอร์มีโอกาสแสดง DOM ที่อัปเดตบนหน้าจอแล้ว

เบราว์เซอร์จะวาดภาพระหว่างระยะการจัดวาง (ซึ่ง useLayoutEffect ทำงาน) กับระยะเอฟเฟกต์เบื้องหลัง (ซึ่ง useEffect ทำงาน) ความแตกต่างด้านจังหวะเวลาที่สำคัญคือ useLayoutEffect ทำงานก่อนการวาดภาพ ส่วน useEffect ทำงานหลังการวาดภาพ สำหรับเอฟเฟกต์ที่เปลี่ยนแปลงสิ่งที่แสดงบนหน้าจอ ความแตกต่างนี้มีความสำคัญอย่างมาก

หาก useEffect อ่าน DOM แล้วอัปเดตสถานะ (เช่น วัดขนาดองค์ประกอบแล้วตั้งค่าสถานะขนาด) React จะเรนเดอร์และคอมมิตอีกครั้ง เบราว์เซอร์จะวาดภาพสองครั้ง ครั้งแรกด้วยขนาดเริ่มต้น และครั้งที่สองด้วยขนาดที่แก้ไขแล้ว ผู้ใช้อาจเห็นขนาดที่ไม่ถูกต้องแวบหนึ่งก่อนที่การแก้ไขจะแสดงขึ้น

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

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

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

อย่าอ่านคุณสมบัติของ DOM โดยตรงภายในเนื้อหาฟังก์ชันคอมโพเนนต์ DOM อาจยังไม่มีอยู่ (ในกรณีการเรนเดอร์ฝั่งเซิร์ฟเวอร์) หรืออาจเป็นข้อมูลเก่า (ในการเรนเดอร์ใหม่) ให้อ่าน DOM ภายใน useLayoutEffect เสมอ (สำหรับการอ่านก่อนวาดหน้าจอ) หรือ useEffect (สำหรับการอ่านหลังวาดหน้าจอ) ซึ่งรับประกันได้ว่า DOM จะเป็นข้อมูลล่าสุด

useLayoutEffect ทำงานในระยะย่อยใดของระยะคอมมิตของ React

ระยะการเรนเดอร์ของ React สร้างต้นไม้ไฟเบอร์และอาจถูกขัดจังหวะได้ ส่วนระยะคอมมิตจะใช้การเปลี่ยนแปลงกับ DOM และทำงานแบบซิงโครนัสเสมอ การคอมมิตมีสามระยะย่อย ได้แก่ ก่อนการเปลี่ยนแปลงข้อมูล การเปลี่ยนแปลงข้อมูล และการจัดวาง useLayoutEffect ทำงานในระยะการจัดวางก่อนวาดหน้าจอ ส่วน useEffect ทำงานเป็นเอฟเฟกต์แบบไม่เร่งด่วนหลังวาดหน้าจอ