react的hooks的用法詳解
hooks的作用
它改變了原始的React類的開發(fā)方式，改用了函數(shù)形式;它改變了復(fù)雜的狀態(tài)操作形式，讓程序員用起來更輕松;它改變了一個(gè)狀態(tài)組件的復(fù)用性，讓組件的復(fù)用性大大增加。
useState
// 聲明狀態(tài)
const [ count , setCount ] = useState(0);
// 使用狀態(tài)
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>
useEffect
一個(gè)參數(shù)
useEffect(()=>{
console.log("首次渲染與更新")
})
模擬:
componentDidMount componentDidUpdate
一個(gè)參數(shù)帶return
useEffect(()=>{
console.log("首次渲染與更新")
return ()=>{console.log(首次卸載)}
})
模擬:
- componentDidMount
- componentDidUpdate
return
- componetWillUnmount
- componentDidUpdate
第二個(gè)參數(shù)是空數(shù)組,return
useEffect(()=>{
console.log("首次渲染與更新")
return ()=>{console.log(首次卸載)}
},[])
相對(duì)于生命周期的componentDidMount和componetWillUnmount
第二個(gè)參數(shù)是具體的值
useEffect(()=>{
console.log("首次渲染與更新")
return ()=>{console.log(首次卸載)}
},[num])
模擬
- componentDidMount
- componentDidUpdate(update只對(duì)num有用)
return
- componetWillUnmount
- componentDidUpdate(update只對(duì)num有用)
useRef
const inp = useRef(null)
<input ref={inp}>
//調(diào)用
inp.current.value
自定義hook
定義：const [size,setSize] = useState({height:xxx,width:xxx})
處理：
const onResize = ()=>{setSize({width:xxx,height:xxx})}
useEffect(()=>{
監(jiān)聽事件 window.addEventListener(“resize”,onResize)
return 移除監(jiān)聽()=>window.removeEventListener(“resize”,onResize)
},[])
返回 return size
使用 const size = useWinSize()
到此這篇關(guān)于react的hooks的用法詳解的文章就介紹到這了,更多相關(guān)react hooks用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決React報(bào)錯(cuò)Encountered?two?children?with?the?same?key
這篇文章主要為大家介紹了React報(bào)錯(cuò)Encountered?two?children?with?the?same?key解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了antd form表單如何處理自定義組件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了React中遍歷數(shù)組生成標(biāo)簽問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了React日期時(shí)間顯示組件的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
React實(shí)現(xiàn)antdM的級(jí)聯(lián)菜單實(shí)例
這篇文章主要為大家介紹了React實(shí)現(xiàn)antdM的級(jí)聯(lián)菜單實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React?antd中setFieldsValu的簡(jiǎn)便使用示例代碼
form.setFieldsValue是antd?Form組件中的一個(gè)方法,用于動(dòng)態(tài)設(shè)置表單字段的值,它接受一個(gè)對(duì)象作為參數(shù),對(duì)象的鍵是表單字段的名稱,值是要設(shè)置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡(jiǎn)便使用,需要的朋友可以參考下2023-08-08
react-json-editor-ajrm解析錯(cuò)誤與解決方案
由于歷史原因,項(xiàng)目中 JSON 編輯器使用的是 react-json-editor-ajrm,近期遇到一個(gè)嚴(yán)重的展示錯(cuò)誤,傳入編輯器的數(shù)據(jù)與展示的不一致,這是產(chǎn)品和用戶不可接受的,本文給大家介紹了react-json-editor-ajrm解析錯(cuò)誤與解決方案,需要的朋友可以參考下2024-06-06
React forwardRef的使用方法及注意點(diǎn)
React.forwardRef的API中ref必須指向dom元素而不是React組件，通過一段示例代碼給大家介紹了React forwardRef使用方法及注意點(diǎn)還有一些特殊情況分析，感興趣的朋友跟隨小編一起看看吧2021-06-06
React是現(xiàn)在前端使用頻率最高的三大框架之一，React率先提出虛擬DOM的思想和實(shí)現(xiàn)，使其保持有良好的性能。本篇文章將對(duì)React組件化的入門學(xué)習(xí)進(jìn)行講解，同時(shí)針對(duì)模塊化的思想進(jìn)行概述，為接下來組件化開發(fā)的文章進(jìn)行知識(shí)儲(chǔ)備2022-09-09
生命周期函數(shù)指在某一時(shí)刻組件會(huì)自動(dòng)調(diào)用并執(zhí)行的函數(shù)。React每個(gè)類組件都包含生命周期方法，以便于在運(yùn)行過程中特定的階段執(zhí)行這些方法2022-09-09