教你在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实现双滑块交叉滑动
这篇文章主要为大家详细介绍了React实现双滑块交叉滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
React组件的创建与state同步异步详解
这篇文章主要介绍了react组件实例属性state,有状态state的组件称作复杂组件,没有状态的组件称为简单组件，状态里存储数据,数据的改变驱动页面的展示，本文结合实例代码给大家详细讲解，需要的朋友可以参考下
2023-03-03
ReactNative支付密码输入框实现详解
这篇文章主要为大家介绍了ReactNative支付密码输入框实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React-hooks面试考察知识点汇总小结(推荐)
这篇文章主要介绍了React-hooks面试考察知识点汇总,Hook 使你在无需修改组件结构的情况下复用状态逻辑，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
react-native动态切换tab组件的方法
在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.这篇文章主要介绍了react-native动态切换tab组件的方法，非常具有实用价值，需要的朋友可以参考下
2018-07-07
React Suspense解决竞态条件详解
这篇文章主要为大家介绍了React Suspense解决竞态条件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React18系列commit从0实现源码解析
这篇文章主要为大家介绍了React18系列commit从0实现源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
React中的生命周期用法详解
这篇文章主要介绍了React中的生命周期用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-03-03
React实现动态调用的弹框组件
这篇文章主要为大家详细介绍了React实现动态调用的弹框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
React项目中axios的封装与API接口的管理详解
Axios是一个npm软件包,允许应用程序将HTTP请求发送到Web API,下面这篇文章主要给大家介绍了关于React项目中axios的封装与API接口的管理的相关资料,需要的朋友可以参考下
2021-09-09