Hooks เป็นฟีเจอร์ใหม่ที่มาพร้อมกับ React เวอร์ชัน 16.8 เพื่อให้เราสามารถใช้งาน state และเรียกใช้ features ต่างๆ ของ React ได้ โดยที่ไม่ต้องเขียนแบบ class component ยกตัวอย่าง เช่น เราสามารถใช้ useEffect แทน componentDidMount ได้ เป็นต้น
.
ส่วนคนที่เขียน React Native ก็เขียนได้เลยนะ แต่ต้องเป็นเวอร์ชัน 0.59 ขึ้นไปครับ
.
1. แนะนำให้เขียน React Hooks สำหรับโปรเจคใหม่เลย (ในหลักสูตรใหม่ที่ผมจะเปิดสอนจะพาเขียน Hooks เป็นหลักทั้งหมดครับ แต่จะพูดถึง class component ด้วยเช่นกัน) ถ้าโปรเจคเดิมใช้แบบ class component อยู่ก็ไม่ต้องตามแก้เป็น Hooks นะครับ ใช้ของเดิมได้เลย เพราะไม่มีแผนที่จะเอา class component ออกจาก React อยู่แล้ว
.
2. ทำไมเราต้องเปลี่ยนมาเขียน Hooks ด้วย เพราะช่วยป้องกันและแก้ไขปัญหาต่างๆ เช่น
– ถ้า component เรามีขนาดใหญ่ จะทำให้การ refactor และ test โค้ดต่างๆเป็นไปได้ยาก
– แก้ปัญหาเรื่อง Logic หรือ Lifecycle ซ้ำๆ กันระหว่างแต่ละ Component
– และหากเราใช้ Pattern เช่นพวก HOC หรือ render props ที่มีความซับซ้อน จะยากมากๆ ต่อการ debug ครับ และที่สำคัญอีกอย่างคือ การเขียน Hooks ทำให้ขนาดไฟล์เราเล็กลงด้วยนะ
.
3. กฏของการเขียน Hooks มี 2 ข้อ ได้แก่ ให้เขียนและใช้ Hooks ที่ top level เท่านั้น อย่าเขียนใน loops, conditions หรือ nested functions และ ต้องเขียนเป็น function component ของ React เท่านั้นนะ ห้ามเขียนในฟังก์ชันของ javascript ปกติ ยกเว้นจะเขียน custom Hooks ครับ
.
4. สำหรับคนที่ใช้ React Router และ React Redux อยู่ ตอนนี้ก็รองรับ Hooks แล้วนะครับ และคนที่ใช้ GraphQL และ Apollo ก็เขียนได้แล้ว ลองเปลี่ยนมาเขียนได้เลยนะ
.
ใครสนใจศึกษา React Hooks ก็ตามไปดูได้นะ => https://reactjs.org/docs/hooks-intro.html
ไว้มีโอกาสจะมาเขียนให้อ่านกันอีกครับ
.
โค้ชเอก
Views: 5815