วันนี้เราจะมาพูดถึง life cycle ของ React ที่จะมี method ไว้ใช้ควบคุมการแสดงผลของ UI ตั้งแต่ก่อนแสดงผล (before render) หลังแสดงผล (after render) หรือการแสดงผลใหม่อีกรอบ (re-render) ว่าแต่ละ method มีหน้าที่ไว้ทำอะไร และเราควรหรือไม่ควรทำอะไรในแต่ละ method เริ่มกันเลย!!!
เพื่อให้เข้าใจง่ายขึ้นเราจะแบ่ง life cycle ของ React ออกเป็น 2 แบบหลัก ๆ คือ
- Mounting หรือ First time render จะทำงานแค่ครั้งแรกของการ render ของ component นั้น
2. Updating หรือ re-render คือจะทำงานเมื่อเป็นการ re-render ไม่สามารถเรียกใช้งานขณะที่ first time render ได้ โดยแบ่งออกเป็น 2 life cycle คือ
เมื่อ props change
และ เมื่อ state change
เรามาเริ่มจาก life cycle ของ First time render ก่อนเลยเริ่มต้นด้วย
render()
เมื่อเราเรียกใช้ render() มันจะทำการ return ค่าตาม this.props และ this.state
และทำการ return หนึ่งในค่าต่อไปนี้
- React elements
- string และ numbers
- null (ไม่มีการ render ใดๆ)
- boolean ตัวอย่าง return test && <Child />
- Portals
render() เราควรเขียนให้เป็น pure function นั้นหมายความว่าเราไม่ควรไปทำการ setState() ในนี้ไม่งั้นจะทำให้เกิด loop ขึ้นได้
หมายเหตุ
render() จะไม่ถูกเรียกใช้งานหาก shouldComponentUpdate() renturn false
เราไม่ควรทำการ setState() เพราะจะทำให้เกิด loop ของการ render ไม่สิ้นสุด
constructor()
constructor() จะเป็น method แรกที่ถูกทำงานก่อนการ render() โดยเรามักจะ initial state หรือ bind method ไว้ที่นี้เป็นส่วนใหญ่ ถ้าหากเราไม่ได้ทำทั้งสองอย่างนี้ก็ไม่จำเป็นต้องเขียน constructor() ก็ได้นะ
ตัวอย่างการใช้งาน constructor()
componentWillMount()
componentWillMount() จะถูกเรียกใช้งานก่อนการ render() เราสามารถเรียนกใช้ setState() ใน method นี้ได้ แต่ว่ามันจะไม่ทำให้เกิดการ re-render นะ ซึ่งทาง Document ของ React version 16.2.0 เค้าแนะนำว่าถ้าจะไปกำหนดค่าเริ่มต้นของ state ก็ให้ไปทำที่ constructor() แทน
ตัวอย่างการใช้งาน componentWillMount()
componentDidMount()
componentDidMount() จะถูกเรียกใช้งานทันทีหลังการ render() เราสามารถทำการจัดการต่าง ๆ เกี่ยวกับ DOM ได้ที่ method นี้ และเรายังสามารถใช้ setState() ใน method นี้ได้อีกด้วย ซึ่งถ้าเราทำการ setState() ที่ componentDidMount() มันจะทำให้เกิดการ re-render ใน component นั้น
componentDidMount() นี้เหมาะสำหรับการดึงข้อมูลจาก API การ set up subscriptions ต่าง ๆ แต่ถ้าเราทำการ subscription แล้วอย่าลืม unsubscription ใน componentWillUnmount() ด้วยนะ
หมดไปแล้วสำหรับ First time render ทีนี้เรามาเข้าส่วนของ Update time render ซึ่งมันมีสองปัจจัยที่จะทำให้เกิด life cycle นี้ขึ้น คือ state และ props แต่ว่า props นั้นจะมี method พิเศษมาอีกหนึ่งอัน คือ componentWillReceiveProps() ซึ่งเราจะมาอธิบายกันต่อเลยละกัน
componentWillReceiveProps(nextProps)
componentWillReceiveProps(nextProps) จะทำงานก่อนการ render() และถูกเรียกใช้งานเมื่อ props มีได้รับค่าเข้ามาใหม่ componentWillReceiveProps(nextProps) ได้ ซึ่งเราสามารถ setState() ได้ใน method นี้ จากการที่ค่าของ props เปลี่ยนแปลงไป ซึ่งเราถ้ามาเช็คได้ว่า props ใหม่มีค่าเป็นอะไรได้ด้วย nextProps และ ค่า props ปัจจุบันด้วย this.props
ตัวอย่างการใช้งาน componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate(nextProps, nextState) จะทำงานก่อนการ render() และถูกเรียกใช้งานเมื่อ props หรือ state มีการเปลี่ยนแปลง ซึ่ง method นี้จะทำการ return ค่า boolean เท่านั้น ซึ่ง default ของ method นี้คือ true เสมอ หากเราไม่ได้ไปยุ่งอะไรกับ method นี้
shouldComponentUpdate(nextProps, nextState) การ return ค่า ของ method เป็นการบอกว่าเราต้องการ re-render component ใหม่ไหม เราสามารถ return false เพื่อไม่ให้ component ทำการ re-render ได้ เพื่อลดการ render ของ component ที่ไม่จำเป็นได้
ตัวอย่างการใช้งาน shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState) จะทำงานก่อนการ render() และถูกเรียกใช้งานเมื่อ props หรือ state มีการเปลี่ยนแปลง method นี้เราประมาณว่าถ้าเราอยากทำอะไรก่อนการ render() เราสามารถมาทำในที่นี่ได้ ยกเว้นการ setState()
หมายเหตุ componentWillUpdate(nextProps, nextState) จะไม่ถูกเรียกใช้ เมื่อ shouldComponentUpdate(nextProps, nextState) return false
componentDidUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState) จะทำงานหลังการ render() แต่ไม่ถูกเรียกใช้ในการ render ครั้งแรก ซึ่งเราสามารถจัดการอะไรที่เกี่ยวกับ DOM หรือ โหลดข้อมูลจาก API ได้ใน method นี้ และเราสามารถเช็คค่า props และ state ก่อนหน้านี้ได้ด้วย prevProps และ prevState
หมายเหตุ componentDidUpdate(nextProps, nextState) จะไม่ถูกเรียกใช้ เมื่อ shouldComponentUpdate(nextProps, nextState) return false
componentWillUnmount()
method นี้จะถูกเรียกใช้งานก่อนที่ component จะถูก unmount ทิ้งไปโดยปกติเราจะใช้เพื่อ reset ค่า network request, subscription
ตัวอย่างการใช้งาน componentWillUnmount()
สรุป จริง ๆ แล้วเราไม่จำเป็นต้องใช้ให้ครบทุก method ใน life cycle ของ React แต่ที่เราควรรู้ หรือควรทำคือ ใช้ method เหล่านี้ให้เหมาะสมกับการทำงาน เพื่อลดการทำงานที่ผิดพลาดของโปรแกรมเรา
ref : https://stackoverflow.com/questions/39483072/reactjs-life-cycle-call-while-only-change-state
