1. React Hook/Hooks是什么?

(1). Hook是React 16.8.0版本增加的新特性/新語法 (2). 可以讓你在函數(shù)組件中使用 state 以及其他的 React 特性

2. 三個(gè)常用的Hook

(1). State Hook: React.useState() (2). Effect Hook: React.useEffect() (3). Ref Hook: React.useRef()

3. State Hook

(1). State Hook讓函數(shù)組件也可以有state狀態(tài), 并進(jìn)行狀態(tài)數(shù)據(jù)的讀寫操作 (2). 語法: const [xxx, setXxx] = React.useState(initValue) (3). useState()說明:參數(shù): 第一次初始化指定的值在內(nèi)部作緩存返回值: 包含2個(gè)元素的數(shù)組, 第1個(gè)為內(nèi)部當(dāng)前狀態(tài)值, 第2個(gè)為更新狀態(tài)值的函數(shù) (4). setXxx()2種寫法:setXxx(newValue): 參數(shù)為非函數(shù)值, 直接指定新的狀態(tài)值, 內(nèi)部用其覆蓋原來的狀態(tài)值setXxx(value => newValue): 參數(shù)為函數(shù), 接收原本的狀態(tài)值, 返回新的狀態(tài)值, 內(nèi)部用其覆蓋原來的狀態(tài)值

4. Effect Hook

(1). Effect Hook 可以讓你在函數(shù)組件中執(zhí)行副作用操作(用于模擬類組件中的生命周期鉤子) (2). React中的副作用操作:發(fā)ajax請(qǐng)求數(shù)據(jù)獲取設(shè)置訂閱 / 啟動(dòng)定時(shí)器手動(dòng)更改真實(shí)DOM (3). 語法和說明: useEffect(() => { // 在此可以執(zhí)行任何帶副作用操作return () => { // 在組件卸載前執(zhí)行// 在此做一些收尾工作, 比如清除定時(shí)器/取消訂閱等}}, [stateValue]) // 如果指定的是[], 回調(diào)函數(shù)只會(huì)在第一次render()后執(zhí)行(4). 可以把 useEffect Hook 看做如下三個(gè)函數(shù)的組合componentDidMount()componentDidUpdate()componentWillUnmount()

5. Ref Hook

(1). Ref Hook可以在函數(shù)組件中存儲(chǔ)/查找組件內(nèi)的標(biāo)簽或任意其它數(shù)據(jù) (2). 語法: const refContainer = useRef() (3). 作用:保存標(biāo)簽對(duì)象,功能與React.createRef()一樣

---

總結(jié)

以上是生活随笔為你收集整理的reactjs三个常用的Hook：State Hook、 Effect Hook、 Ref Hook的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。