Recat 鼠标移动实时显示坐标

一:React实时显示鼠标坐标事件。

// 从react解构两种方法，
import { useState,useEffect } from "react";

// 定义方法，状态管理
function useOnMouse(){
    var [ page,setPage ] = useState({x:0,y:0})
    // 定义方法，改变状态管理初始值。
    function onSetPage(e){
        setPage(
            {x:e.pageX,y:e.pageY}
        )
    }
    useEffect( () => {
        // 通过useEffect挂载的第一个方法，监听鼠标移动。
        window.addEventListener('mousemove',onSetPage);
        // 通过useEffect return卸载的方法，移除鼠标监听事件。
        return ()=> window.removeEventListener('mousemove',onSetPage);
    },[])
    // 返回的page(响应式更新)
    return page;
}
// 把useOnMouse组件抛出。
export default useOnMouse;

在父组件中引入，使用即可

//引入子组件
import onMouse from './components/onMouse';


//父组件 实时显示数据
    const mous = onMouse()
     return (
        <>
            <p>x轴:{mous.x}px,y轴:{mous.y}px</p>
        </>
    )

二：React实现点击翻转事件

import { useRef,useEffect} from 'react';
//返回一个ref，单击ref的dom，反转dom的文本
// 生命周期挂载完毕，添加单击事件。
// 生命周期卸载完毕，移除事件
function useReverse(type="click"){
    // 获取一个dom引用
    const el = useRef()
    // 返回函数
    function reverse(){
        // 把当前节点的dom反转
        var str = this.innerText.split('').reverse().join('');
        // 重新赋值文本实现反转
        this.innerText = str;
    }
    // 当挂载完毕，执行添加事件(type类型默认是click，可以是不同的事件类型)
    useEffect(()=>{
        el.current.addEventListener(type,reverse)
        // 卸载完毕，执行移除事件
        return ()=>el.current.removeEventListener(type,reverse)
    },[])
    //返回dom引用
    return el
}
//把useReverse组件抛出
export default useReverse;

父组件：

//引入组件
import useReverse from './components/useReverse';

function App(){
    const size = useWinSize()
    var el1 = useReverse()
    var el2 = useReverse('mouseover')
    return (
        <>
            <p ref={el1}>我是大帅哥！</p>
            <p ref={el2}>好好学习，天天向上</p>
        </>
    )

}