ReactJS — เมธอดของ Components LifeCycle

ส่วนประกอบของปฏิกิริยามีวงจรชีวิตของเหตุการณ์ที่เกิดขึ้นตั้งแต่เวลาที่สร้างขึ้นจนกระทั่งถูกทำลาย เหตุการณ์วงจรชีวิตเหล่านี้ช่วยให้นักพัฒนาเชื่อมโยงวงจรชีวิตของส่วนประกอบที่จุดต่างๆ และดำเนินการบางอย่างได้

ต่อไปนี้คือวิธีวงจรชีวิตหลักของส่วนประกอบ React พร้อมด้วยคำอธิบายสั้น ๆ ของแต่ละวิธีและตัวอย่างวิธีการใช้งาน:

constructor(): วิธีการนี้ถูกเรียกก่อนที่จะติดตั้งส่วนประกอบ (แทรกลงใน DOM) ใช้เพื่อเริ่มต้นสถานะและผูกตัวจัดการเหตุการณ์

ตัวอย่าง:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.handleClick = this.handleClick.bind(this);
}

ตัวอย่าง:

componentDidMount() {
  axios.get('/items')
    .then(response => this.setState({ items: response.data }));
}

ตัวอย่าง:

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

ตัวอย่าง:

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    axios.post('/update-count', { count: this.state.count });
  }
}

ตัวอย่าง:

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}

render() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <button onClick={this.handleClick}>Click me</button>
    </div>
  );
}

นี่คือบทสรุปของวิธีการวงจรชีวิตของส่วนประกอบ React หลัก:

• constructor(): เตรียมใช้งานสถานะและผูกตัวจัดการเหตุการณ์ เรียกก่อนที่จะติดตั้งส่วนประกอบ
• componentDidMount(): ทริกเกอร์การกระทำหรือการเรียก API เมื่อคอมโพเนนต์แสดงผล เรียกใช้หลังจากติดตั้งส่วนประกอบแล้ว
• shouldComponentUpdate(): คืนค่าบูลีนที่ระบุว่าส่วนประกอบควรได้รับการอัพเดตหรือไม่ เรียกใช้ก่อนที่ส่วนประกอบจะถูกเรนเดอร์ใหม่
• componentDidUpdate(): ทริกเกอร์การกระทำหรือการเรียก API หลังจากอัปเดตคอมโพเนนต์แล้ว เรียกใช้หลังจากอัพเดตคอมโพเนนต์แล้ว
• componentWillUnmount(): ล้างทรัพยากรหรือผู้ฟังเหตุการณ์ ถูกเรียกก่อนที่ส่วนประกอบจะถูกทำลาย
• render(): แสดงผล JSX สำหรับส่วนประกอบ เรียกใช้เมื่อใดก็ตามที่ส่วนประกอบจำเป็นต้องแสดงผลใหม่