教你在react中创建⾃定义hooks
⼀、什么是⾃定义hooks
逻辑复⽤
简单来说就是使⽤⾃定义hook可以将某些组件逻辑提取到可重⽤的函数中。⾃定义hook是⼀个从use开始的调⽤其他hook的Javascript函数。
⼆、不使⽤⾃定义hook时
例1：当我们整个页⾯需要获取⽤户⿏标移动的坐标时，不使⽤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 () => {
}
}, [])
return (
<div>
x:{position.x}
y:{position.y}
</div>
)
例2：当我们页⾯中有⼀个图⽚要跟随⿏标移动时，不使⽤hook的代码，我们也可以这样写：
const [position, setPosition] = useState({
x: 0,
y: 0
})
useEffect(() => {
const move = (e) => {
setPosition({ x: e.x, y: e.y })
reacthooks理解
}
document.addEventListener('mousemove', move)
return () => {
}
}, [])
return (
<div>
<img
src={img}
style={{
position: 'absolute',
top: position.y,
left: position.x,
}}
alt=""
/>
</div>
)
很明显，以上两个例⼦呈现效果不同，但使⽤的逻辑代码⼤部分相同时，这些逻辑代码我们就可以使⽤hook进⾏逻辑复⽤三、使⽤⾃定义hook
我们提取以上两个例⼦⾥可以复⽤的逻辑代码，新建⼀个名为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 () => {
}
}, [])
return position
}
我们在useMousePosition函数中提取了此功能。现在，我们可以将其导⼊到要使⽤的任何位置！
最后像使⽤普通函数那样使⽤即可
const position = useMousePosition()
return (
<div>
x:{position.x}
y:{position.y}
</div>
)
很明显使代码量减少了
到此这篇关于react中创建⾃定义hooks的⽂章就介绍到这了，更多相关react⾃定义hooks内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。