React自定義hook的方法
-
什麼是hook
Hook
是 React 16.8
的新增特性。它通常與函數式組件同時使用。可以使函數式組件在不編寫 class
的情況下,可以擁有class
組件的狀態、生命周期、引用等功能。
-
常用的有哪些hook
React
中常用的hooks
有:
useState
狀態管理useEffect
生命周期useContext
跨組件數據傳遞useRef
組件引用- ….
-
自定義hook
自定義hook
其實就是自定義函數,與我們寫函數組件非常類似。自定義的hook
組件的命名與系統的hooks
一樣,需要以use
開頭。下面我們用react+ts
就來介紹一下常用的幾個自定義hook
- 獲取窗口寬高變化
實現目標:通過 useWindowSize()
來實時獲取窗口的寬高
新建一個hook文件useWindowSize.ts
,代碼如下:
import { useEffect, useState } from "react"; //定義size對象 interface WindowSize { width: number, height: number } const useWindowSize = () => { const [size, setSize] = useState<WindowSize>({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }) useEffect(() => { //監聽size變化 window.addEventListener('resize', () => { setSize({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }) }) return () => { //組件銷毀時移除監聽 window.removeEventListener('resize', () => { setSize({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }) }) } },[]) return size } export default useWindowSize
組件中這樣使用:
import useWindowSize from './hooks/useWindowSize'; function App() { const size = useWindowSize() return ( <div> <div>頁面寬度:{size.width}</div> <div>頁面高度:{size.height}</div> </div> ) } export default App
在瀏覽器拖動放大縮小時,頁面上的數據可動態變化
- 獲取滾動偏移量變化
目標:通過 useWindowScroll()
來實時獲取頁面的滾動偏移量
新建一個hook文件useWindowScroll.ts
,代碼如下:
import { useEffect, useState } from "react" //定義偏移量對象 interface ScrollOffset { x: number, y: number } const useWindowScroll = () => { const [off, setOff] = useState<ScrollOffset>({ x: window.scrollX, y: window.scrollY }) useEffect(() => { //監聽 window.addEventListener('scroll', () => { setOff({ x: window.scrollX, y: window.scrollY }) }) return () => { //移除監聽 window.removeEventListener('scroll', () => { setOff({ x: window.scrollX, y: window.scrollY }) }) } }) return off } export default useWindowScroll
組件中這樣使用:
import useWindowScroll from './hooks/useWindowScroll'; function App() { const offSet = useWindowScroll() return ( <div style={{height: '10000px', width: '10000px'}}> <div>滾動y:{offSet.y}</div> <div>滾動x:{offSet.x}</div> </div> ) } export default App
- 自動同步至localStorage
目標:通過 const [value, setValue] = useLocalStorage('key', 'value')
可以傳入默認的初始value和key,且每次修改value可以自動同步到localStorage中
新建一個hook類useLocalStorage
,代碼如下:
import { useEffect, useState } from "react" const useLocalStorage = (key: string, defaultValue: string) : ([string, React.Dispatch<React.SetStateAction<string>>]) => { const [value, setValue] = useState(defaultValue) useEffect(() => { window.localStorage.setItem(key, value) },[key, value]) return [value, setValue] } export default useLocalStorage
組件中使用:
import useLocalStorage from './hooks/useLocalStorage'; function App() { const [value, setValue] = useLocalStorage('key', 'react') return ( <div> <button onClick={() => { //點擊修改value,會自動同步至本地 setValue('vue') }}>點擊</button> <div>{ value }</div> </div> ) } export default App
到此這篇關於React自定義hook的文章就介紹到這瞭,更多相關React自定義hook內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解如何構建自己的react hooks
- 解決React報錯React Hook useEffect has a missing dependency
- vue3的hooks用法總結
- 教你在react中創建自定義hooks
- React-Hook中使用useEffect清除定時器的實現方法