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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามครับ เชื่อมฐานข้อมูล Wordpress ไม่ได้ครับ
โดย chatee supasand ส 19 ต.ค. 2019 4:07 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
3
73
ส 19 ต.ค. 2019 6:57 pm โดย nidhiwani
วิธีการสร้าง logfile ในภาษา Python ด้วย logging
โดย jirawoot ศ 18 ต.ค. 2019 1:21 pm บอร์ด Python Knowledge
1
187
ส 19 ต.ค. 2019 4:25 am โดย mindphp
เปิดโพย รวมมิตรไอโฟนตกรุ่น เริ่ม 900.-
โดย promotion ศ 18 ต.ค. 2019 11:42 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
23
ศ 18 ต.ค. 2019 11:42 am โดย promotion
ทำยังไงถึงจะ upload file เข้าไปอยู่ในโฟร์เดอร์ได้ครับ
โดย jamepiyawat พฤ 17 ต.ค. 2019 6:27 pm บอร์ด Programming - PHP
1
59
พฤ 17 ต.ค. 2019 6:30 pm โดย tsukasaz
สร้างไฟล์ PDF ด้วยภาษา PHP
โดย kkk_k พฤ 17 ต.ค. 2019 1:08 am บอร์ด Programming - PHP
1
76
พฤ 17 ต.ค. 2019 1:23 am โดย mindphp
ถามเรื่องเช็คตัวเลขว่ามีเลขที่มากกว่า 10 เเต่น้อยกว่า 20 กี่ตัวยังไงครับ
โดย Golff Sinlapachai พ 16 ต.ค. 2019 6:19 pm บอร์ด Programming - PHP
1
54
พ 16 ต.ค. 2019 6:25 pm โดย mindphp
ฐานข้อมูลค่ะ
โดย sopida พ 16 ต.ค. 2019 3:37 pm บอร์ด Programming - PHP
1
47
พ 16 ต.ค. 2019 3:53 pm โดย thatsawan
replace หลายจุด และหลาย pattern พร้อมกันจบในการรันคำสั่งครั้งเดียว
โดย jataz2 พ 16 ต.ค. 2019 3:17 pm บอร์ด Programming - C/C++ & java & Python
0
38
พ 16 ต.ค. 2019 3:17 pm โดย jataz2
อัพเดพตัว Build Windows 10 แอพ Your Phone รับสายเรียกเข้า-โทรออกจาก สมาร์ทโฟนได้แล้ว
โดย chatee supasand อ 15 ต.ค. 2019 12:18 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
55
อ 15 ต.ค. 2019 12:18 pm โดย chatee supasand
ตัวอย่างการสร้าง Service odoo13 บน Ubuntu 16.04
โดย mindphp ส 12 ต.ค. 2019 1:35 am บอร์ด Linux - Web Server
0
99
ส 12 ต.ค. 2019 1:35 am โดย mindphp
MJupgrade Joomla 1.5.26 > 3.9 ขึ้น Error: Could not connect to MySQL server.
โดย เห็ด อินโมชั่น ศ 11 ต.ค. 2019 3:30 pm บอร์ด Joomla Development
3
84
ศ 11 ต.ค. 2019 5:14 pm โดย เห็ด อินโมชั่น
MJupgrade Joomla 1.5.26 > 3.9 ขึ้น Error: Could not connect to MySQL server.
โดย เห็ด อินโมชั่น ศ 11 ต.ค. 2019 4:59 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
7
2224
ส 12 ต.ค. 2019 3:35 am โดย mindphp
อยากทราบวิธีนับจำนวน id ที่ซ้ำกัน ครับ
โดย jamepiyawat ศ 11 ต.ค. 2019 5:06 pm บอร์ด SQL - Database
3
173
ศ 11 ต.ค. 2019 6:20 pm โดย jamepiyawat
การ Search ค้นหาข้อมูลของบอร์ด phpBB
โดย aninthana พฤ 10 ต.ค. 2019 6:46 pm บอร์ด Wordpress user Guide Knowledge
0
133
พฤ 10 ต.ค. 2019 6:46 pm โดย aninthana
ทำป้าย PopUp ด้วย Modal ใน Bootstrap เวอร์ชั่น 4
โดย jamepiyawat พฤ 10 ต.ค. 2019 5:20 pm บอร์ด Booststap Knowledge
0
140
พฤ 10 ต.ค. 2019 5:20 pm โดย jamepiyawat
ทำยังไงถึงจะไม่ให้แสดงเลข ID หน้า Alias ได้ครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 4:03 pm บอร์ด Joomla Development
1
60
พฤ 10 ต.ค. 2019 6:02 pm โดย tsukasaz
ทำไมผมถึงดึงข้อมูลชื่อหมวดหมู่ออกมาแสดงหน้าตั้งค่า module ไม่ได้ครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 3:47 pm บอร์ด Joomla Development
2
66
พฤ 10 ต.ค. 2019 6:36 pm โดย jamepiyawat
ตัวเลขด้านหน้าข้อความที่เราตั้ง Alias คืออะไรครับ
โดย jamepiyawat พฤ 10 ต.ค. 2019 11:36 am บอร์ด Joomla Development
5
145
พฤ 10 ต.ค. 2019 2:46 pm โดย mindphp
แก้ปัญหา Error Ignoring file '50unattended-upgrades.ucf-old' in directory บน Ubunto 16.04 ติดตั้ง apt-get
โดย mindphp พฤ 10 ต.ค. 2019 5:42 am บอร์ด Linux - Web Server
0
112
พฤ 10 ต.ค. 2019 5:42 am โดย mindphp
Q - สอบถามวิธี Upload file html ไปยัง web service โดยใช้คำสั่ง curl ใน PHP
โดย birdkritsna พ 09 ต.ค. 2019 3:42 pm บอร์ด Programming - PHP
6
157
พฤ 10 ต.ค. 2019 2:07 pm โดย birdkritsna