我想說的是
介紹 useState hook，並且做一個計數器

上一篇建立了一個靜態的純按摩店服務列表
因為老闆今天找到一個身懷絕技的按摩師，他想在服務清單上加入新的 Todo
欸，不是我們不是做 Todo list！
老闆想加入的是新按摩師的服務

介紹一個這次會用到的東西 State Hook
這是在 react 16.8 被加入的新東西，據說大大的減少 react 使用難度
因為我沒用過以前的，所以是聽別人說。這部分應該很多大大寫過
我這次鐵人賽就看到好幾篇寫這個的

先放個官方文件上的範例聞香一下

import React, {Component} from 'react'

class Massage extends Component{
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
    
  render(){
    return  (
      <>
        <p>你已經按了 {this.state.count} 次</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          按我
        </button>
      </>
    )
  }
}
export default Massage

先說明一開始的 constructor 區塊
在 ES6 中可以藉由 extends 來實現 Class 的繼承
若是子類別沒有定義 constructor 方法，則會預設加入。
所以每一個子類別都必定具有 constructor 方法
然而只有在子類別的 constructor 中呼叫 super 之後才能使用 this 關鍵字，否則會報錯
因為這是子類別的建構基於父類別，只有 super 可以調用父類別中的內容

然而我們使用 Babel 編譯 JSX 的話有更簡單的方法可以達成一樣的事情

state = {
  count: 0,
}

我們設定了一個 state 叫做 count 並且在每次按鈕 onClick 的時候
呼叫 setState 並且把剛剛設定 state 中的 count 加一
最後顯示在 <p></p> 中
應該有注意到大括號(curly brackets)出現在 DOM 中
這邊的大括號是告訴 React DOM 現在這個是動態的屬性，請幫我 render
而 React DOM 首先會比較元素內容前後的不同，在渲染時只會更改改變的部分

結果就會像這樣

而下一篇，就來把原本靜態寫死的按摩服務列表從靜態改為動態
讓我們可以自由的增加新服務吧...什麼你說刪除？
偷偷告訴你，我也不知道什麼時候會寫到