Shulou(Shulou.com)06/02 Report--

这篇文章主要介绍"怎么在react中创建自定义hooks"，在日常操作中，相信很多人在怎么在react中创建自定义hooks问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"怎么在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 ( x:{position.x} y:{position.y} )

例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 (

)

Obviously, the above two examples present different effects, but when most of the logic code used is the same, these logic codes can be logically reused using hooks.

Third, use custom hook

We extract the reusable logic code from the above two examples and create a new file named 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}

We extracted this functionality in the useMousePosition function. Now we can import it wherever we want to use it!

Finally, just use it like you would use a normal function

const position = useMousePosition() return ( x:{position.x} y:{position.y} )

obviously reduced the amount of code.

At this point, the study of "how to create custom hooks in react" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.