这篇文章主要介绍“怎么在React中创建自定义hooks”,在日常操作中,相信很多人在怎么在react中创建自定义hooks问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么在react中创建自定义hooks
这篇文章主要介绍“怎么在React中创建自定义hooks”,在日常操作中,相信很多人在怎么在react中创建自定义hooks问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么在react中创建自定义hooks”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
逻辑复用
简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。 自定义hook是一个从use开始的调用其他hook的javascript函数。
例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 () => { document.removeEventListener('mousemove', move) } }, []) 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 }) } 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> )
很明显,以上两个例子呈现效果不同,但使用的逻辑代码大部分相同时,这些逻辑代码我们就可以使用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 () => { document.removeEventListener('mousemove', move) } }, []) return position}
我们在useMousePosition函数中提取了此功能。现在,我们可以将其导入到要使用的任何位置!
最后像使用普通函数那样使用即可
const position = useMousePosition() return ( <div> x:{position.x} y:{position.y} </div> )
很明显使代码量减少了
到此,关于“怎么在react中创建自定义hooks”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
--结束END--
本文标题: 怎么在react中创建自定义hooks
本文链接: https://www.lsjlt.com/news/305542.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0