Day 09 - 那个很常用到的 useState

如果有错误，欢迎留言指教~ 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 进来的值，当作初始值 >>>>