ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - MDUpgrade อัพเกรด Joomla 2.5.28 เป็น 3.8 แล้วมีการอัพโหลดอยู่นานมาก
โดย Parichat ส 21 ก.ค. 2018 7:10 pm บอร์ด Joomla Dev
0
1
ส 21 ก.ค. 2018 7:10 pm โดย Parichat
นักฟุตบอลเสียภาษีอย่างไรบ้าง?
โดย taemmynatchapon ส 21 ก.ค. 2018 6:19 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
9
ส 21 ก.ค. 2018 6:19 pm โดย taemmynatchapon
google dive โหลดไฟล์ PDF ไม่ได้ เด้งไปไหนไม่รู้ หน้าขาวๆ
โดย thatsawan ส 21 ก.ค. 2018 1:45 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
8
ส 21 ก.ค. 2018 1:45 pm โดย thatsawan
'งานประจำวันที่ 21 กรกฎาคม 2561
โดย tatiya ส 21 ก.ค. 2018 10:09 am บอร์ด M065 - ตติยะ นาชัย
1
3
ส 21 ก.ค. 2018 7:13 pm โดย tatiya
ช่วยแนะนำ mysqli หน่อยครับ จะเปลี่ยนยังไงครับ
โดย mollyclick ส 21 ก.ค. 2018 7:34 am บอร์ด Programming - PHP
0
24
ส 21 ก.ค. 2018 7:34 am โดย mollyclick
สอบถามเรื่องการแสดงค่าหน่อย
โดย zinptin ศ 20 ก.ค. 2018 9:06 pm บอร์ด Programming - PHP
0
14
ศ 20 ก.ค. 2018 9:06 pm โดย zinptin
Demo M2OpenERP
โดย tsukasaz ศ 20 ก.ค. 2018 4:02 pm บอร์ด M2OpenERP
0
5
ศ 20 ก.ค. 2018 4:02 pm โดย tsukasaz
Q - ไม่สามารถอัพไฟล์ขึ้น git lab ได้
โดย prakon ศ 20 ก.ค. 2018 1:44 pm บอร์ด Programming - PHP
1
24
ศ 20 ก.ค. 2018 2:12 pm โดย tsukasaz
สอบถามการเขียน batch file หน่อยครับ
โดย jlo ศ 20 ก.ค. 2018 11:38 am บอร์ด Programming - PHP
0
23
ศ 20 ก.ค. 2018 11:38 am โดย jlo
งานประจำวันที่ 20 กรกฏาคม 2561
โดย pprn ศ 20 ก.ค. 2018 10:13 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
18
ศ 20 ก.ค. 2018 5:19 pm โดย pprn
งานประจำวันที่ 20 กรกฎาคม 2561
โดย tatiya ศ 20 ก.ค. 2018 9:29 am บอร์ด M065 - ตติยะ นาชัย
1
5
ศ 20 ก.ค. 2018 7:38 pm โดย tatiya
งานปรจำวันที่ 20 กรกฏาคม 2561
โดย prakon ศ 20 ก.ค. 2018 9:13 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
11
ศ 20 ก.ค. 2018 5:10 pm โดย prakon
Q - ไม่สามารถลิงค์ข้อความในเว็บ ของ Joomla ได้
โดย prakon พฤ 19 ก.ค. 2018 12:27 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
40
พฤ 19 ก.ค. 2018 1:08 pm โดย AePongsak
ทำการกด edit ภาพแล้ว ทำยังไงให้ไปทับภาพเดิมหรือลบภาพเดิมครับ
โดย mollyclick พฤ 19 ก.ค. 2018 11:04 am บอร์ด Programming - PHP
6
76
พฤ 19 ก.ค. 2018 6:03 pm โดย mollyclick
งานประจำวันที่ 19 กรกฏาคม 2561
โดย pprn พฤ 19 ก.ค. 2018 10:45 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
22
พฤ 19 ก.ค. 2018 5:52 pm โดย pprn
งานประจำวันที่ 19 กรกฎาคม 2561
โดย tatiya พฤ 19 ก.ค. 2018 9:57 am บอร์ด M065 - ตติยะ นาชัย
1
6
พฤ 19 ก.ค. 2018 7:32 pm โดย tatiya
มี Error mysqli_query() expects at least 2 parameters, 1 given แก้ตรงไหนครับ
โดย mollyclick พฤ 19 ก.ค. 2018 9:50 am บอร์ด Programming - PHP
2
53
พฤ 19 ก.ค. 2018 10:02 am โดย mollyclick
งานประจำวันที่ 19 กรกฎาคม 2561
โดย prakon พฤ 19 ก.ค. 2018 9:55 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
11
พฤ 19 ก.ค. 2018 11:06 am โดย prakon
หาวิธีลงวินโดโดยใช้ USB
โดย Anonymous พ 18 ก.ค. 2018 10:16 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
56
พ 18 ก.ค. 2018 11:07 pm โดย mindphp
สอบถามการเขียน Extension BBCode ที่จะ Query ข้อมูลจาก SQL ครับ
โดย AePongsak พ 18 ก.ค. 2018 6:35 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
53
ส 21 ก.ค. 2018 1:20 pm โดย AePongsak