教你在react中創(chuàng)建自定義hooks
一、什么是自定義hooks
邏輯復(fù)用
簡(jiǎn)單來說就是使用自定義hook可以將某些組件邏輯提取到可重用的函數(shù)中。 自定義hook是一個(gè)從use開始的調(diào)用其他hook的Javascript函數(shù)。
二、不使用自定義hook時(shí)
例1：當(dāng)我們整個(gè)頁面需要獲取用戶鼠標(biāo)移動(dòng)的坐標(biāo)時(shí)，不使用hook的代碼，我們可以這樣寫
const [position, setPosition] = useState({
x: 0,
y: 0
})
useEffect(() => {
const move = (e) => {
setPosition({ x: e.x, y: e.y })
}
document.addEventListener('mousemove', move)
return () => {
document.removeEventListener('mousemove', move)
}
}, [])
return (
<div>
x:{position.x}
y:{position.y}
</div>
)
例2：當(dāng)我們頁面中有一個(gè)圖片要跟隨鼠標(biāo)移動(dòng)時(shí)，不使用hook的代碼，我們也可以這樣寫：
const [position, setPosition] = useState({
x: 0,
y: 0
})
useEffect(() => {
const move = (e) => {
setPosition({ x: e.x, y: e.y })
}
document.addEventListener('mousemove', move)
return () => {
document.removeEventListener('mousemove', move)
}
}, [])
return (
<div>
<img
src={img}
style={{
position: 'absolute',
top: position.y,
left: position.x,
}}
alt=""
/>
</div>
)
很明顯，以上兩個(gè)例子呈現(xiàn)效果不同，但使用的邏輯代碼大部分相同時(shí)，這些邏輯代碼我們就可以使用hook進(jìn)行邏輯復(fù)用
三、使用自定義hook
我們提取以上兩個(gè)例子里可以復(fù)用的邏輯代碼，新建一個(gè)名為useMousePosition的文件
import { useState, useEffect } from 'react'
export default function useMousePosition() {
const [position, setPosition] = useState({
x: 0,
y: 0
})
useEffect(() => {
const move = (e) => {
setPosition({ x: e.x, y: e.y })
}
document.addEventListener('mousemove', move)
return () => {
document.removeEventListener('mousemove', move)
}
}, [])
return position
}
我們?cè)趗seMousePosition函數(shù)中提取了此功能?，F(xiàn)在，我們可以將其導(dǎo)入到要使用的任何位置！
最后像使用普通函數(shù)那樣使用即可
const position = useMousePosition()
return (
<div>
x:{position.x}
y:{position.y}
</div>
)
很明顯使代碼量減少了
到此這篇關(guān)于react中創(chuàng)建自定義hooks的文章就介紹到這了,更多相關(guān)react自定義hooks內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了react組件實(shí)例屬性state,有狀態(tài)state的組件稱作復(fù)雜組件,沒有狀態(tài)的組件稱為簡(jiǎn)單組件，狀態(tài)里存儲(chǔ)數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動(dòng)頁面的展示，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-02-02
React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼
這篇文章主要介紹了React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
簡(jiǎn)單來說就是使用自定義hook可以將某些組件邏輯提取到可重用的函數(shù)中。 自定義hook是一個(gè)從use開始的調(diào)用其他hook的Javascript函數(shù)，下面看下react中創(chuàng)建自定義hooks的相關(guān)知識(shí)，感興趣的朋友一起看看吧2021-11-11
詳解使用create-react-app添加css modules、sasss和antd
這篇文章主要介紹了詳解使用create-react-app添加css modules、sasss和antd，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
React函數(shù)式組件Hook中的useEffect函數(shù)的詳細(xì)解析
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合2022-10-10
這篇文章主要為大家介紹了react-native只保留3x圖原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter
這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
React Draggable插件如何實(shí)現(xiàn)拖拽功能
這篇文章主要介紹了React Draggable插件如何實(shí)現(xiàn)拖拽功能問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
在?React?項(xiàng)目中全量使用?Hooks的方法
這篇文章主要介紹了在?React?項(xiàng)目中全量使用?Hooks,使用 Hooks 能為開發(fā)提升不少效率，但并不代表就要拋棄 Class Component，依舊還有很多場(chǎng)景我們還得用到它，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
這篇文章主要為大家介紹了useEffect支持async及await的使用方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07