React ทำงานอย่างไร?

React เป็นไลบรารี JavaScript ที่ใช้สร้าง User Interface (UI) หรือส่วนที่ผู้ใช้มองเห็นและโต้ตอบได้บนเว็บไซต์หรือแอปพลิเคชัน การทำงานหลักๆ ของ React สามารถอธิบายให้เข้าใจง่ายๆ ดังนี้:

1. Components: ตัวต่อเลโก้ของ UI

หัวใจสำคัญของ React คือ Components ลองนึกภาพว่า UI ของเราเหมือนตัวต่อเลโก้ Components ก็คือชิ้นส่วนเลโก้แต่ละชิ้นที่เรานำมาประกอบกันเป็นหน้าเว็บ เช่น ปุ่ม (Button), กล่องข้อความ (Input Field), หรือแม้กระทั่งส่วนใหญ่ๆ อย่างแถบเมนู (Navbar) หรือรายการสินค้า (Product List)

• Reusable: Components สามารถนำกลับมาใช้ซ้ำได้หลายๆ ที่ในแอปพลิเคชัน ทำให้โค้ดกระชับและจัดการง่าย
• Independent: แต่ละ Component ทำงานเป็นอิสระต่อกัน ทำให้แก้ไขและทดสอบได้ง่ายขึ้น

2. Virtual DOM: แบบร่าง UI ในหน่วยความจำ

ปกติเวลาข้อมูลในหน้าเว็บมีการเปลี่ยนแปลง เว็บเบราว์เซอร์จะต้องวาดหน้าเว็บใหม่ทั้งหมด ซึ่งอาจจะช้าถ้าหน้าเว็บมีความซับซ้อน React แก้ปัญหานี้ด้วย Virtual DOM

• DOM (Document Object Model): คือโครงสร้างของหน้าเว็บที่เบราว์เซอร์ใช้แสดงผล
• Virtual DOM: เป็นเหมือน สำเนา หรือ แบบร่าง ของ DOM จริงๆ ที่เก็บไว้ในหน่วยความจำของ JavaScript มันเบาและเร็วกว่า DOM จริงมาก

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

1. เมื่อ State เปลี่ยน: เมื่อข้อมูลใน Component เปลี่ยนแปลง (เรียกว่า State เปลี่ยน) React จะสร้าง Virtual DOM อันใหม่ขึ้นมา
2. เปรียบเทียบ: React จะเปรียบเทียบ Virtual DOM อันใหม่ กับ Virtual DOM อันเก่า (ที่เหมือนกับ DOM จริงในตอนนั้น) เพื่อหาว่ามี อะไรที่แตกต่างกันบ้าง
3. อัปเดตเฉพาะส่วน: React จะไม่อัปเดต DOM จริงทั้งหมด แต่จะอัปเดต เฉพาะส่วนที่เปลี่ยนแปลงจริงๆ เท่านั้น

3. Reconciliation: กระบวนการเทียบและอัปเดต

กระบวนการที่ React ใช้เปรียบเทียบ Virtual DOM เก่าและใหม่ แล้วอัปเดตเฉพาะส่วนที่เปลี่ยนไปใน DOM จริง เรียกว่า Reconciliation นี่คือสิ่งที่ทำให้ React ทำงานได้เร็วและมีประสิทธิภาพ

แผนภาพสรุปการทำงาน

อธิบายแผนภาพ:

1. User Interaction / Data Change: เริ่มต้นเมื่อผู้ใช้ทำอะไรบางอย่าง (เช่น คลิกปุ่ม) หรือมีข้อมูลใหม่เข้ามา
2. State Update in Component: ทำให้ State ของ Component ใน React เปลี่ยนแปลง
3. React Creates New Virtual DOM: React สร้าง Virtual DOM ชุดใหม่ตาม State ที่เปลี่ยนไป
4. Diffing Algorithm (Reconciliation): React เปรียบเทียบ Virtual DOM ใหม่กับเก่า หาจุดต่าง
5. Update Real DOM: ถ้ามีจุดต่าง React จะไปแก้ไข DOM จริงเฉพาะส่วนนั้น
6. Real DOM Unchanged: ถ้าไม่มีอะไรต่าง ก็ไม่ต้องทำอะไรกับ DOM จริง
7. UI Updated on Screen: ผู้ใช้เห็นหน้าเว็บที่อัปเดตแล้ว

หวังว่าคำอธิบายและแผนภาพนี้จะช่วยให้เห็นภาพการทำงานของ React ชัดเจนขึ้นนะครับ!