React.js #03 Hooks

จากบทความที่แล้ว React.js #02 เราได้รู้จักและรู้วิธีการสร้าง React Component และการใช้งาน Props กันไปแล้ว ในบทความนี้จะมาพูดถึงการเก็บค่าต่างๆใน Component กัน

State

เป็นตัวแปรตัวนึงที่เก็บข้อมูลภายใน Component คล้ายๆกับ Props แต่ State สามารถเปลี่ยนแปลงค่าได้ระหว่างการทำงานของระบบ เดิมการเขียน State ต้องเขียนภายใน Class Component และมีการเขียนที่ค่อนข้างยุ่งยาก React ในเวอร์ชั่นใหม่ๆ จึงมีฟีเจอร์เข้ามาช่วยให้เขียนง่ายขึ้น

React Hooks

เป็นฟีเจอร์ใหม่ใน React 16.8 ใช้สำหรับจัดการ State โดยไม่ต้องเขียนใน Class Component แต่จะเขียนในรูปแบบ Function Component แทน

เงื่อนไขการใช้งาน React Hooks

• เขียนในรูปแบบ Function Component เท่านั้น
• เขียนในส่วนของ Top Level ของ Function เท่านั้น

ใน React Hooks นั้นมี function ให้เราใช้งานอยู่หลายตัว ในเราบทความนี้เราจะมาพูดถึง useState และ useEffect กันครับ

useState

const [state, setState] = useState(initialState)

รูปแบบการใช้งาน useState จะ return ค่าเป็น array ตัวแรกคือ ชื่อ state และ ตัวสอง setStateคือชื่อ function และ initialState คือค่าเริ่มต้นของ state

Example React Hooks useState

จากตัวอย่างชุดคำสั่ง เป็นการใช้ useState ในการเก็บค่าของจำนวนคลิก โดยการกำหนด State ในตัวแปร count และสร้าง function setCount ไว้อัพเดทค่า State โดยกำหนดค่าเริ่มต้นเป็น 0

Example React Hooks Many useState

ในหนึ่ง Component เราสามารถสร้าง State ได้หลายค่า หรือ ในหนึ่ง State เราสามารถเก็บค่าในรูปแบบ object หรือ array ได้เช่นกัน

useEffect

เป็น function ที่ใช้ในการควบคุม Life Cycle ของ Component ตั้งแต่ Mounted > Updated > Unmounting

useEffect(() => {},[])

รูปแบบการใช้งาน useEffect() จะรับ argument สองค่าคือ function และ dependency list ที่อยู่ในรูปแบบของ array[]

การทำงานของ useEffect() จะเริ่มทำงานตั้งแต่ Component นั้นเริ่ม Mounted และจะทำงานอีกครั้งเมื่อค่าที่เรากำหนดไว้ใน dependency list นั้นมีการเปลี่ยนแปลง แต่ถ้าไม่มีการกำหนด dependency list จะทำงานทุกครั้งที่มีการเปลี่ยนแปลงค่าใน Component

Example React Hooks useEffect

จากชุดคำสั่งตัวอย่างเป็นการใช้ useEffect() ให้ log ข้อความออกมา โดยข้อความจะแสดงในครั้งแรกที่ Component โดน Mounted สำเร็จ คือ Hello และ useEffect() จะทำงานใหม่ทุกครั้งที่ค่า State มีการเปลี่ยนแปลงเพราะตัว useEffect() ไม่ได้ทำการกำหนด dependency list ไว้

Example React Hooks useEffect Set Dependency List

จากชุดคำสั่งความต่างจากชุดคำสั่งแรกตรงที่ useEffect() กำหนด dependency list เป็น [firstName] ทำให้ useEffect() จะทำงานตอน Component โดน Mounted สำเร็จ และ useEffect() จะทำงานทุกคเมื่อมีมีการ Updated State ของค่า firstName

Example React Hooks useEffect Unmounting

อีกหนึ่งสถานะที่ useEffect() จะทำงานก็คือก่อน Component เกิดสถานะ Unmounted โดยuseEffect() จะทำงานก็ต่อเมื่ออะไรก็ตามที่ถูก return ออกมาจาก function ที่ส่งเข้าไปยัง useEffect() สิ่งนั้นมันจะถูกทำงานก่อนที่ Component จะตายหรือหายออกไปจากหน้าเพจ

ในบทความนี้เราได้เข้าใจการทำงาน Hooks แล้ว บทความต่อไปเราจะมาพูดถึงเรื่องอะไรนั้นรอติดตามกันได้เลยครับ

บทความอื่นๆที่เกี่ยวข้องใน Series React.js

JavaScript 101

React.js #01 Create React App

React.js #02 Component

React.js #03 Hooks

React.js #04 API with Axios