สรุป react life cycle แบบย่อๆ





react life cycle
   พวก tag html ที่อยู่ใน react เราจะเรียกว่า DOM

  • componentWillMount ไม่ค่อยใช้เพราะใช้ constructor แทนทำงานตอนเริ่มต้น
  • componentDidMount ทำงานหลังจาก mount เสร็จแล้วใช้กำหนดค่าเริ่มต้นของ DOM
  • componentWillReceiveProps(nextProps) ทำงานหลัง componentDidMount โดยจะทำงานก็ต่อเมื่อมีการรับ props ใหม่เข้ามา ควรเช็คทุกครั้งว่า nextProps ไม่เหมือน props เก่าจึงค่อย update DOM
  • componentShouldUpdate(nextProps, nextState) ถูกเรียกเมื่อมีการเปลี่ยนแปลงของ props และ state ในนี้ใช้ serState ไม่ได้
  • componentWillUpdate(nextProps, nextState) เหมือน componentWillReceiveProps แต่ไม่ยอมให้ใช้ setState
  • render ทำการ mount DOM
  • componentDidUpdate(prevProps, prevState) ใช้เหมือน componenDidMount
  • componentWillUnmount ถูกเรียกก่อนการ unmount component ส่วนมากใช้ reset ค่าต่างๆ
this.forceUpdate ใช้สั่ง component ให้ render ใหม่
findDomNode ใช้นำ DOM ที่ต้องการมา update


ความคิดเห็น