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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เจอปัญหา Publishing failed. You are probably offline. ปัญหาใน Wordpress 5.x
โดย mindphp อ 20 ต.ค. 2020 6:03 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
6
อ 20 ต.ค. 2020 6:30 am โดย mindphp
แสดงสินค้าที่ขายได้ล่าสุด ด้วย Module Latest Sold Products ใน MooZiiCart
โดย bolue จ 19 ต.ค. 2020 6:53 pm บอร์ด MindPHP News & Feedback
0
30
จ 19 ต.ค. 2020 6:53 pm โดย bolue
ติดปัญหาเรื่อง การทำปุ่ม ค้นหา ที่มีการเชื่อมความสัมพันธ์ Laravel Framework
โดย makup จ 19 ต.ค. 2020 6:23 pm บอร์ด Programming - PHP
0
27
จ 19 ต.ค. 2020 6:23 pm โดย makup
วิธีการกำหนด Routing ใน Laravel Framework
โดย makup จ 19 ต.ค. 2020 7:15 am บอร์ด PHP Knowledge
0
38
จ 19 ต.ค. 2020 7:15 am โดย makup
วิธีแสดงพิกัดบนแผนที่ OpenStreetMap ด้วย Laravel Framework
โดย makup อ 18 ต.ค. 2020 6:21 pm บอร์ด PHP Knowledge
0
30
อ 18 ต.ค. 2020 6:21 pm โดย makup
เจอปัญหา ในฐาน Joomla Out of resources when opening file '/tmp/#sql_7059_0.MAD' (Errcode: 24 "Too many open files")
โดย mindphp อ 18 ต.ค. 2020 5:34 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
28
อ 18 ต.ค. 2020 5:41 pm โดย mindphp
Re: Mysql เช็คerror ฟิลซ้ำ แสดงข้อความ(PHP)
โดย kimmyth ศ 16 ต.ค. 2020 11:26 pm บอร์ด Programming - PHP
1
57
ส 17 ต.ค. 2020 10:02 am โดย mindphp
Mysql เช็คerror ฟิลซ้ำ แสดงข้อความ
โดย kimmyth ศ 16 ต.ค. 2020 11:22 pm บอร์ด Programming - PHP
0
43
ศ 16 ต.ค. 2020 11:22 pm โดย kimmyth
อยากทราบว่า มีตัวอย่าง OpenstreetMap ในการใช้งานร่วมกับ MySQL , PHP บ้างไหมครับ
โดย makup ศ 16 ต.ค. 2020 7:25 pm บอร์ด Programming - PHP
2
53
ศ 16 ต.ค. 2020 7:48 pm โดย makup
การคำนวณต้นทุนสินค้า แบบ FIFO และ Weighted Average
โดย bolue ศ 16 ต.ค. 2020 6:53 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
58
ศ 16 ต.ค. 2020 6:53 pm โดย bolue
วิธีการเชื่อมความสัมพันธ์ข้อมูล one to many บน Laravel Framework
โดย makup ศ 16 ต.ค. 2020 6:40 pm บอร์ด PHP Knowledge
0
44
ศ 16 ต.ค. 2020 6:40 pm โดย makup
Function Validate Laravel Framework
โดย makup ศ 16 ต.ค. 2020 4:22 pm บอร์ด PHP Knowledge
0
46
ศ 16 ต.ค. 2020 4:22 pm โดย makup
จะอัพเกรด Joomla 1.5 เป็น Joomla 3 ควรใช้ php อะไร
โดย Anonymous พฤ 15 ต.ค. 2020 10:13 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
48
ศ 16 ต.ค. 2020 12:48 am โดย mindphp
ตัวอย่างการใช้ gettype , var_dump
โดย makup พฤ 15 ต.ค. 2020 12:36 pm บอร์ด PHP Knowledge
1
44
พฤ 15 ต.ค. 2020 12:41 pm โดย thatsawan
วิธีการใช้ Function each
โดย makup พฤ 15 ต.ค. 2020 11:58 am บอร์ด PHP Knowledge
2
48
พฤ 15 ต.ค. 2020 7:27 pm โดย makup
การใช้ Function pop และ push
โดย makup พฤ 15 ต.ค. 2020 11:25 am บอร์ด PHP Knowledge
0
35
พฤ 15 ต.ค. 2020 11:25 am โดย makup
สอบถามการทำเมนูหลายภาษาบน joomla ค่ะ
โดย bolue พ 14 ต.ค. 2020 10:25 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
12
133
พ 14 ต.ค. 2020 2:16 pm โดย bolue
วิธีการใช้งาน Template engine ของ Laravel Framework
โดย makup พ 14 ต.ค. 2020 9:15 am บอร์ด PHP Knowledge
0
67
พ 14 ต.ค. 2020 9:15 am โดย makup
การติดตั้งโปรแกรม xampp ผ่าน Command terminal ในนาม root
โดย makup อ 13 ต.ค. 2020 11:03 am บอร์ด Linux - Web Server
0
59
อ 13 ต.ค. 2020 11:03 am โดย makup
วิธีแก้ ติดปัญหา you are not owner so cannot change permissions
โดย makup อ 13 ต.ค. 2020 10:13 am บอร์ด Linux - Web Server
0
56
อ 13 ต.ค. 2020 10:13 am โดย makup