前言

前兩天簡單介紹了 Props 的用法，而今天開始我們要來認識 React Hooks。開始前我們引用官方文件的話來對Hook 做簡單介紹。

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。

而我們今天要先介紹最常用的 Hooks UseState、UseEffect

UseState

會回傳一個包含兩個值的 array，第一個值是 state、第二個值是用來更新 state 的函式。每當 state 值改變，就會觸發 re-render

import {useState} from 'React';
const [useState, setuseState] = useState({count: 4, name: 'blue'});

setuseState(prevState => {...prevState, count: prevState.prevState, name: prevState.name })

UseEffect

任何產生 SideEffect 的行為都該放在 UseEffect 中。 其有兩個參數，第一個為 Effect Function ，第二為 dependacy array

// 只會在 initial 後渲染一次
useEffect(() => {

},[])

小提醒

UseEffect 的回傳值只能是空或是 cleanup function
如過不這樣做，就會出現以下錯誤訊息 連結