前言

前两天简单介绍了 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
如过不这样做，就会出现以下错误讯息 连结