React自定義hook的方法
Hook
是 React 16.8
的新增特性。它通常與函數(shù)式組件同時(shí)使用??梢允购瘮?shù)式組件在不編寫 class
的情況下,可以擁有class
組件的狀態(tài)、生命周期、引用等功能。
React
中常用的hooks
有:
useState
狀態(tài)管理useEffect
生命周期useContext
跨組件數(shù)據(jù)傳遞useRef
組件引用- ....
自定義hook
其實(shí)就是自定義函數(shù),與我們寫函數(shù)組件非常類似。自定義的hook
組件的命名與系統(tǒng)的hooks
一樣,需要以use
開頭。下面我們用react+ts
就來介紹一下常用的幾個(gè)自定義hook
- 獲取窗口寬高變化
實(shí)現(xiàn)目標(biāo):通過 useWindowSize()
來實(shí)時(shí)獲取窗口的寬高
新建一個(gè)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(() => { //監(jiān)聽size變化 window.addEventListener('resize', () => { setSize({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }) }) return () => { //組件銷毀時(shí)移除監(jiān)聽 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
在瀏覽器拖動(dòng)放大縮小時(shí),頁面上的數(shù)據(jù)可動(dòng)態(tài)變化
- 獲取滾動(dòng)偏移量變化
目標(biāo):通過 useWindowScroll()
來實(shí)時(shí)獲取頁面的滾動(dòng)偏移量
新建一個(gè)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(() => { //監(jiān)聽 window.addEventListener('scroll', () => { setOff({ x: window.scrollX, y: window.scrollY }) }) return () => { //移除監(jiān)聽 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>滾動(dòng)y:{offSet.y}</div> <div>滾動(dòng)x:{offSet.x}</div> </div> ) } export default App
- 自動(dòng)同步至localStorage
目標(biāo):通過 const [value, setValue] = useLocalStorage('key', 'value')
可以傳入默認(rèn)的初始value和key,且每次修改value可以自動(dòng)同步到localStorage中
新建一個(gè)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={() => { //點(diǎn)擊修改value,會(huì)自動(dòng)同步至本地 setValue('vue') }}>點(diǎn)擊</button> <div>{ value }</div> </div> ) } export default App
到此這篇關(guān)于React自定義hook的文章就介紹到這了,更多相關(guān)React自定義hook內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- React使用useImperativeHandle自定義暴露給父組件的示例詳解
- React 封裝自定義組件的操作方法
- React中如何設(shè)置自定義滾動(dòng)條樣式
- React videojs 實(shí)現(xiàn)自定義組件(視頻畫質(zhì)/清晰度切換) 的操作代碼
- react18?hooks自定義移動(dòng)端Popup彈窗組件RcPop
- react ant protable自定義實(shí)現(xiàn)搜索下拉框
- 教你在react中創(chuàng)建自定義hooks
- React Native自定義組件與輸出方法詳解
- React Agent 自定義實(shí)現(xiàn)代碼
相關(guān)文章
React Native 搭建開發(fā)環(huán)境的方法步驟
本篇文章主要介紹了React Native 搭建開發(fā)環(huán)境的方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10React 組件渲染和更新的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02自己動(dòng)手封裝一個(gè)React Native多級聯(lián)動(dòng)
這篇文章主要介紹了自己動(dòng)手封裝一個(gè)React Native多級聯(lián)動(dòng),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式
本篇文章主要介紹了React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11React如何實(shí)現(xiàn)Vue的watch監(jiān)聽屬性
在 Vue 中可以簡單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化,還能獲取到改變前的舊值,而在 React 中是沒有 watch 的,今天通過本文給大家講解React實(shí)現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下2023-06-06react?hooks頁面實(shí)時(shí)刷新方式(setInterval)
這篇文章主要介紹了react?hooks頁面實(shí)時(shí)刷新方式(setInterval),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03