教你在react中创建自定义hooks

更新时间：2021年11月13日 10:45:15 作者：JingG459

简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。自定义hook是一个从use开始的调用其他hook的Javascript函数，下面看下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 () => {
      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进行逻辑复用

三、使用自定义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的文章就介绍到这了,更多相关react自定义hooks内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react
hooks

react+ant.d添加全局loading方式
这篇文章主要介绍了react+ant.d添加全局loading方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
react中实现修改input的defaultValue
这篇文章主要介绍了react中实现修改input的defaultValue方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
hooks写React组件的5个注意细节详解
这篇文章主要为大家介绍了hooks写React组件的5个需要注意的细节详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
react中value与defaultValue的区别及说明
这篇文章主要介绍了react中value与defaultValue的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
react中使用heatmap.js实现热力图的绘制
heatmap.js 是一个用于生成热力图的 JavaScript 库,React 是一个流行的 JavaScript 库,用于构建用户界面,本小编给大家介绍了在React 应用程序中使用heatmap.js实现热力图的绘制的示例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-12-12
React三大属性之props的使用详解
这篇文章主要介绍了React三大属性之props的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
使用React Hooks模拟生命周期的实现方法
这篇文章主要介绍了使用React Hooks模拟生命周期,本文举例说明如何使用 hooks 来模拟比较常见的 class 组件生命周期，需要的朋友可以参考下
2023-02-02
React中Portals与错误边界处理实现
本文主要介绍了React中Portals与错误边界处理实现，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2021-07-07
React中进行条件渲染的实现方法
React是一种流行的JavaScript库,它被广泛应用于构建Web应用程序,在React中,条件渲染是一个非常重要的概念,它允许我们根据不同的条件来呈现不同的内容,在本文中,我们将探讨React如何进行条件渲染,需要的朋友可以参考下
2023-11-11
基于React封装一个验证码输入控件
邮箱、手机验证码输入是许多在线服务和网站常见的安全验证方式之一,本文主要来和大家讨论一下如何使用React封装一个验证码输入控件,感兴趣的可以了解下
2024-03-03