react18-学习笔记27-useEffect3

简介: react18-学习笔记27-useEffect3

image.png

import React, { useEffect, useState } from "react";
interface IHelloProps {
  message?: string;
}
const MouseButton:React.FC = () => {
  const [like, setLike] = useState(0);
  const [positions,setPosition]=useState({x:0,y:0})
 useEffect(()=>{
    const updateMouse=(e:MouseEvent)=>{
        setPosition({x:e.clientX,y:e.clientY})
    }
    document.addEventListener("click",updateMouse)
    return()=> (
      document.removeEventListener("click",updateMouse)
    )
 },[])
  return (
    <p>x:{positions.x},Y:{positions.y}</p>
  )
};
export default MouseButton;
相关文章
|
9月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
218 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
移动开发 前端开发 Java
技术笔记:ReactNative学习笔记(一)————(RN)快速入门
技术笔记:ReactNative学习笔记(一)————(RN)快速入门
174 0
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
231 0
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
180 0
|
前端开发
React学习笔记(一)
React学习笔记(一)
|
前端开发
React学习笔记
React学习笔记
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
115 0
|
JavaScript 前端开发 调度
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
123 0
|
前端开发
前端学习笔记202307学习笔记第六十二天-react原理之1
前端学习笔记202307学习笔记第六十二天-react原理之1
152 0
|
前端开发
前端学习笔记202307学习笔记第六十一天-react知识点串讲之6
前端学习笔记202307学习笔记第六十一天-react知识点串讲之6
145 0