昨天談到生命週期，在react的世界裡面，一個element會有出生(Mounting)、變化(Updating)與死亡(Unmounting)。
而在Updating的週期裡，有一個hook是componentDidUpdate()，並表示componentDidUpdate()會在更新之後被呼叫，但不會在第一次render的時候被呼叫。

更新？
什麼是更新？
為什麼會更新？
要怎麼更新？

State

上一次看到state應該是談生命週期時，在Mounting裡的constructor可以設定state的初始狀態。
有初始狀態，就會有後來的狀態，那麼，狀態改變會怎麼樣呢？

沒錯！！！
變胖了就要買新衣服，狀態改變了就要更新頁面，就是這麼的直觀。
因此我們改變State就會進入Updating。

下面的程式碼是react的官網範例，是一個計時器。
一眼掠過就好，我們一步一步拆開來理解。

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>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

1. 我們會有一個constructor，叫做Clock，就是Mounting裡面那個可以省略的constructor，在這裡，我們會初始化狀態（現在、此時此刻的時間）

class Clock extends React.Component {
    constructor(props) {
    super(props);
    this.state = {date: new Date()}; //狀態=現在的時間
}

2. 把Clock render到頁面上

render() {
    return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            // toLocaleTimeString()是js的方法，與這次談state的概念沒關係
          </div>
    );
}

3. react會自動在render之後呼叫componentDidMount()
4. 在componentDidMount()裡面，我們每秒呼叫this.tick()

componentDidMount() {
    this.timerID = setInterval(
        () => this.tick(),
        1000
    );
}

5. 在this.tick()裡面，我們將state設定成現在時間

tick() {
    this.setState({
        date: new Date()
    });
}

6. 於是，狀態被改變了，畫面就更新了。

欸，那componentDidUpdate()呢？跑去哪了？
我們可以程式碼裡面加入這一段，在componentDidUpdate()的hook裡面，console.log('test')，會發現console裡面每一秒都會出現test，他！被觸發了！

componentDidUpdate() {
    console.log('test')
}