Lifecycle Callbacks

Lifecycle Callbacks ของ Web Components คืออะไร

Web Components มี lifecycle callbacks 4 ตัวที่ browser จะเรียกใช้งานโดยอัตโนมัติในช่วงเวลาต่าง ๆ ของการทำงาน ทำให้คุณสามารถเชื่อมต่อกับจุดสำคัญต่าง ๆ ในชีวิตของ element ได้

Callback	เมื่อไหร่ที่ถูกเรียก
`constructor`	เมื่อสร้าง instance ของ element ขึ้นมาใหม่
`connectedCallback`	เมื่อ element ถูกแทรกเข้าไปใน DOM
`attributeChangedCallback`	เมื่อ attribute ที่ถูก observe มีการเปลี่ยนแปลง
`disconnectedCallback`	เมื่อ element ถูกนำออกจาก DOM

ลำดับการทำงานของ Lifecycle

แผนภาพด้านล่างแสดงลำดับทั่วไปของ lifecycle callbacks:

flowchart LR
  C["constructor
(element created)"]
  CC["connectedCallback
(inserted into DOM)"]
  AC["attributeChangedCallback
(attribute changed)
— fires each time —"]
  DC["disconnectedCallback
(removed from DOM)"]
  C --> CC
  CC --> AC
  AC --> AC
  CC --> DC

Web Component Lifecycle Timeline

constructor

constructor จะถูกเรียกเมื่อสร้าง instance ของ element ขึ้นมาใหม่ ไม่ว่าจะผ่านทาง document.createElement หรือ parser ของ browser ก็ตาม กฎสำคัญคือต้องเรียก super() เป็น statement แรกเสมอ และห้ามแตะ DOM, attribute หรือ children ในขั้นตอนนี้

connectedCallback

connectedCallback จะถูกเรียกทุกครั้งที่ element ถูกแทรกเข้าไปใน document ที่เชื่อมต่ออยู่ นี่คือจุดที่เหมาะสมสำหรับการ render และการตั้งค่า event listener

attributeChangedCallback

attributeChangedCallback จะถูกเรียกเมื่อ attribute ที่อยู่ใน observedAttributes มีการเพิ่ม, เปลี่ยนแปลง หรือลบออก คุณต้องระบุรายการ attribute ที่ต้องการ observe ด้วย static getter ชื่อ observedAttributes

disconnectedCallback

disconnectedCallback จะถูกเรียกเมื่อ element ถูกนำออกจาก DOM ใช้สำหรับทำความสะอาด เช่น การลบ event listener หรือยกเลิก timer

ตัวอย่างที่รันได้จริง

<div id="log" style="font-family:monospace;font-size:.85rem;background:#f3f4f6;padding:.5rem;border-radius:4px;margin-bottom:.5rem;min-height:2rem"></div>
<lifecycle-demo label="Hello"></lifecycle-demo>

ลองดู console log ในแผง HTML เพื่อสังเกตว่า callbacks แต่ละตัวถูกเรียกเมื่อไหร่