จากบทความเรื่อง Why hooks are the best thing to happen to React ?
จาก StackOverflow อธิบายเรื่องของ React Hooks ได้อย่างน่าสนใจ
ว่าการพัฒนาระบบงานด้วย React มีหลายแบบ
ทำให้การเปลี่ยนหรือย้ายไปมาทั้ง class และ functional component
เป็นเรื่องที่ไม่ง่ายเลย
ดังนั้นจึงเป็นที่มาของการสร้าง React Hooks
เพื่อให้ง่ายต่อการพัฒนา รวมทั้งการเปลี่ยนไปใช้งาน functional component อีกด้วย
โดยถ้าใครเริ่มด้วย class component
น่าจะต้องมาเรียนรู้เรื่องของ Life cycle ของ React ก่อน
ทั้งการเพิ่มหรือแก้ไขข้อมูลใน DOM ว่าเป็นอย่างไร
จะทำการ mount และ unmount อย่างไร
ทั้งการจัดการ render เมื่อข้อมูลเปลี่ยนแปลง
แน่นอนว่า การจะทำความเข้าใจไม่ง่ายเลย !!
แสดงดังรูป
ดังนั้นจึงสร้าง Hooks ขึ้นมาให้ใช้งาน แต่ต้องใช้งานกับ functional component เท่านั้น
เช่นมี useState และ useEffect ขึ้นมาใน Hooks
แน่นอนว่ายังมี Hooks อื่น ๆ ให้ศึกษาและใช้งานอีกเพียบ เช่น
- useContext
- useRef
- useReducer
- useMemo
- useCallback
เพื่อให้ง่ายต่อการใช้งาน
ยกตัวอย่าง code ของ Hooks
เป็นการดึงข้อมูลจาก API ด้วย axios library
จากนั้นเอาค่ามาแสดงผล
แน่นอนว่า หลาย ๆ คนอาจจะบอกว่า มันคือ magic ที่ซ่อนความซับซ้อนเอาไว้ เช่นกัน
แต่ถ้าใช้ class component แล้ว ต้องมาจัดการผ่าน method ต่าง ๆ ของ class ดังนี้
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
แต่ใน Hooks ใช้เพียง useEffect ก็พอ
รวมทั้งข้อมูลการตั้งคำถามเกี่ยวกับ React ใน StackOverflow ก็เพิ่มในทุก ๆ ปี
นั่นน่าจะแสดงให้เห็นอย่างชัดเจนว่า
การพัฒนาด้วย React มีความนิยม
พร้อมกับปัญหาของการพัฒนาที่เยอะด้วย
ซึ่งตรงข้ามกับ Angular เลย !!
ดังนั้น React Hooks น่าจะเข้ามาช่วยให้การพัฒนา React ง่ายและสะดวกขึ้น
แต่เรื่องของ class component ก็ยังคงสำคัญเช่นกัน
ส่วน functional component + Hooks ก็เข้ามาเติมเต็มสิ่งที่ขาดหายไป
หรือใช้งาน functional component โดยไม่ต้องใช้ Hooks ก็ได้
ถ้าเราต้องการในเรื่องของ หน้าที่การทำงานที่ง่าย
เรื่องการ reuse และความยืดหยุ่นของ code
ขอให้สนุกกับการเขียน code ครับ
