วันที่ 2: React อัปเดต UI อย่างไร

เมื่อวานผมเรียนรู้ว่า React ทำอะไรได้บ้าง วันนี้ผมเรียนรู้ว่ามันทำได้อย่างไร

ผมเคยสงสัยว่า React รู้ได้อย่างไรว่าต้องเปลี่ยนอะไรใน UI บ้าง หากคุณเปลี่ยนคำเพียงคำเดียวในย่อหน้า React จะสร้างหน้าเว็บใหม่ทั้งหมดเลยหรือไม่? คำตอบคือ ไม่ มันใช้กระบวนการที่ชาญฉลาดเพื่อให้ทำงานได้อย่างรวดเร็ว

นี่คือรายละเอียดของวงจรการอัปเดตของ React

Reconciliation และ Diffing

Reconciliation คือกลยุทธ์ ส่วน Diffing คือวิธีการที่ใช้จริง React จะเปรียบเทียบ Virtual DOM tree ใหม่กับอันเก่า

การเปรียบเทียบ tree สองอันเป็นเรื่องยากสำหรับคอมพิวเตอร์ อัลกอริทึมมาตรฐานนั้นช้าเกินไป React จึงรักษาความเร็วไว้ได้โดยการตั้งสมมติฐานสองอย่าง:

  • หากประเภทของ element เปลี่ยนไป React จะทำลาย tree เก่าทิ้งและสร้างอันใหม่ขึ้นมา
  • หากประเภทคงเดิม React จะอัปเดตเฉพาะ attribute ที่เปลี่ยนแปลงเท่านั้น

สิ่งนี้ช่วยให้ React ทำงานได้ในเวลา O(n) ซึ่งทำให้การอัปเดตดูเหมือนเกิดขึ้นในทันที

สองเฟส (The Two Phases)

React แบ่งการทำงานออกเป็นสองขั้นตอนที่ชัดเจน:

  1. Render Phase นี่คือขั้นตอนการวางแผน React จะเรียกใช้ component ของคุณและคำนวณการเปลี่ยนแปลง ในขั้นตอนนี้จะยังไม่มีการแตะต้อง Real DOM ให้ลองนึกภาพว่าเหมือนสถาปนิกกำลังเขียนแบบแปลน

  2. Commit Phase นี่คือขั้นตอนการก่อสร้าง React จะนำการเปลี่ยนแปลงที่คำนวณไว้ไปใช้กับ Real DOM ขั้นตอนนี้เป็นแบบ synchronous เมื่อเริ่มทำงานแล้ว มันจะไม่หยุดจนกว่างานจะเสร็จสิ้น

สำคัญ: React อัปเดต DOM แต่เบราว์เซอร์เป็นตัววาดพิกเซล (paint pixels) React จัดการเรื่องโครงสร้าง ส่วนเบราว์เซอร์จัดการเรื่องการแสดงผลทางภาพ (visual rendering)

React Fiber

ก่อน React 16 การเรนเดอร์จะเป็นแบบ synchronous หากการเรนเดอร์ใช้เวลานาน เบราว์เซอร์จะค้าง คุณจะไม่สามารถเลื่อนหน้าจอหรือพิมพ์อะไรได้เลย

Fiber เข้ามาเปลี่ยนสิ่งนี้ Fiber คือ engine ที่จัดการ Render Phase ซึ่งช่วยให้ React สามารถ:

  • หยุดพักงานและกลับมาทำต่อภายหลังได้
  • จัดลำดับความสำคัญของการอัปเดตที่เร่งด่วน เช่น การพิมพ์ของผู้ใช้ ให้สูงกว่าข้อมูลเบื้องหลัง (background data)
  • แบ่งงานออกเป็นส่วนย่อยๆ (small chunks)

Virtual DOM คือโครงสร้างข้อมูล ส่วน Fiber คืออัลกอริทึมที่ทำงานบนข้อมูลนั้น

สรุปขั้นตอนการทำงาน:

• State เปลี่ยนแปลง • Render Phase: React วางแผนการเปลี่ยนแปลงผ่าน Diffing • Commit Phase: React อัปเดต Real DOM • Browser: Layout, Paint และ Composite • พิกเซลปรากฏบนหน้าจอ

แหล่งที่มา: https://dev.to/bismay-exe/day-2-of-learning-react-reconciliation-diffing-algorithm-render-phase-commit-phase-react-4f0f