react自定义hook的使用方法

最新推荐文章于 2022-09-23 20:57:07 发布

前端的路很长

最新推荐文章于 2022-09-23 20:57:07 发布

阅读量491

点赞数 1

分类专栏： react JavaScript 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_46194750/article/details/126796612

版权

react 同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

什么是自定义hooks呢？

可以将组件逻辑提取到可重用的函数中的Hook。

import React,{ useState,useEffect } from 'react'

// 自定义hooks(屏幕的宽)
const useWidth=()=>{
    const [width,setWidth]=useState(window.innerWidth)
    const onResize=()=>{
        setWidth(window.innerWidth)
    }

    useEffect(()=>{
        window.addEventListener('resize',onResize)
        return ()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])
    return [width]
}

//自定义hooks(鼠标的位置)
const useMone=()=>{
    const [xstate,setXstate]=useState(0)
    const [ystate,setYstate]=useState(0)
    const onMove=(MouseEvent)=>{
        console.log(MouseEvent);
        setXstate(MouseEvent.x)
        setYstate(MouseEvent.y)
    }
    useEffect(()=>{
        document.documentElement.addEventListener('mousemove',onMove)
        // Document.documentElement 是一个会返回文档对象（document）的根元素的只读属性（如 HTML 文档的 <html> 元素）。
        return ()=>{
            document.documentElement.removeEventListener('mousemove',onMove)
        }
    },[])
    return [xstate,ystate]
}

export default function Myhooks() {
    const [width]=useWidth(0)//浏览器窗口的宽度
    const [xstate,ystate]=useMone(0)
    console.log(xstate,ystate);
  return (
    <div>
        {width}
        <hr/>
        鼠标的位置：{xstate},{ystate}
    </div>
  )
}