React Fiber: เจาะลึกอัลกอริทึม Reconciliation เพื่อความเป็นเลิศของ UI ระดับโลก

ในโลกของการพัฒนาเว็บที่เปลี่ยนแปลงอยู่ตลอดเวลา ซึ่งความคาดหวังของผู้ใช้สำหรับอินเทอร์เฟซที่ราบรื่นและตอบสนองได้ดีนั้นเพิ่มขึ้นอย่างต่อเนื่อง การทำความเข้าใจเทคโนโลยีพื้นฐานที่ขับเคลื่อนแอปพลิเคชันของเราจึงเป็นสิ่งสำคัญยิ่ง React ซึ่งเป็นไลบรารี JavaScript ชั้นนำสำหรับการสร้างส่วนติดต่อผู้ใช้ ได้ผ่านการปรับปรุงสถาปัตยกรรมครั้งสำคัญด้วยการเปิดตัว React Fiber นี่ไม่ใช่แค่การปรับปรุงโค้ดภายในเท่านั้น แต่เป็นก้าวกระโดดครั้งปฏิวัติที่เปลี่ยนแปลงวิธีการที่ React ทำ reconciliation หรือการกระทบยอดการเปลี่ยนแปลง ซึ่งเป็นการเปิดทางสำหรับฟีเจอร์ใหม่ที่ทรงพลังอย่าง Concurrent Mode และ Suspense

คู่มือฉบับสมบูรณ์นี้จะเจาะลึกเข้าไปใน React Fiber เพื่อไขความกระจ่างเกี่ยวกับอัลกอริทึม reconciliation ของมัน เราจะสำรวจว่าทำไม Fiber จึงจำเป็น มันทำงานอย่างไรเบื้องหลัง ผลกระทบอย่างลึกซึ้งต่อประสิทธิภาพและประสบการณ์ผู้ใช้ และมันมีความหมายอย่างไรสำหรับนักพัฒนาที่สร้างแอปพลิเคชันสำหรับผู้ชมทั่วโลก

วิวัฒนาการของ React: เหตุใด Fiber จึงกลายเป็นสิ่งจำเป็น

ก่อนที่จะมี Fiber กระบวนการ reconciliation ของ React (วิธีที่มันอัปเดต DOM เพื่อสะท้อนการเปลี่ยนแปลงใน state ของแอปพลิเคชัน) ส่วนใหญ่เป็นแบบ synchronous มันจะสำรวจ component tree คำนวณความแตกต่าง และใช้การอัปเดตในรอบเดียวที่ต่อเนื่องกัน แม้จะมีประสิทธิภาพสำหรับแอปพลิเคชันขนาดเล็ก แต่แนวทางนี้ก็มีข้อจำกัดที่สำคัญเมื่อแอปพลิเคชันมีความซับซ้อนและมีความต้องการในการโต้ตอบเพิ่มขึ้น:

• การบล็อก Main Thread: การอัปเดตขนาดใหญ่หรือซับซ้อนจะบล็อก main thread ของเบราว์เซอร์ ซึ่งนำไปสู่ UI ที่กระตุก, เฟรมตก และประสบการณ์ผู้ใช้ที่เชื่องช้า ลองนึกภาพแพลตฟอร์มอีคอมเมิร์ซระดับโลกที่กำลังประมวลผลการกรองที่ซับซ้อน หรือโปรแกรมแก้ไขเอกสารแบบร่วมมือที่ซิงค์การเปลี่ยนแปลงแบบเรียลไทม์ข้ามทวีป UI ที่ค้างเป็นสิ่งที่ยอมรับไม่ได้
• การขาดการจัดลำดับความสำคัญ: การอัปเดตทั้งหมดถูกปฏิบัติอย่างเท่าเทียมกัน การป้อนข้อมูลที่สำคัญของผู้ใช้ (เช่น การพิมพ์ในแถบค้นหา) อาจล่าช้าเนื่องจากการดึงข้อมูลพื้นหลังที่ไม่เร่งด่วนเพื่อแสดงการแจ้งเตือน ซึ่งนำไปสู่ความหงุดหงิด
• ความสามารถในการหยุดชะงักที่จำกัด: เมื่อการอัปเดตเริ่มต้นขึ้นแล้ว จะไม่สามารถหยุดชั่วคราวหรือทำงานต่อได้ ทำให้การนำฟีเจอร์ขั้นสูงอย่าง time-slicing หรือการจัดลำดับความสำคัญของงานเร่งด่วนมาใช้เป็นเรื่องยาก
• ความยากลำบากในการจัดการกับรูปแบบ UI แบบ Asynchronous: การจัดการการดึงข้อมูลและสถานะการโหลดอย่างราบรื่นจำเป็นต้องใช้วิธีแก้ปัญหาที่ซับซ้อน ซึ่งมักจะนำไปสู่ปัญหาน้ำตก (waterfalls) หรือโฟลว์ของผู้ใช้ที่ไม่เหมาะสม

ทีมงาน React ตระหนักถึงข้อจำกัดเหล่านี้และได้เริ่มโครงการหลายปีเพื่อสร้าง reconciler หลักขึ้นมาใหม่ ผลลัพธ์ที่ได้คือ Fiber ซึ่งเป็นสถาปัตยกรรมที่ออกแบบมาตั้งแต่ต้นเพื่อรองรับการเรนเดอร์แบบเพิ่มส่วน (incremental rendering), concurrency และการควบคุมกระบวนการเรนเดอร์ที่ดีขึ้น

ทำความเข้าใจแนวคิดหลัก: Fiber คืออะไร?

หัวใจหลักของ React Fiber คือการเขียนอัลกอริทึม reconciliation หลักของ React ขึ้นมาใหม่ทั้งหมด นวัตกรรมที่สำคัญที่สุดคือความสามารถในการ หยุดพัก ยกเลิก และกลับมาทำงานเรนเดอร์ต่อได้ เพื่อให้บรรลุเป้าหมายนี้ Fiber ได้นำเสนอการแทนค่าภายในของ component tree และวิธีการประมวลผลการอัปเดตแบบใหม่

Fibers ในฐานะหน่วยของงาน (Units of Work)

ในสถาปัตยกรรม Fiber นั้น React element แต่ละตัว (components, DOM nodes ฯลฯ) จะสอดคล้องกับ Fiber หนึ่งตัว Fiber คืออ็อบเจกต์ JavaScript ธรรมดาที่เป็นตัวแทนของหน่วยงานหนึ่งหน่วย ลองนึกภาพว่าเป็น virtual stack frame แต่แทนที่จะถูกจัดการโดย call stack ของเบราว์เซอร์ มันกลับถูกจัดการโดย React เอง Fiber แต่ละตัวจะเก็บข้อมูลเกี่ยวกับคอมโพเนนต์, state, props และความสัมพันธ์กับ Fiber อื่นๆ (parent, child, sibling)

เมื่อ React ต้องการทำการอัปเดต มันจะสร้าง tree ของ Fibers ขึ้นมาใหม่ ซึ่งเรียกว่า "work-in-progress" tree จากนั้นจะทำการ reconcile tree ใหม่นี้กับ "current" tree ที่มีอยู่ เพื่อระบุว่าต้องมีการเปลี่ยนแปลงอะไรบ้างกับ DOM จริง กระบวนการทั้งหมดนี้ถูกแบ่งออกเป็นส่วนเล็กๆ ของงานที่สามารถหยุดชะงักได้

โครงสร้างข้อมูลใหม่: Linked List

สิ่งสำคัญคือ Fibers จะถูกเชื่อมโยงเข้าด้วยกันในโครงสร้างคล้ายต้นไม้ แต่ภายในแล้วมีลักษณะคล้ายกับ singly linked list เพื่อให้สามารถสำรวจได้อย่างมีประสิทธิภาพในระหว่างการ reconciliation Fiber node แต่ละตัวจะมีพอยน์เตอร์:

• child: ชี้ไปยัง child Fiber ตัวแรก
• sibling: ชี้ไปยัง sibling Fiber ตัวถัดไป
• return: ชี้ไปยัง parent Fiber (the "return" Fiber)

โครงสร้าง linked list นี้ช่วยให้ React สามารถสำรวจ tree แบบ depth-first แล้วย้อนกลับขึ้นมาได้อย่างง่ายดาย ทำให้สามารถหยุดพักและกลับมาทำงานต่อได้ทุกเมื่อ ความยืดหยุ่นนี้เป็นกุญแจสำคัญสู่ความสามารถด้าน concurrency ของ Fiber

สองเฟสของ Fiber Reconciliation

Fiber แบ่งกระบวนการ reconciliation ออกเป็นสองเฟสที่แตกต่างกัน ทำให้ React สามารถทำงานแบบ asynchronous และจัดลำดับความสำคัญของงานได้:

เฟสที่ 1: Render/Reconciliation Phase (Work-in-Progress Tree)

เฟสนี้ยังเป็นที่รู้จักในชื่อ "work loop" หรือ "render phase" เป็นช่วงที่ React สำรวจ Fiber tree, ใช้อัลกอริทึม diffing (ระบุการเปลี่ยนแปลง) และสร้าง Fiber tree ใหม่ (work-in-progress tree) ซึ่งเป็นตัวแทนของสถานะ UI ที่กำลังจะเกิดขึ้น เฟสนี้ สามารถหยุดชะงักได้

การดำเนินการที่สำคัญในระหว่างเฟสนี้ ได้แก่:

• การอัปเดต Props และ State: React ประมวลผล props และ state ใหม่สำหรับแต่ละคอมโพเนนต์ โดยเรียกใช้ lifecycle methods เช่น getDerivedStateFromProps หรือส่วน body ของ functional component
• การเปรียบเทียบ Children (Diffing): สำหรับแต่ละคอมโพเนนต์ React จะเปรียบเทียบ children ปัจจุบันกับ children ใหม่ (จากการเรนเดอร์) เพื่อตัดสินว่าต้องเพิ่ม ลบ หรืออัปเดตอะไรบ้าง นี่คือจุดที่ "key" prop ที่โด่งดังมีความสำคัญอย่างยิ่งต่อการ reconcile รายการอย่างมีประสิทธิภาพ
• การทำเครื่องหมาย Side Effects: แทนที่จะทำการเปลี่ยนแปลง DOM จริงหรือเรียกใช้ `componentDidMount`/`Update` ทันที Fiber จะทำเครื่องหมาย Fiber nodes ด้วย "side effects" (เช่น `Placement`, `Update`, `Deletion`) เอฟเฟกต์เหล่านี้จะถูกรวบรวมไว้ใน singly linked list ที่เรียกว่า "effect list" หรือ "update queue" รายการนี้เป็นวิธีที่มีน้ำหนักเบาในการจัดเก็บการดำเนินการ DOM และการเรียกใช้ lifecycle ทั้งหมดที่จำเป็นต้องเกิดขึ้นหลังจาก render phase เสร็จสิ้น

ในช่วงเฟสนี้ React จะ ไม่ แตะต้อง DOM จริงเลย มันจะสร้างตัวแทนของสิ่งที่จะถูกอัปเดต การแยกส่วนนี้มีความสำคัญอย่างยิ่งสำหรับ concurrency หากมีการอัปเดตที่มีลำดับความสำคัญสูงกว่าเข้ามา React สามารถทิ้ง work-in-progress tree ที่สร้างขึ้นบางส่วนแล้วและเริ่มต้นใหม่ด้วยงานที่เร่งด่วนกว่า โดยไม่ทำให้เกิดความไม่สอดคล้องที่มองเห็นได้บนหน้าจอ

เฟสที่ 2: Commit Phase (การนำการเปลี่ยนแปลงไปใช้งาน)

เมื่อ render phase เสร็จสมบูรณ์ และงานทั้งหมดสำหรับการอัปเดตที่กำหนดได้ถูกประมวลผลแล้ว (หรือส่วนหนึ่งของมัน) React จะเข้าสู่ commit phase เฟสนี้เป็นแบบ synchronous และไม่สามารถหยุดชะงักได้ เป็นช่วงที่ React นำ side effects ที่สะสมจาก work-in-progress tree มาใช้กับ DOM จริงและเรียกใช้ lifecycle methods ที่เกี่ยวข้อง

การดำเนินการที่สำคัญในระหว่างเฟสนี้ ได้แก่:

• การเปลี่ยนแปลง DOM (DOM Mutations): React ทำการเปลี่ยนแปลง DOM ที่จำเป็นทั้งหมด (การเพิ่ม, ลบ, อัปเดต elements) ตามเอฟเฟกต์ `Placement`, `Update`, และ `Deletion` ที่ทำเครื่องหมายไว้ในเฟสก่อนหน้า
• Lifecycle Methods และ Hooks: นี่คือช่วงเวลาที่เมธอดอย่าง `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` (สำหรับการลบ) และ callback ของ `useLayoutEffect` ถูกเรียกใช้ ที่สำคัญคือ callback ของ `useEffect` จะถูกตั้งเวลาให้ทำงาน หลังจาก ที่เบราว์เซอร์ได้ทำการ paint แล้ว ซึ่งเป็นวิธีที่ไม่บล็อกการทำงานเพื่อทำ side effects

เนื่องจาก commit phase เป็นแบบ synchronous จึงต้องเสร็จสิ้นอย่างรวดเร็วเพื่อหลีกเลี่ยงการบล็อก main thread นี่คือเหตุผลที่ Fiber คำนวณการเปลี่ยนแปลงทั้งหมดล่วงหน้าใน render phase ทำให้ commit phase เป็นการนำการเปลี่ยนแปลงเหล่านั้นไปใช้อย่างรวดเร็วและโดยตรง

นวัตกรรมที่สำคัญของ React Fiber

แนวทางสองเฟสและโครงสร้างข้อมูล Fiber ปลดล็อกความสามารถใหม่ๆ มากมาย:

Concurrency และการหยุดชะงัก (Time Slicing)

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

สิ่งนี้เกิดขึ้นได้โดยใช้ API ของเบราว์เซอร์เช่น `requestIdleCallback` (สำหรับงานเบื้องหลังที่มีลำดับความสำคัญต่ำ แม้ว่า React มักจะใช้ scheduler ที่กำหนดเองซึ่งใช้ `MessageChannel` เพื่อการจัดตารางเวลาที่เชื่อถือได้มากขึ้นในสภาพแวดล้อมต่างๆ) ซึ่งช่วยให้ React สามารถคืนการควบคุมกลับไปยังเบราว์เซอร์เมื่อ main thread ว่าง การทำงานแบบ multitasking ที่ร่วมมือกันนี้ช่วยให้มั่นใจได้ว่าการโต้ตอบของผู้ใช้ที่เร่งด่วน (เช่น แอนิเมชันหรือการจัดการอินพุต) จะได้รับความสำคัญเสมอ ส่งผลให้ประสบการณ์ผู้ใช้ราบรื่นขึ้นอย่างเห็นได้ชัดแม้บนอุปกรณ์ที่มีประสิทธิภาพน้อยกว่าหรือภายใต้ภาระงานหนัก

การจัดลำดับความสำคัญและการจัดตารางเวลา (Scheduling)

Fiber นำเสนอระบบการจัดลำดับความสำคัญที่แข็งแกร่ง การอัปเดตประเภทต่างๆ สามารถกำหนดลำดับความสำคัญที่แตกต่างกันได้:

• Immediate/Sync: การอัปเดตที่สำคัญที่ต้องเกิดขึ้นทันที (เช่น event handlers)
• User Blocking: การอัปเดตที่บล็อกการป้อนข้อมูลของผู้ใช้ (เช่น การป้อนข้อความ)
• Normal: การอัปเดตการเรนเดอร์มาตรฐาน
• Low: การอัปเดตที่ไม่สำคัญมากซึ่งสามารถเลื่อนออกไปได้
• Idle: งานเบื้องหลัง

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

Error Boundaries

ความสามารถของ Fiber ในการหยุดพักและกลับมาทำงานเรนเดอร์ต่อยังช่วยให้มีกลไกการจัดการข้อผิดพลาดที่แข็งแกร่งขึ้น: Error Boundaries ซึ่งก็คือคอมโพเนนต์ React ที่ดักจับข้อผิดพลาด JavaScript ที่ใดก็ได้ใน child component tree ของมัน, บันทึกข้อผิดพลาดเหล่านั้น และแสดง UI สำรองแทนที่จะทำให้แอปพลิเคชันทั้งระบบล่ม สิ่งนี้ช่วยเพิ่มความยืดหยุ่นของแอปพลิเคชันอย่างมาก ป้องกันไม่ให้ข้อผิดพลาดของคอมโพเนนต์เดียวมาขัดขวางประสบการณ์ผู้ใช้ทั้งหมดในอุปกรณ์และเบราว์เซอร์ต่างๆ

Suspense และ Asynchronous UI

หนึ่งในฟีเจอร์ที่น่าตื่นเต้นที่สุดที่สร้างขึ้นบนความสามารถด้าน concurrent ของ Fiber คือ Suspense ซึ่งช่วยให้คอมโพเนนต์สามารถ "รอ" บางสิ่งบางอย่างก่อนที่จะเรนเดอร์ โดยทั่วไปคือการดึงข้อมูล, code splitting หรือการโหลดรูปภาพ ในขณะที่คอมโพเนนต์กำลังรอ Suspense สามารถแสดง UI การโหลดสำรอง (เช่น spinner) ได้ เมื่อข้อมูลหรือโค้ดพร้อมแล้ว คอมโพเนนต์ก็จะเรนเดอร์ แนวทางแบบ declarative นี้ช่วยให้รูปแบบ UI แบบ asynchronous ง่ายขึ้นอย่างมาก และช่วยขจัด "loading waterfalls" ที่อาจทำให้ประสบการณ์ผู้ใช้ลดลง โดยเฉพาะสำหรับผู้ใช้บนเครือข่ายที่ช้า

ตัวอย่างเช่น ลองนึกภาพพอร์ทัลข่าวระดับโลก ด้วย Suspense คอมโพเนนต์ `NewsFeed` สามารถ suspend จนกว่าบทความจะถูกดึงข้อมูลมาได้ โดยแสดง skeleton loader ในขณะเดียวกัน คอมโพเนนต์ `AdBanner` ก็สามารถ suspend จนกว่าเนื้อหาโฆษณาจะโหลดเสร็จ โดยแสดง placeholder สิ่งเหล่านี้สามารถโหลดได้อย่างอิสระ และผู้ใช้จะได้รับประสบการณ์ที่ค่อยๆ ปรากฏขึ้นและสะดุดน้อยลง

ผลกระทบในทางปฏิบัติและประโยชน์สำหรับนักพัฒนา

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

• ประสบการณ์ผู้ใช้ที่ราบรื่นขึ้น: ประโยชน์ที่เห็นได้ชัดที่สุดคือ UI ที่ลื่นไหลและตอบสนองได้ดียิ่งขึ้น ผู้ใช้ไม่ว่าจะใช้อุปกรณ์หรือความเร็วอินเทอร์เน็ตใด จะประสบปัญหาการค้างและกระตุกน้อยลง ซึ่งนำไปสู่ความพึงพอใจที่สูงขึ้น
• ประสิทธิภาพที่เพิ่มขึ้น: ด้วยการจัดลำดับความสำคัญและจัดตารางการทำงานอย่างชาญฉลาด Fiber ช่วยให้มั่นใจได้ว่าการอัปเดตที่สำคัญ (เช่น แอนิเมชันหรือการป้อนข้อมูลของผู้ใช้) จะไม่ถูกบล็อกโดยงานที่เร่งด่วนน้อยกว่า ซึ่งนำไปสู่ประสิทธิภาพที่รับรู้ได้ดีขึ้น
• ตรรกะแบบ Asynchronous ที่ง่ายขึ้น: ฟีเจอร์อย่าง Suspense ทำให้วิธีที่นักพัฒนาจัดการสถานะการโหลดและข้อมูลแบบ asynchronous ง่ายขึ้นอย่างมาก นำไปสู่โค้ดที่สะอาดและบำรุงรักษาง่ายขึ้น
• การจัดการข้อผิดพลาดที่แข็งแกร่ง: Error Boundaries ทำให้แอปพลิเคชันมีความยืดหยุ่นมากขึ้น ป้องกันความล้มเหลวร้ายแรง และมอบประสบการณ์การใช้งานที่ลดระดับลงอย่างนุ่มนวล
• การรองรับอนาคต: Fiber เป็นรากฐานสำหรับฟีเจอร์และการเพิ่มประสิทธิภาพในอนาคตของ React ทำให้มั่นใจได้ว่าแอปพลิเคชันที่สร้างขึ้นในวันนี้สามารถนำความสามารถใหม่ๆ มาใช้ได้อย่างง่ายดายเมื่อระบบนิเวศพัฒนาขึ้น

เจาะลึกตรรกะหลักของอัลกอริทึม Reconciliation

เรามาดูตรรกะหลักของวิธีที่ React ระบุการเปลี่ยนแปลงภายใน Fiber tree ในระหว่าง render phase กันสั้นๆ

อัลกอริทึม Diffing และ Heuristics (บทบาทของ `key` Prop)

เมื่อเปรียบเทียบ current Fiber tree กับ work-in-progress tree ใหม่ React จะใช้ชุดของ heuristics สำหรับอัลกอริทึม diffing:

1. ประเภท Element ที่แตกต่างกัน: หาก `type` ของ element เปลี่ยนไป (เช่น `<div>` กลายเป็น `<p>`) React จะรื้อถอนคอมโพเนนต์/element เก่าและสร้างอันใหม่ขึ้นมาตั้งแต่ต้น ซึ่งหมายถึงการทำลาย DOM node เก่าและ children ทั้งหมดของมัน
2. ประเภท Element เดียวกัน: หาก `type` เหมือนกัน React จะดูที่ props มันจะอัปเดตเฉพาะ props ที่เปลี่ยนแปลงบน DOM node ที่มีอยู่เท่านั้น นี่เป็นการดำเนินการที่มีประสิทธิภาพมาก
3. การ Reconcile รายการของ Children (`key` prop): นี่คือจุดที่ `key` prop กลายเป็นสิ่งที่ขาดไม่ได้ เมื่อทำการ reconcile รายการของ children React จะใช้ `keys` เพื่อระบุว่ารายการใดมีการเปลี่ยนแปลง, ถูกเพิ่ม หรือถูกลบ หากไม่มี `keys` React อาจทำการ re-render หรือจัดลำดับ elements ที่มีอยู่ใหม่โดยไม่มีประสิทธิภาพ ซึ่งนำไปสู่ปัญหาด้านประสิทธิภาพหรือ state bugs ภายในรายการ `key` ที่ไม่ซ้ำกันและคงที่ (เช่น ID จากฐานข้อมูล ไม่ใช่ index ของอาร์เรย์) ช่วยให้ React สามารถจับคู่ elements จากรายการเก่าไปยังรายการใหม่ได้อย่างแม่นยำ ทำให้การอัปเดตมีประสิทธิภาพ

การออกแบบของ Fiber ช่วยให้การดำเนินการ diffing เหล่านี้สามารถทำได้ทีละส่วน โดยสามารถหยุดพักได้หากจำเป็น ซึ่งเป็นสิ่งที่ไม่สามารถทำได้ด้วย Stack reconciler แบบเก่า

วิธีที่ Fiber จัดการกับการอัปเดตประเภทต่างๆ

การเปลี่ยนแปลงใดๆ ที่กระตุ้นให้เกิดการ re-render ใน React (เช่น `setState`, `forceUpdate`, การอัปเดต `useState`, การ dispatch ของ `useReducer`) จะเริ่มต้นกระบวนการ reconciliation ใหม่ เมื่อมีการอัปเดตเกิดขึ้น React จะ:

1. จัดตารางการทำงาน (Schedules Work): การอัปเดตจะถูกเพิ่มเข้าไปในคิวพร้อมกับลำดับความสำคัญที่ระบุ
2. เริ่มต้นการทำงาน (Begins Work): Scheduler จะกำหนดว่าจะเริ่มประมวลผลการอัปเดตเมื่อใด โดยพิจารณาจากลำดับความสำคัญและ time slices ที่มีอยู่
3. สำรวจ Fibers (Traverses Fibers): React เริ่มจาก root Fiber (หรือ ancestor ร่วมที่ใกล้ที่สุดของคอมโพเนนต์ที่อัปเดต) และสำรวจลงไป
4. ฟังก์ชัน `beginWork`: สำหรับแต่ละ Fiber, React จะเรียกฟังก์ชัน `beginWork` ฟังก์ชันนี้มีหน้าที่สร้าง child Fibers, reconcile children ที่มีอยู่ และอาจคืนค่าพอยน์เตอร์ไปยัง child ตัวถัดไปที่จะประมวลผล
5. ฟังก์ชัน `completeWork`: เมื่อ children ทั้งหมดของ Fiber ถูกประมวลผลแล้ว React จะ "ทำให้งานเสร็จสิ้น" สำหรับ Fiber นั้นโดยการเรียก `completeWork` นี่คือจุดที่ side effects ถูกทำเครื่องหมาย (เช่น ต้องการการอัปเดต DOM, ต้องการเรียก lifecycle method) ฟังก์ชันนี้จะทำงานย้อนกลับขึ้นไปจาก child ที่ลึกที่สุดกลับไปยัง root
6. การสร้าง Effect List: ขณะที่ `completeWork` ทำงาน มันจะสร้าง "effect list" ซึ่งเป็นรายการของ Fiber ทั้งหมดที่มี side effects ที่ต้องนำไปใช้ใน commit phase
7. Commit: เมื่อ `completeWork` ของ root Fiber เสร็จสิ้น effect list ทั้งหมดจะถูกสำรวจ และการจัดการ DOM จริงและการเรียก lifecycle/effect ขั้นสุดท้ายจะถูกดำเนินการ

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

การเพิ่มประสิทธิภาพโดยคำนึงถึง Fiber

ในขณะที่ Fiber ช่วยปรับปรุงประสิทธิภาพโดยธรรมชาติของ React อย่างมาก นักพัฒนายังคงมีบทบาทสำคัญในการเพิ่มประสิทธิภาพแอปพลิเคชันของตน การทำความเข้าใจการทำงานของ Fiber ช่วยให้มีกลยุทธ์การเพิ่มประสิทธิภาพที่มีข้อมูลมากขึ้น:

• Memoization (`React.memo`, `useMemo`, `useCallback`): เครื่องมือเหล่านี้ช่วยป้องกันการ re-render ที่ไม่จำเป็นของคอมโพเนนต์หรือการคำนวณค่าใหม่โดยการ memoize ผลลัพธ์ของมัน render phase ของ Fiber ยังคงเกี่ยวข้องกับการสำรวจคอมโพเนนต์ แม้ว่าพวกมันจะไม่เปลี่ยนแปลงก็ตาม Memoization ช่วยข้ามงานภายในเฟสนี้ ซึ่งมีความสำคัญอย่างยิ่งสำหรับแอปพลิเคชันขนาดใหญ่ที่ขับเคลื่อนด้วยข้อมูลซึ่งให้บริการฐานผู้ใช้ทั่วโลกซึ่งประสิทธิภาพเป็นสิ่งสำคัญ
• Code Splitting (`React.lazy`, `Suspense`): การใช้ Suspense สำหรับ code splitting ช่วยให้มั่นใจได้ว่าผู้ใช้จะดาวน์โหลดเฉพาะโค้ด JavaScript ที่พวกเขาต้องการในแต่ละช่วงเวลา สิ่งนี้มีความสำคัญอย่างยิ่งในการปรับปรุงเวลาในการโหลดเริ่มต้น โดยเฉพาะสำหรับผู้ใช้ที่มีการเชื่อมต่ออินเทอร์เน็ตที่ช้าในตลาดเกิดใหม่
• Virtualization: สำหรับการแสดงรายการหรือตารางขนาดใหญ่ (เช่น แดชบอร์ดทางการเงินที่มีแถวหลายพันแถว หรือรายชื่อผู้ติดต่อทั่วโลก) ไลบรารี virtualization (เช่น `react-window` หรือ `react-virtualized`) จะเรนเดอร์เฉพาะรายการที่มองเห็นได้ใน viewport เท่านั้น สิ่งนี้ช่วยลดจำนวน Fibers ที่ React ต้องประมวลผลลงอย่างมาก แม้ว่าชุดข้อมูลพื้นฐานจะมีขนาดใหญ่ก็ตาม
• การทำโปรไฟล์ด้วย React DevTools: React DevTools มีความสามารถในการทำโปรไฟล์ที่ทรงพลังซึ่งช่วยให้คุณเห็นภาพกระบวนการ reconciliation ของ Fiber คุณสามารถดูได้ว่าคอมโพเนนต์ใดกำลังเรนเดอร์ แต่ละเฟสใช้เวลานานเท่าใด และระบุคอขวดของประสิทธิภาพได้ นี่เป็นเครื่องมือที่ขาดไม่ได้สำหรับการดีบักและเพิ่มประสิทธิภาพ UI ที่ซับซ้อน
• หลีกเลี่ยงการเปลี่ยนแปลง Prop ที่ไม่จำเป็น: ระมัดระวังในการส่ง object หรือ array literal ใหม่เป็น props ในทุกๆ การเรนเดอร์ หากเนื้อหาของมันไม่ได้เปลี่ยนแปลงในเชิงความหมาย สิ่งนี้สามารถกระตุ้นให้เกิดการ re-render ที่ไม่จำเป็นใน child components แม้จะใช้ `React.memo` ก็ตาม เนื่องจากการอ้างอิงใหม่จะถูกมองว่าเป็นการเปลี่ยนแปลง

มองไปข้างหน้า: อนาคตของ React และฟีเจอร์ Concurrent

Fiber ไม่ใช่แค่ความสำเร็จในอดีต แต่เป็นรากฐานสำหรับอนาคตของ React ทีมงาน React ยังคงสร้างสรรค์บนสถาปัตยกรรมนี้เพื่อส่งมอบฟีเจอร์ใหม่ที่ทรงพลัง ผลักดันขอบเขตของสิ่งที่เป็นไปได้ในการพัฒนาเว็บ UI ต่อไป:

• React Server Components (RSC): แม้ว่าจะไม่ใช่ส่วนหนึ่งของ reconciliation ฝั่ง client ของ Fiber โดยตรง แต่ RSC ใช้ประโยชน์จากโมเดลคอมโพเนนต์เพื่อเรนเดอร์คอมโพเนนต์บนเซิร์ฟเวอร์และสตรีมไปยัง client สิ่งนี้สามารถปรับปรุงเวลาในการโหลดหน้าเริ่มต้นและลดขนาด JavaScript bundle ฝั่ง client ได้อย่างมาก ซึ่งเป็นประโยชน์อย่างยิ่งสำหรับแอปพลิเคชันระดับโลกที่ความหน่วงของเครือข่ายและขนาด bundle อาจแตกต่างกันอย่างมาก
• Offscreen API: API ที่กำลังจะมาถึงนี้ช่วยให้ React สามารถเรนเดอร์คอมโพเนนต์นอกจอได้โดยไม่ส่งผลกระทบต่อประสิทธิภาพของ UI ที่มองเห็นได้ มีประโยชน์สำหรับสถานการณ์เช่นอินเทอร์เฟซแบบแท็บที่คุณต้องการให้แท็บที่ไม่ใช้งานยังคงเรนเดอร์อยู่ (และอาจจะ pre-render ไว้) แต่ไม่แสดงผล เพื่อให้แน่ใจว่าจะมีการเปลี่ยนที่รวดเร็วทันทีเมื่อผู้ใช้สลับแท็บ
• รูปแบบ Suspense ที่ปรับปรุงแล้ว: ระบบนิเวศรอบๆ Suspense มีการพัฒนาอย่างต่อเนื่อง โดยมีวิธีการที่ซับซ้อนมากขึ้นในการจัดการสถานะการโหลด, การเปลี่ยนผ่าน และการเรนเดอร์แบบ concurrent สำหรับสถานการณ์ UI ที่ซับซ้อนยิ่งขึ้น

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

สรุป: การเรียนรู้ Modern React อย่างเชี่ยวชาญ

React Fiber แสดงถึงความพยายามทางวิศวกรรมครั้งยิ่งใหญ่ที่เปลี่ยน React จากไลบรารีที่ทรงพลังให้กลายเป็นแพลตฟอร์มที่ยืดหยุ่นและรองรับอนาคตสำหรับการสร้าง UI สมัยใหม่ ด้วยการแยกงานเรนเดอร์ออกจาก commit phase และนำเสนอความสามารถในการหยุดชะงัก Fiber ได้วางรากฐานสำหรับยุคใหม่ของฟีเจอร์ concurrent ซึ่งนำไปสู่แอปพลิเคชันเว็บที่ราบรื่น, ตอบสนองได้ดี และยืดหยุ่นมากขึ้น

สำหรับนักพัฒนา การทำความเข้าใจ Fiber อย่างลึกซึ้งไม่ใช่แค่การศึกษาเชิงทฤษฎี แต่เป็นข้อได้เปรียบเชิงกลยุทธ์ มันช่วยให้คุณสามารถเขียนโค้ดที่มีประสิทธิภาพมากขึ้น, วินิจฉัยปัญหาได้อย่างมีประสิทธิภาพ และใช้ประโยชน์จากฟีเจอร์ที่ล้ำสมัยซึ่งมอบประสบการณ์ผู้ใช้ที่เหนือชั้นทั่วโลก ในขณะที่คุณสร้างและเพิ่มประสิทธิภาพแอปพลิเคชัน React ของคุณต่อไป โปรดจำไว้ว่าหัวใจหลักของมันคือการทำงานที่ซับซ้อนของ Fibers ที่ทำให้เวทมนตร์เกิดขึ้น ทำให้ UI ของคุณตอบสนองได้อย่างรวดเร็วและราบรื่น ไม่ว่าผู้ใช้ของคุณจะอยู่ที่ใด