iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

30天學 React.js 系列 第 9

[Day9] [筆記]React Hooks-UseState、UseEffect

前言

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

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

而我們今天要先介紹最常用的 Hooks UseStateUseEffect

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
如過不這樣做,就會出現以下錯誤訊息 連結


上一篇
[Day8] [筆記] React Props (下)
下一篇
[Day10] [筆記]React Hooks-useMemo、useCallback
系列文
30天學 React.js 14

尚未有邦友留言

立即登入留言