iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

React自我學習心得30天~系列 第 9

Day9 React生命週期

  • 分享至 

  • xImage
  •  

React Component的生命週期,大致上可以分成產生、更新及結束三個階段,每個階段都有對應的方法可以去偵測。

產生階段

Component在產生階段時可以使用constructor()這個方法去捕捉,觸發時間點在render()之前。以下用官網的clock Component作為範例:

class Clock extends React.Component {
  constructor(props) {
 // super:呼叫父類別,是用來提供一個類別呼叫其父類別的函數。

    super(props);
    this.state = {date: new Date()};
  }


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

上一篇
Day8 React State(編輯中)
下一篇
Day10加油好嗎 別偷懶了...
系列文
React自我學習心得30天~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言