Please enable JavaScript.

Coggle requires JavaScript to display documents.

React LifeCycle (Mounting Phase (Events (getDerivedStateFromProps()…

- - - - ทำหน้าที่ return state ใหม่เพื่อ update state
        
        ถ้าไม่มีอะไร update ให้ return null
      - ใช้สำหรับ sync props กับ state ให้ตรงกัน
      - ข้อควรระวัง ❗
        
        ‼ No Side Effect ‼
      - เกิดขึ้นหลังจาก constructor
    - - ข้อควรระวัง ❗
        
        ‼ อย่าใช้ setState ลงใน render ‼
        
        จะทำให้เกิด Infinity Loop
        
        ‼ เว็บจะระเบิด ‼
        
        ‼ No Side Effect ‼
      - ใช้สำหรับสร้าง UI
        ให้ Component
        
        และจะถูกเรียกอีกเรื่อยๆใน phase อื่นๆ
      - render จะเกิดขึ้นหลังจาก
        getDerivedStateFromProps
    - - เหมาะสำหรับ... ☝
        
        Subscribe Event ต่างๆ
        
        ทำ action ที่มี side effect เช่น Fetch
        
        DOM manipulation
        
        ใช้ Timer
      - เป็นการบอกว่า
        phase Mounting สิ้นสุดแล้ว
        
        โดยเกิดขึ้นหลังจาก component
        ถูก render ในครั้งแรก
    - - หน้าที่
        
        ใช้ bind this ให้กับ method
        
        ใช้กำหนด Initial state
      - ข้อควรระวัง ❗
        
        ‼ No Side Effect ‼
  - - - ก่อนที่จะวาดลง DOM เป็นครั้งแรก
- - - - สั่ง this.setState
      - เปลี่ยน Props ที่ส่งเข้ามา
      - สั่ง this.forceUpdate ตรงๆ
  - - - ถูกเรียกหลังจากได้
        ผลลัพธ์ล่าสุดจากการ render
        
        แต่ก่อนที่ DOM จะถูก update
        ด้วย UI ก้อนใหม่
        ผลลัพธ์ที่ได้จากสิ่งนี้จะถูกส่งต่อ
        ให้ componentDidUpdate
      - ข้อควรระวัง ❗
        
        ‼ No Side Effect ‼
        
        ต้องมีเหตุการณ์เฉพาะจริงๆ
        ถึงจะได้ใช้ lifecycle method นี้
    - - อ่านรายละเอียดที่
        Mounting Phase
    - - อ่านรายละเอียดที่
        Mounting Phase
    - - หน้าที่
        
        เป็น life cycle method ที่
        สามารถทำให้ควบคุม
        การ rerender componentได้
        
        โดยพิจารณาจาก Props และ State
        
        ใช้สำหรับปรับปรุง performance
        
        return true (default)
        เมื่อต้องการใช้ component update
      - ข้อควรระวัง ❗
        
        ‼ No Side Effect ‼
    - - จะถูกเรียกหลังจากที่ DOM
        มีการ update เรียบร้อยแล้ว
        
        เหมาะสำหรับ
        
        DOM manipulation
        
        action ที่มี side effect
        เช่น Fetch และ Axios
        เพื่อขอข้อมูลจาก API
        
        ใช้ค่า snapshot ที่ได้จาก
        getSnapshotBeforeUpdate
      - ข้อควรระวัง ❗
        
        ✔ ไม่มี ✔
        
        👍🏻 เพราะรองรับ Side Effect
- - - - Source
        
        https://reactjs.org/docs/reconciliation.html
      - เกิดก่อนที่ component จะถูก
        unmount (ทำให้หายไป)
        
        มีไว้เพื่อให้เราได้
        clear พื้นที่ทรัพยากรออกจากระบบ
      - หน้าที่
        
        ลบ timer ต่างๆ
        
        Cancel Ajax
        
        Unsubscribe Event ต่างๆ
      - ข้อควรระวัง ❗
        
        ✔ ไม่มี ✔
        
        👍🏻 เพราะรองรับ Side Effect