เพิ่งทำการสอนและ review ระบที่พัฒนาด้วย React
พบว่ามีข้อผิดพลาดบางอย่างที่มักเกิดขึ้นกับทุก ๆ ระบบ
ซึ่งบ่อยครั้งมันทำงานได้ปกติ แต่ยากต่อการดูแลรักษา
หรือยากต่อการทำความเข้าใจ
จึงสรุปไว้นิดหน่อย
เรื่องแรกคือ การออกแบบและสร้าง component
โดย React นั้นจะยึดตามแนวทางของ Web component
คือแยกการทำงานเป็น component ไป
ซึ่งเลือกพัฒนาได้ทั้ง Class และ function component
แต่ปัจจุบันน่าจะเป็น function component + Hook กันเป็นส่วนใหญ่
ปัญหาที่พบบ่อย ๆ คือ component จะมีขนาดใหญ่
มีหน้าที่รับผิดชอบหรือทำงานเยอะ
แน่นอนว่า ทำงานได้ปกติ และ ตรงตามที่ต้องการ
แต่เมื่อกลับมาแก้ไขหรือหาข้อผิดพลาด
กลับทำให้เสียเวลามากยิ่งขึ้น
ดังนั้นแนวทางที่น่าจะดีกว่าคือ
การแบ่งเป็น component เล็ก ๆ ตามหน้าที่รับผิดชอบ
แต่ไม่ใช่ว่าจะเล็กมากเกินไป ทำให้ยากกว่าเดิมไปอีก
ยิ่งถ้าใครสร้างแบบ function component แล้ว
จะพบว่า มันเอื้อให้ component มีขนาดเล็กลง
ระวัง God component ไว้ให้มาก ๆ
เรื่องที่สอง อย่าทำการแก้ไข state ของ component ตรง ๆ
ให้ใช้ผ่าน method setState() หรือ useState() ของ Hook
ซึ่งจะทำให้เรามั่นใจได้ว่า
ถ้าเปลี่ยน state ผ่านทั้งสองทางแล้วReact
จะทำการ re-render DOM ให้แบบอัตโนมัติและถูกต้อง
แต่อย่าลืมว่าจะทำงานแบบ asynchronous ด้วยนะ
นั่นคือ จะไม่ได้เปลี่ยนและ re-render ทันทีดังนั้น
- ใช้งาน setState() ต้องทำงานร่วมกับ callback ด้วย
- ใช้งาน useState() ต้องทำงานร่วมกับ useEffect() ด้วย
เรื่องที่สาม ในการจัดการ state แบบ Global
แนะนำให้เริ่มจาก Hook context
ก่อนที่จะไปใช้ตัวอื่น ๆ เช่น Redux เป็นต้น
เรื่องอื่น ๆ ที่สำคัญ เช่น
- project structure ที่เหมาะสมกับงาน บางครั้ง project เล็ก ๆ ก็ออกแบบซะเยอะและซับซ้อนไป
- การทดสอบตั้งแต่ unit, component, integration และ end-to-end
- รูปแบบของการตั้งชื่อ
- performance ในการ render และการทำงาน
