เรื่องโง่ๆ วันละ 3 นาที กับการ Handle event in React

ผมเชื่อว่าคนที่เริ่มต้นเขียน React ใหม่ๆจะมีข้อสงสัยเกี่ยวกับการ Handle events ใน react ว่าเห้ยเราจะต้องเขียนอย่างไร หรือบางทีก็ไม่เข้าใจว่าทำไมมันเขียนได้หลายแบบเหลือเกิน ทำไมต้องเขียนเเบบนั้น ยิ่งคนที่เริ่มเขียน Javascript ใหม่ๆจะงงเป็นพิเศษ ซึ่งหลังจากอ่านบทความนี้จบจะช่วยให้ความสงสัยของคุณหายไป ( มั้ง ผมหวังเช่นนั้น )

เอาละ เรามาเริ่มกันที่ตัวอย่างง่ายๆ สมมติเราต้องการสร้าง input ที่เมื่อมีการเปลี่ยนแปลงค่าจะทำการ console.log อะไรสักอย่างออกมา เราก็จะได้ code ออกมาหน้าตาประมาณนี้

คำถามคือเราจะนำเมธอด handleChange ที่เราสร้างขึ้นมาไว้ด้านบน 
ใส่ลงไปใน onChange ซึ่งเป็น property ของเราอย่างไร บางคนก็จะตอบว่าก็ใส่ไปดื้อๆเลยสิจะไปยากอะไร

onChange = { this.handleChange }

ซึ่งเป็นคำตอบที่ผิดครับ ถ้าเราอยากให้มันทำงานได้ถูกต้องเราต้องทำการ bind ค่า this จาก function มาสู่ class ของเราด้วย ทำให้ได้ code ออกมาหน้าตาเช่นนี้

ซึ่งหากเราอยากนำมันไปใช้หลายๆ ครั้งก็ให้ทำการประกาศตัวแปรไว้ด้านบนแบบนี้

เเต่มันยังไม่จบเพียงเท่านั้นเพราะบางคนก็บอกว่า เอ๊ะ เเต่เราเห็นมันเขียนเเบบนี้ได้ด้วยนะ

ซึ่งตัวอย่างดังด้านบนจะให้ผลการทำงานถูกต้องเหมือนกับตัวอย่างก่อนหน้านี้ครับ
เพราะ จาก code เราได้ทำการสร้าง Anonymous Function ซึ่งจะทำการ bind ค่าของ this ให้เราโดยอัตโนมัติ

หลังจากที่อ่านมาถึงจุดนี้ ผมอยากจะบอกทุกคนครับ ว่าวิธีที่ผ่านมาทั้งหมดเป็นวิธีที่ไม่สมควรทำ ( อ้าว ! หลอกให้อ่านตั้งนาน ) ซึ่งสาเหตุที่ไม่ควรทำเพราะ

การทำเช่นนี้จะทำให้ฟังก์ชัน handleChange ที่เราประกาศไว้ด้านบนนั้นจะถูกสร้างขึ้นใหม่ทุกครั้งเมื่อ React ทำการ render หรือ re-render ซึ่งส่งผลให้ performance แย่ลง
( ซึ่งจะมาอธิบายเบื้องลึกในภายหลัง )
ทีนี้ก็มาที่คำถามว่า เอ ~สรุปแล้วเราควรเขียนแบบไหนกันละ ??
http://www.bitrebels.com/geek/understoodit-classroom-app-press-red-button-if-youre-confused/

จริงๆเเล้วเราสามารถแก้ปัญหานี้ได้หลายวิธี แต่ในที่นี้จะขอนำวิธีที่คนนิยมใช้ที่สุดมา 2 วิธีด้วยกัน คือ

  1. เอามันใส่ลงไปใน constructor
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
}
render(){
return(
<input onChange = {this.handleChange}/>
)
}

( โดยส่วนตัวผมชื่นชอบวิธีนี้เพราะ เวลามาดูที่ constructor จะทำให้รู้เลยว่าใน component นี้มีฟังก์ชันอะไรอยู่บ้าง )

2. ใช้ Arrow function ตอนสร้าง Class

handleChange = () => {
console.log('');
};
render(){
return(
<input onChange = {this.handleChange}/>
)
}

วิธีนี้จะทำให้ code ของเราดู clean มากขึ้น แต่เราจำเป็นที่จะต้อง enable transform-class-properties หรือไม่เช่นนั้นก็ต้องทำการลง babel เนื่องจากวิธีการเขียนเเบบนี้นั้นยังไม่ถูกรวมลงใน ES6,ES7,ES8

ก็จบกันไปเรียบร้อยกับการ handle event in React ซึ่งเพื่อนๆสามารถเลือกใช้วิธีที่ตัวเองถนัดได้เลยครับ ซึ่งหาก Application ของเราไม่ได้กังวลเรื่อง performance มากนักก็สามารถเขียนด้วยวิธีเดิม ( แบบเเรกๆ ) ได้ครับผม

หากมีอะไรผิดพลาดก็ต้องขออภัยมา ณ ที่นี้ด้วยครับ ขอบคุณครับ