รู้จักกับ Design Patternsใน React
Design Patterns คือรูปในการแก้ปัญหาของการพัฒนาซอฟต์แวร์ที่นักพัฒนาจะเจอปัญหาเหล่านั้นเป็นประจำจนกระทั่งมีคนหรือกลุ่มคนที่รวมกลุ่มกันสร้างสิ่งที่เรียกว่า พิมพ์เขียวหรือ blueprint เพื่อนำรูปแบบของการแก้ปัญหานั้น ๆ มาใช้ในการแก้ปัญหาการพัฒนาซอฟต์แวร์ของเรา
Design Patterns ใน React
โดยปรกติ Design Pattern นั้นจะไม่ได้โฟกัสไปที่ภาษาใดภาษาหนึ่งเป็นหลัก หากแต่เป็นแค่พิมพ์เขียวที่เราสามารถนำไป implement ได้ไม่ว่าจะด้วยภาษาใดก็ตาม เช่นเดียวกับ ECMAScript Specification ที่เป็นสเปคที่ระบุไว้ในกระดาษจากนั้น JavaScript จึงค่อย ๆ เพิ่มความสามารถตามเข้าไปตามที่ระบุไว้
Design Patterns ใน React นั้นจะมุ่งเน้นไปที่การแก้ปัญหาของการพัฒนาแอพพลิเคชันโดยใช้ชุดเครื่องมือที่อยู่ในตัว Library นั้นเอง หรือเครื่องมือที่ถูกสร้างขึ้นมาเพื่อแก้ปัญหา โดยในแต่ละ Framework/Library จะมีรูปแบบในการเขียน การแก้ปัญหาที่ต่างกัน
ในมุมของนักพัฒนาเราจำเป็นที่จะต้องเข้าใจรูปแบบในการแก้ปัญหาเหล่านี้เพราะนอกจากจะทำให้ไม่ต้องเสียเวลาในการแก้ไขปัญหาเดิมที่มีอยู่แล้ว ยังทำให้เราสามารถสร้างแอพพลิเคชันที่ยืดหยุ่นรองรับการเพิ่ม-ลดฟีเจอร์ใหม่โดยที่ไม่เจ็บปวดถึงตาย ท่านใดเคยเขียน React มาก่อนโดยอยู่สมัยที่ยังไม่มี React Hooks นั้นท่านอาจจะคิดถึงรูปแบบดังนี้
- Presentational/Container Component Pattern
- Component Composition Pattern
- Higher Order Component
หลังจากที่ React Hooks โลกทั้งใบก็กลายเป็นสีชมพูยูนิคอร์นที่ทำให้ชีวิตของนักพัฒนาดีขึ้นจึงได้เกิดรูปแบบที่นำเอาความสามารถของ Hooks ทำให้ชีวิตง่ายเยอะขึ้น ยกตัวอย่างรูปแบบที่อาจจะเคยได้เห็นกันมาบ้างคือ
- Context Module Function Pattern
- Compound Components Pattern
- Flexible Compound Components Pattern
- Props Collections and Getters Pattern
- State Reducer Pattern
- Control Props Pattern
สำหรับบทความนี้แค่เกริ่นก่อนครับว่าในบทความถัดไปจะมี Pattern อะไรบ้างให้เห็นภาพรวมไว้ก่อน ถ้ามีโอกาสจะนำมาเขียนให้อ่านรูปแบบที่มีอยู่ในยุคก่อนหน้าจนถึงยุคปัจจุบันที่ Hooks ได้เข้ามาช่วยแก้ปัญหาและทำให้ชีวิตนักพัฒนาดีขึ้น สำหรับบล็อกนี้เอาไว้แค่นี้ก่อน … สวัสดี
