สรุปการแบ่งปันเรื่อง React ไว้นิดหน่อย

หลังที่ช่วงนี้แบ่งปันเรื่อง การพัฒนา Frontend app ด้วย React นิดหน่อย
พบว่ามีหลายอย่างเปลี่ยนไปและน่าสนใจมากยิ่งขึ้น
แต่ก็พบว่า เรื่องพื้นฐานยังคงสำคัญ
จึงทำการสรุปสิ่งที่แบ่งปันไว้นิดหน่อย

เริ่มจากแนวคิดการแบ่งส่วนทำงานเป็น Component

นั่นคือ UI ในแต่ละหน้าจะแบ่งเป็น component ย่อย ๆ
จากนั้นก็นำมารวมกัน หรือ composition เพื่อทำงานตามที่ต้องการ 
รูปแบบของ component เป็นดังนี้

[gist id="750211ed51fee1d198a8c4ccc5ffb31a" file="1.js"]

โดยที่ class HelloComponent นั้น
จะทำการซ่อนส่วนของการแสดงผลไว้ภายใน
ผ่าน method ชื่อว่า render() ซึ่งเป็น method จาก React Component
นี่มันโลกของ Object-Oriented ชัด ๆ

React component ทุก ๆ ตัวจะต้องมีส่วนของการ render
หรือส่ง output ออกมาเสมอ

แต่สามารถสร้าง Component ในรูปแบบของ function ได้

[gist id="750211ed51fee1d198a8c4ccc5ffb31a" file="2.js"]

จากตัวอย่างพบว่า
การสร้าง 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)
หรือเป็นการส่งข้อมูลทางเดียว จากบนลงล่างเท่านั้น

[gist id="750211ed51fee1d198a8c4ccc5ffb31a" file="3.js"]

ต่อมาเรื่องของ Higher-Order Component (HOC)

เป็นอีกรูปแบบหนึ่งที่ได้รับความนิยมจากเหล่า React developer
เพื่อง่ายต่อการ reuse component 
เราสามารถส่ง component เข้าไปยัง compoenent หนึ่งได้
เหมือนกับการส่ง parameter ไปยัง function หนึ่ง ๆ นั่นเอง

รูปแบบของ HOC เป็นดังนี้

[gist id="750211ed51fee1d198a8c4ccc5ffb31a" file="4.js"]

  แต่เพื่อให้เป็น Higher-Order Function (HOF)

เปลี่ยน class มาเป็น function ได้ดังนี้

[gist id="750211ed51fee1d198a8c4ccc5ffb31a" file="5.js"]

ตอนต่อไปว่าด้วยเรื่องของ Hooks

ซึ่งช่วยทำให้หลายสิ่งอย่างง่ายขึ้น
ทั้งการจัดการ state และ life cycle ของ component
รวมทั้งทำงานร่วมกับ Function component ได้สะดวกอีกด้วย

แต่จาก web ของ React ไม่แนะนำให้ migrate มาทั้งหมด
แต่บอกให้ค่อย ๆ ทำไปตามความเหมาะสม
เนื่องจาก Hooks ยังเป็นของใหม่ และ ไม่มีแนวทางที่ดีมากนัก
จำเป็นต้องศึกษาและใช้งานกันต่อไป