【前言】
　　昨天我們講到Props是由父層傳遞下去，不過有時候我們要讓Component本身對自己做相關的狀態變更或是Component變化，那這時候應該要怎麼做呢？這就是我們今天要講主題囉。

【正文】
　　state（狀態），本身是Component自身的狀態，基本上有一些特點：
　　1. state是Component自身的狀態
　　2. 可以直接對state進行變更，必須要由setState來進行變更
　　3. state本身是個物件object
　　4. setState動作是非同步（Asynchronous）
　　5. state一旦更新，Component重新render

　　跟Props最大的不同就是Component自身不用依賴由父元件所傳遞Props值的改變才能去重新render，而且我們可以做的互動性也來得更加彈性了。

　　那今天的範例就來做一個「清單搭配按鈕」，利用按鈕點擊下去之後，新增項目到Component的state，並將Component利用清單的方式顯示裡面的值。

　　我們把App.js這隻檔案改成下列程式碼：

import React from 'react';

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

  updateTime = () => { // 利用arrow function 宣告updateTime function
    this.setState({ // 利用setState更新state的值
      currentTime: new Date().toLocaleString(),
    });
  }

  render() {
    const { currentTime } = this.state;
    return (　
      <div style={{ textAlign: 'center' }}>
        <div>{currentTime}</div>
        {/* 在react中，event種類要以on<大寫開頭的事件類別>，如onClick、onChange... */}
        <button type="button" onClick={this.updateTime}>update</button>
      </div>
    );
  }
}

export default App;

　　此時再輸入npm start讓網頁重新開啟後，只要點擊按鈕就會更新時間囉。

　　但你會發現，時間這種東西不是要自動去刷新嗎？這樣寫法不是很鳥，所以在之後的文章（沒意外應該是後天）中，會再說明要怎麼去讓他自動更新，你可以先想想看要怎麼實現他吧！

　　明天我們來講一下ref這個屬性，bye~