ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

การเพิ่ม Lifecycle ลงใน Class

     ในหนึ่งแอพพลิเคชั่นจะมีหลาย Component โดนแยก UI ออกเป็นส่วนๆ สิ่งที่สำคัญที่สุดคือเวลาที่เกิดความเสียหายขึ้น เราจะได้แก้ไขเฉพาะที่ มีผลดีคือ แก้ไขง่าย รวดเร็ว และไม่ทำให้เกิดความเสียหายทั้งหมด 

     Lifecycle แปลเป็นไทยคือ วงเวียนชีวิต ในที่นี้หมายถึงวงเวียนชีวิตของ Method ใน Component แต่ละตัว มีวิธีการเกี่ยวกับ Lifecycle หลายแบบซึ่งเราสามารถนำไปใช้ในแต่ละช่วงเวลาของเหตูการณ์นั้นๆได้
Method ที่นำหน้าด้วย Will ถูกเรียกก่อนที่มีบางสิ่งบางอย่างเกิดขึ้นและ Method ที่นำหน้าด้วย Did ถูกเรียกหลังจากมีบางสิ่งบางอย่างเกิดขึ้น

 

ในตัวอย่างต่อไปนี้ จะอธิบายถึงการทำงานของ Lifecycle ของ Component Clock

     1.  เมื่อเราต้องการเซ็ตเวลา Clock จะแสดงผลที่ DOM ก่อน เราเรียกสิ่งนี้ว่า "mounting" ใน React

     2.  เมื่อเราต้องการลบเวลา DOM ที่ถูกสร้างขึ้นโดย Clock จะถูกลบออก เราเรียกสิ่งนี้ว่า "unmounting" ใน React

     เราสามารถประกาศ Method พิเศษบน Component ได้ เพื่อ Run โค้ดบางส่วน  Method นี้เรียกว่า "Lifecycle hook" :

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

     Hook componentDidMount() จะ Run หลังจากที่ Component แสดงผลไปที่ DOM

     Example ตัวอย่างโค้ดเวลา ที่มีการ save timerID ไว้ :

componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

     การดึง timerID ออกใน componentWillUnmount() Lifecycle hook  :

componentWillUnmount() {
    clearInterval(this.timerID);
  }

     สุดท้ายนี้เราจะเรียก Method tick() ของ Component Clock แล้วทำการ setState Clock ก็จะทำการเรียก ทุกๆวินาที 

     เราจะได้โค้ดเต็มของ Component Clock ดังนี้ :

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

 

สรุปการทำงานของ Component Clock

  • เมื่อ Element <Clock /> เข้ามาที่ ReactDOM.render() จากนั้นจะเรียก constructor ของ Component Clock เนื่องจาก Clock ต้องการแสดงเวลาปัจจุบัน

  • จากนั้น Method render() จะทำหน้าที่เป็น Output ส่วน React จะอัพเดท DOM ให้มีค่าตรงกับ Output

  • เมื่อ Output ของ Clock ถูกส่งไปที่ DOM ตัว React จะเรียก componentDidMount() จากนั้น Clock จะขอให้ Browser ตั้งเวลาเพื่อเรียก Method trick() หนึ่งครั้งต่อวินาที

  • ถ้า Clock เคยถูกลบออกจาก DOM ตัว React จะเรียก componentWillUnmount() เพื่อทำให้ Timer หยุด

 

ข้อมูลอ้างอิง : https://reactjs.org

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 14 พฤศจิยน 2561
โดย tatiya พ 14 พ.ย. 2018 9:39 am บอร์ด M065 - ตติยะ นาชัย
0
1
พ 14 พ.ย. 2018 9:39 am โดย tatiya
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย prakon พ 14 พ.ย. 2018 9:35 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
0
1
พ 14 พ.ย. 2018 9:35 am โดย prakon
อัพโหลดไฟล์ ผ่าน FTP ด้วย Python ง่ายๆ 5 บรรทัดก็ย้ายไฟล์ไปยัง Server ปลายทางได้แล้ว
โดย mindphp พ 14 พ.ย. 2018 9:34 am บอร์ด Python Knowledge
0
6
พ 14 พ.ย. 2018 9:34 am โดย mindphp
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย nice_13 พ 14 พ.ย. 2018 9:31 am บอร์ด M071 - พิชญ์สินี คงจร
0
1
พ 14 พ.ย. 2018 9:31 am โดย nice_13
งานประจำวันที่ 14 พฤษจิกายน 2561
โดย Ittichai_chupol พ 14 พ.ย. 2018 9:21 am บอร์ด M070 - อิทธิชัย ชูผล
0
1
พ 14 พ.ย. 2018 9:21 am โดย Ittichai_chupol
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย tai14 พ 14 พ.ย. 2018 8:09 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พ 14 พ.ย. 2018 8:09 am โดย tai14
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย tai14 พ 14 พ.ย. 2018 8:09 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
พ 14 พ.ย. 2018 8:09 am โดย tai14
งานประจำวันที่ 14 พฤศจิกายน 2561
โดย pprn พ 14 พ.ย. 2018 8:08 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
1
พ 14 พ.ย. 2018 8:08 am โดย pprn
รายงานปัญหาที่ต้องแก้ไขใน RTP
โดย pprn อ 13 พ.ย. 2018 6:24 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
อ 13 พ.ย. 2018 6:24 pm โดย pprn
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย prakon อ 13 พ.ย. 2018 10:00 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
7
อ 13 พ.ย. 2018 10:55 pm โดย prakon
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย Ittichai_chupol อ 13 พ.ย. 2018 8:31 am บอร์ด M070 - อิทธิชัย ชูผล
0
3
อ 13 พ.ย. 2018 8:31 am โดย Ittichai_chupol
งานประจำวันที่ 13 พฤษจิกายน 2561
โดย tatiya อ 13 พ.ย. 2018 8:30 am บอร์ด M065 - ตติยะ นาชัย
0
3
อ 13 พ.ย. 2018 8:30 am โดย tatiya
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย nice_13 อ 13 พ.ย. 2018 8:30 am บอร์ด M071 - พิชญ์สินี คงจร
2
4
อ 13 พ.ย. 2018 5:58 pm โดย nice_13
งานประจำวันที่ 13 พฤศจิกายน 2561
โดย pprn อ 13 พ.ย. 2018 8:27 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
2
อ 13 พ.ย. 2018 8:27 am โดย pprn
B - ปรับเปลี่ยนเทมเพลต เป็นแบบ phpbb
โดย Ittichai_chupol อ 13 พ.ย. 2018 1:03 am บอร์ด ThaiVI - Tester
0
2
อ 13 พ.ย. 2018 1:03 am โดย Ittichai_chupol
B - เพิ่มเเบ่งหน้า ใน extension กระทู้สมาชิก
โดย Ittichai_chupol อ 13 พ.ย. 2018 12:24 am บอร์ด ThaiVI - Tester
0
1
อ 13 พ.ย. 2018 12:24 am โดย Ittichai_chupol
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย prakon จ 12 พ.ย. 2018 4:19 pm บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
9
จ 12 พ.ย. 2018 6:35 pm โดย prakon
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย tai14 จ 12 พ.ย. 2018 4:07 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
3
จ 12 พ.ย. 2018 4:07 pm โดย tai14
งานประจำวันที่ 12 พฤศจิกายน 2561
โดย nice_13 จ 12 พ.ย. 2018 4:01 pm บอร์ด M071 - พิชญ์สินี คงจร
0
3
จ 12 พ.ย. 2018 4:01 pm โดย nice_13
R - Email เเจ้งเตือนเมื่อ ลง lead
โดย thatsawan จ 12 พ.ย. 2018 2:13 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
1
จ 12 พ.ย. 2018 2:13 pm โดย thatsawan