หลังที่ช่วงนี้แบ่งปันเรื่อง การพัฒนา Frontend app ด้วย React นิดหน่อย
พบว่ามีหลายอย่างเปลี่ยนไปและน่าสนใจมากยิ่งขึ้น
แต่ก็พบว่า เรื่องพื้นฐานยังคงสำคัญ
จึงทำการสรุปสิ่งที่แบ่งปันไว้นิดหน่อย
เริ่มจากแนวคิดการแบ่งส่วนทำงานเป็น Component
นั่นคือ UI ในแต่ละหน้าจะแบ่งเป็น component ย่อย ๆ
จากนั้นก็นำมารวมกัน หรือ composition เพื่อทำงานตามที่ต้องการ
รูปแบบของ component เป็นดังนี้
โดยที่ class HelloComponent นั้น
จะทำการซ่อนส่วนของการแสดงผลไว้ภายใน
ผ่าน method ชื่อว่า render() ซึ่งเป็น method จาก React Component
นี่มันโลกของ Object-Oriented ชัด ๆ
React component ทุก ๆ ตัวจะต้องมีส่วนของการ render
หรือส่ง output ออกมาเสมอ
แต่สามารถสร้าง Component ในรูปแบบของ function ได้
จากตัวอย่างพบว่า
การสร้าง component ด้วย function นั้น
จะสั้นกระชับ และ สะดวกกว่ามาก
โดยที่ยังทำงานเหมือนกับ Component class
แต่ในรายละเอียดมีความแตกต่างกัน
อ่านเพิ่มเติมได้ที่ blog :: How Are Function Components Different from Classes?
ทั้ง Class และ function component ยังคงส่งข้อมูลระหว่าง component ผ่าน props ได้เหมือนกัน
โดยที่ข้อมูลใน props นั้น สามารถอ่านได้อย่างเดียว
ไม่สามารถทำการแก้ไขได้ (Immutable)
ซึ่งความสามารถนี้ ป้องกัน side effect หรือผลกระทบจากการแก้ไขข้อมูลได้สบาย ๆ
ส่วนการส่งข้อมูลระหว่าง component หรือ Data flow ก็เป็นแบบทางเดียว (Unidirectional data flow)
หรือเป็นการส่งข้อมูลทางเดียว จากบนลงล่างเท่านั้น
ต่อมาเรื่องของ Higher-Order Component (HOC)
เป็นอีกรูปแบบหนึ่งที่ได้รับความนิยมจากเหล่า React developer
เพื่อง่ายต่อการ reuse component
เราสามารถส่ง component เข้าไปยัง compoenent หนึ่งได้
เหมือนกับการส่ง parameter ไปยัง function หนึ่ง ๆ นั่นเอง
รูปแบบของ HOC เป็นดังนี้
แต่เพื่อให้เป็น Higher-Order Function (HOF)
เปลี่ยน class มาเป็น function ได้ดังนี้
ตอนต่อไปว่าด้วยเรื่องของ Hooks
ซึ่งช่วยทำให้หลายสิ่งอย่างง่ายขึ้น
ทั้งการจัดการ state และ life cycle ของ component
รวมทั้งทำงานร่วมกับ Function component ได้สะดวกอีกด้วย
แต่จาก web ของ React ไม่แนะนำให้ migrate มาทั้งหมด
แต่บอกให้ค่อย ๆ ทำไปตามความเหมาะสม
เนื่องจาก Hooks ยังเป็นของใหม่ และ ไม่มีแนวทางที่ดีมากนัก
จำเป็นต้องศึกษาและใช้งานกันต่อไป
