在講到生命週期之前要確認理解前面做過的兩件事：

1. setInterval 去更新畫面的例子
2. 記得有 class component 跟 function component

以下之前 setInterval 的 example

function tick() {
  const element = (
    <div>      <h1>Hello, world!</h1>      <h2>It is {new Date().toLocaleTimeString()}.</h2>    </div>
}

  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );

setInterval(tick, 1000);

目前這個寫法因為 setInterval 是寫在最外層，可能造成兩個問題

1. 什麼時候 clearInterval
2. tick component 怎麼複用

為解決這兩個問題，可以做下面三件事：

1. 理解 ES6 Class
2. 理解生命週期
3. 試著把 setInterval 放進 component 裡

ES6 Class 整理

1. Extend：可以用來建立子類別，並繼承父類別的功能
2. constructor：隨著 class 一同建立並初始化物件
3. super ：用來提供一個類別呼叫其父類別的函數
4. methods：Class 裡可以用來執行的 function

生命週期整理

componentDidMount: 在一個 component 被加入 DOM tree 後，會呼叫執行這個方法
componentDidUpdate: 會在更新後馬上被呼叫。這個方法並不會在初次 render 時被呼叫，但要小心更新的資訊應該在限制在某些範圍內，例如：子層 update 直接更新父層 props 的來源資料，props 更新又會觸動 update , 就產生了程式內迴圈。
componentWillUnmount： 會在 component 被 unmount 和 destroy 後馬上被呼叫，例如頁面移除 component 時。
更多生命週期的細節

把 setInterval 放進 component 裡

1. 加入 local state , date 儲存時間的變數，timeID 儲存 setInterval ID 的變數
2. 寫更新 date 的函式(method) tick
3. 加入 componentDidMount, componentWillUnmount 控制啟動跟清除狀態

以下為結果

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      timeID: null
    };
  }


  componentDidMount() {
    this.timeID = setInterval(()=> this.tick(), 1000);
  }
  componentDidUpdate() {
    console.log(this.state.date)
  }
  componentWillUnmount() {
    clearInterval(this.state.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')
);

（下篇會試著改寫 Hook 的寫法）
注：Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。

參考資料：
https://zh-hant.reactjs.org/docs/components-and-props.html
Class Extend 概念