react的hooks的用法詳解

更新時間：2020年10月12日 11:28:41 作者：圣京都

這篇文章主要介紹了react的hooks的用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

hooks的作用

它改變了原始的React類的開發(fā)方式，改用了函數形式;它改變了復雜的狀態(tài)操作形式，讓程序員用起來更輕松;它改變了一個狀態(tài)組件的復用性，讓組件的復用性大大增加。

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

一個參數

useEffect(()=>{
 console.log("首次渲染與更新")
})

模擬:
componentDidMount componentDidUpdate

一個參數帶return

useEffect(()=>{
 console.log("首次渲染與更新")
return ()=>{console.log(首次卸載)}
})

模擬:

componentDidMount
componentDidUpdate

return

componetWillUnmount
componentDidUpdate

第二個參數是空數組,return

useEffect(()=>{
 console.log("首次渲染與更新")
return ()=>{console.log(首次卸載)}
},[])

相對于生命周期的componentDidMount和componetWillUnmount

第二個參數是具體的值

useEffect(()=>{
 console.log("首次渲染與更新")
return ()=>{console.log(首次卸載)}
},[num])

模擬

componentDidMount
componentDidUpdate(update只對num有用)

return

componetWillUnmount
componentDidUpdate(update只對num有用)

useRef

const inp = useRef(null)
<input ref={inp}>
//調用
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()

到此這篇關于react的hooks的用法詳解的文章就介紹到這了,更多相關react hooks用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

react
hooks

解決React報錯Encountered?two?children?with?the?same?key
這篇文章主要為大家介紹了React報錯Encountered?two?children?with?the?same?key解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
antd form表單如何處理自定義組件
這篇文章主要介紹了antd form表單如何處理自定義組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
React中遍歷數組生成標簽問題
這篇文章主要介紹了React中遍歷數組生成標簽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
React日期時間顯示組件的封裝方法
這篇文章主要為大家詳細介紹了React日期時間顯示組件的封裝方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
React實現antdM的級聯菜單實例
這篇文章主要為大家介紹了React實現antdM的級聯菜單實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
React?antd中setFieldsValu的簡便使用示例代碼
form.setFieldsValue是antd?Form組件中的一個方法,用于動態(tài)設置表單字段的值,它接受一個對象作為參數,對象的鍵是表單字段的名稱,值是要設置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡便使用,需要的朋友可以參考下
2023-08-08
react-json-editor-ajrm解析錯誤與解決方案
由于歷史原因,項目中 JSON 編輯器使用的是 react-json-editor-ajrm,近期遇到一個嚴重的展示錯誤,傳入編輯器的數據與展示的不一致,這是產品和用戶不可接受的,本文給大家介紹了react-json-editor-ajrm解析錯誤與解決方案,需要的朋友可以參考下
2024-06-06
React forwardRef的使用方法及注意點
React.forwardRef的API中ref必須指向dom元素而不是React組件，通過一段示例代碼給大家介紹了React forwardRef使用方法及注意點還有一些特殊情況分析，感興趣的朋友跟隨小編一起看看吧
2021-06-06
React組件化學習入門教程講解
React是現在前端使用頻率最高的三大框架之一，React率先提出虛擬DOM的思想和實現，使其保持有良好的性能。本篇文章將對React組件化的入門學習進行講解，同時針對模塊化的思想進行概述，為接下來組件化開發(fā)的文章進行知識儲備
2022-09-09
React生命周期函數深入全面介紹
生命周期函數指在某一時刻組件會自動調用并執(zhí)行的函數。React每個類組件都包含生命周期方法，以便于在運行過程中特定的階段執(zhí)行這些方法
2022-09-09