【前言】
　　昨天講完Refs，會不會覺得目前React已經很煩了呢？希望你不會......XD

【正文】
　　今天要來聊聊React Component的生命週期（Lifecycle），首先React Component的生命週期一定是class宣告的Component才會有的方法，而生命週期顧名思義，Component本身也會有掛載、更新、結束階段。那今天的練習會用到componentDidMount()和componentWillUnmount()這兩個方法。

• 　　componentDidMount()：
  　　1.　Component已經render到實體DOM階段完成的時候觸發
  　　2.　此method只會被呼叫一次
  　　3.　在這裡可以setState()，並會再次重新render　component一次
  　　4.　可以放入具有side effect的function，如setInterval、呼叫API等等

• 　　componentWillUnmount()：
  　　1.　 Component即將從實體DOM階段移除「之前」的時候觸發
  　　2.　 也是只會被呼叫一次
  　　3.　 不可以在這裡使用setState()
  　　4.　 也可以放入具有side effect的function

　　大致理解上面這兩個lifecycle methods之後，大家是否還記得之前在講state做的時鐘練習吧？那時候我們是用按一個按鈕觸發更新時間，今天我們就再來修改這隻程式碼，讓他可以自動更新時間吧！

App.js

import React from 'react';

class App extends React.Component {
  // 在建構子設定state的初始值
  constructor(props) {
    super(props);
    this.state = {
      currentTime: new Date().toLocaleString(),
    };
  }

  // 在Component render到真實DOM中，使用ComponentDidMount，
  // 並在裡面使用setInterVal，並將回傳的計時器id存放在timerId中
  componentDidMount() {
    this.timerId = setInterval( this.updateTime, 1000);
  }

  // 在component即將從真實DOM中移除之前，使用componentWillUnmount
  // 使用clearInterval把timerId移除掉
  componentWillUnmount() {
    clearInterval(this.timerId);
  }

  // 宣告update時間的方法
  updateTime = () => {
    this.setState({
      currentTime: new Date().toLocaleString(),
    })
  }

  render() {
    const { currentTime } = this.state;
    return ( 
      <div style = {{ textAlign: 'center' }} >
        <div>{currentTime}</div>
      </div>
    );
  }
}

export default App;

　　執行結果的畫面長這樣：

　　燈燈！！是不是可以自動更新時間了呢？你看今天就會使用兩種的lifecycle method囉，但React不僅僅只提供這兩種，還有其他可以用的方法，那就等明天的時候再來慢慢分享其他的吧！