JavaScript Academy · บทเรียน

การเรียกกลับตามวงจรชีวิต

เชื่อมต่อกับการเปลี่ยนแปลงเมื่อเชื่อมต่อ เมื่อตัดการเชื่อมต่อ และเมื่อแอตทริบิวต์เปลี่ยน

การเรียกกลับตามวงจรชีวิต เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

วงจรชีวิตขององค์ประกอบ

องค์ประกอบกำหนดเองมีวงจรชีวิตที่กำหนดไว้อย่างชัดเจน เบราว์เซอร์จะเรียกเมธอดพิเศษในคลาสของคุณเมื่อถึงช่วงเวลาสำคัญดังนี้

connectedCallback — ถูกเพิ่มเข้าใน DOM
disconnectedCallback — ถูกนำออกจาก DOM
attributeChangedCallback — แอตทริบิวต์ที่เฝ้าดูมีการเปลี่ยนแปลง
adoptedCallback — ถูกย้ายไปยังเอกสารใหม่

connectedCallback

connectedCallback ทำงานทุกครั้งที่องค์ประกอบถูกแทรกลงในเอกสาร จุดนี้เหมาะอย่างยิ่งสำหรับการเรียก render เนื้อหา ดึงข้อมูล หรือเพิ่มตัวรับฟังเหตุการณ์ระดับส่วนกลาง

เมธอดนี้อาจทำงานหลายครั้งหากองค์ประกอบถูกย้ายไปมา

class StatusBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Online';
    console.log('badge added to page');
  }
}
customElements.define('status-badge', StatusBadge);

disconnectedCallback

disconnectedCallback ทำงานเมื่อองค์ประกอบถูกนำออกจาก DOM ใช้จุดนี้เพื่อล้างทรัพยากร เช่น นำตัวรับฟังเหตุการณ์ระดับส่วนกลางออก ยกเลิกตัวจับเวลา หรือปิดการเชื่อมต่อ เพื่อป้องกันหน่วยความจำรั่ว

class ClockWidget extends HTMLElement {
  connectedCallback() {
    this.timer = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.timer); // cleanup
  }
}
customElements.define('clock-widget', ClockWidget);

การเฝ้าดูแอตทริบิวต์

หากต้องการตอบสนองต่อการเปลี่ยนแปลงของแอตทริบิวต์ คุณต้องประกาศว่าแอตทริบิวต์ใดต้องเฝ้าดูด้วย getter แบบ static ของ observedAttributes ซึ่งส่งคืนอาร์เรย์ของชื่อแอตทริบิวต์

เฉพาะแอตทริบิวต์ที่ระบุไว้เท่านั้นที่จะเรียกใช้ attributeChangedCallback

class AvatarImage extends HTMLElement {
  static get observedAttributes() {
    return ['src', 'alt'];
  }
}
customElements.define('avatar-image', AvatarImage);

attributeChangedCallback

เมื่อมีการเพิ่ม นำออก หรือเปลี่ยนแปลงแอตทริบิวต์ที่เฝ้าดู เบราว์เซอร์จะเรียก attributeChangedCallback(name, oldValue, newValue) ใช้เมธอดนี้เพื่อให้ผลลัพธ์ที่เรียก render สอดคล้องกับแอตทริบิวต์

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src') {
      this.innerHTML = '<img src="' + newValue + '">';
    }
  }
}
customElements.define('avatar-image', AvatarImage);

อาร์กิวเมนต์ของการเรียกกลับ

attributeChangedCallback รับอาร์กิวเมนต์สามรายการดังนี้

name — แอตทริบิวต์ใดที่เปลี่ยนแปลง
oldValue — ค่าก่อนหน้า (เป็น null หากเพิ่งเพิ่มเข้ามา)
newValue — ค่าใหม่ (เป็น null หากถูกนำออก)

เปรียบเทียบค่าเก่ากับค่าใหม่เพื่อข้ามการทำงานที่ไม่จำเป็น

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return; // no real change
  console.log(name + ' changed to ' + newValue);
}

การเรียกแอตทริบิวต์เริ่มต้น

หากองค์ประกอบมีแอตทริบิวต์ที่เฝ้าดูอยู่แล้วเมื่อองค์ประกอบนั้นได้รับการอัปเกรด attributeChangedCallback จะทำงานหนึ่งครั้งสำหรับแต่ละแอตทริบิวต์ก่อน connectedCallback วิธีนี้ช่วยให้เริ่มต้นค่าจากมาร์กอัปได้โดยอัตโนมัติ

// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.

การสะท้อนคุณสมบัติไปยังแอตทริบิวต์

รูปแบบที่ใช้กันทั่วไปคือเปิดเผยคุณสมบัติ JavaScript ที่อ่านและเขียนแอตทริบิวต์ วิธีนี้ทำให้ส่วนติดต่อการใช้งานสะดวก ขณะเดียวกันก็ยังคงสอดคล้องกัน

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  get src() { return this.getAttribute('src'); }
  set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);

adoptedCallback

adoptedCallback ทำงานเมื่อองค์ประกอบถูกย้ายจากเอกสารหนึ่งไปยังอีกเอกสารหนึ่ง (เช่น ย้ายเข้าไปใน iframe ผ่าน document.adoptNode) เมธอดนี้ไม่ค่อยจำเป็น แต่ช่วยให้วงจรชีวิตครบถ้วน

class PortableWidget extends HTMLElement {
  adoptedCallback() {
    console.log('moved to a new document');
  }
}
customElements.define('portable-widget', PortableWidget);

ลำดับของวงจรชีวิต

สำหรับองค์ประกอบที่เขียนโดยตรงใน HTML ลำดับโดยทั่วไปคือ:

constructor
attributeChangedCallback (หนึ่งครั้งต่อแอตทริบิวต์ที่เฝ้าดูซึ่งมีอยู่)
connectedCallback

และในภายหลัง เมื่อนำออก จะเรียก disconnectedCallback

ประกอบทุกส่วนเข้าด้วยกัน

องค์ประกอบที่สมบูรณ์จะเชื่อมโยงทุกส่วนเข้าด้วยกัน ได้แก่ เฝ้าดูแอตทริบิวต์ เรียก render เมื่อเชื่อมต่อ ซิงค์เมื่อแอตทริบิวต์เปลี่ยนแปลง และล้างทรัพยากรเมื่อยกเลิกการเชื่อมต่อ

class GreetUser extends HTMLElement {
  static get observedAttributes() { return ['name']; }
  connectedCallback() { this.render(); }
  attributeChangedCallback() { this.render(); }
  render() {
    const name = this.getAttribute('name') || 'Guest';
    this.textContent = 'Hello, ' + name;
  }
}
customElements.define('greet-user', GreetUser);

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับการเรียกกลับของวงจรชีวิต

ทบทวน

คุณได้เรียนรู้วงจรชีวิตขององค์ประกอบกำหนดเองดังนี้

connectedCallback ทำงานเมื่อมีการแทรก — เรียก render ที่นี่
disconnectedCallback ทำงานเมื่อนำออก — ล้างทรัพยากรที่นี่
observedAttributes ประกาศว่าแอตทริบิวต์ใดที่ต้องเฝ้าดู
attributeChangedCallback(name, old, new) ตอบสนองต่อการเปลี่ยนแปลง
adoptedCallback จัดการการย้ายข้ามเอกสาร

ถัดไป เราจะห่อหุ้มสไตล์และมาร์กอัปด้วย DOM เงา

คำถามที่พบบ่อย

บทเรียน “การเรียกกลับตามวงจรชีวิต” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเรียกกลับตามวงจรชีวิต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเรียกกลับตามวงจรชีวิต”

เชื่อมต่อกับการเปลี่ยนแปลงเมื่อเชื่อมต่อ เมื่อตัดการเชื่อมต่อ และเมื่อแอตทริบิวต์เปลี่ยน คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การเรียกกลับตามวงจรชีวิต” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy