如果有錯誤，歡迎留言指教~ Q_Q

useState：讓 component 擁有內部的 state

如果要 render 畫面，就要設定 useState，而不是一般的變數

因為當 state 改變時， component 就會被重新 render

重新 render 後， state 會被保留在 component 裡面，不會消失

const [state, setState] = useState(initialState);

useState 會回傳一組 array: [目前的 state, 更新 state 的 function]

useState 就類似在 class 中 this.state 和 this.setState 的用法。
但在 function component 中，我們沒有 this，所以我們沒辦法指定或讀取 this.state。

我們最好~~~ 在一開始先給個初始值 -> 這樣才一看就知道型態了呀！

如果是 number 就給他 number，如果是 Boolean 就給 ture 或 false

當然他也可以是一組 object{} 或是 array[] -> 你可以把相關的資料設定在一起

const [age, setAge] = useState(18);
const [isCheckOut, setIsCheckOut] = useState(false);
const [drinkOrder, setDrinkOrder] = useState({
    name: '',
    buyer: '',
    options: '',
  })

當拆很多個 state 在元件裡，每一個 state 更新就 render，就很容易被過度重新渲染

// -> 不好
const [isLoggedIn,setIsLoggedIn] = useState()
const [currentUser,setCurrentUser] = useState()
const [authToken,setAuthToken] = useState()

// -> 較佳
const [authState,setAuthState] = useState({
    isLoggedIn: true,
    currentUser: 'sharon',
    authToken: 'xxx',
})

但不要直接將 props 進來的值，當作初始值 >>>>

命名規範: [sharon, setSharon] = useState(initialSharon)

ref:

1. https://zh-hant.reactjs.org/docs/hooks-state.html
2. https://zh-hant.reactjs.org/docs/lifting-state-up.html