动态获取浏览器窗口宽高

最新推荐文章于 2024-08-25 01:04:00 发布

前端小东

最新推荐文章于 2024-08-25 01:04:00 发布

阅读量635

点赞数 1

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

本文链接：https://blog.csdn.net/sinat_39415600/article/details/120494277

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

该博客展示了如何在React应用中使用自定义hook `useWinSize` 实现监听浏览器窗口大小变化，并实时更新页面显示窗口的宽度和高度。通过订阅`resize`事件并优化清理，确保组件卸载时事件移除，实现性能优化。

摘要由CSDN通过智能技术生成

实现一个resize拖拽浏览器窗口，实时显示浏览器窗口大小宽高
上代码

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

function  useWinSize(){
	//定义初始化状态
	const  [size,setSize] =useState({
		width:document.documentElement.clientWidth,
		height:document.documentElement.clientHeight
	});
	//定义具体事件
	const onResize= useCallback(()=>{
		setSize({
			width:document.documentElement.clientWidth,
			height:document.documentElement.clientHeight
		})
		
	},[])
	
	//监听
	useEffect(()=>{
		//绑定事件
		window.addEventListener('resize',onResize)
			//优化 卸载事件 
			return ()=>{
				window.removeEventListener('resize',onResize)
			}
	},[])
	//返回
	return size
	
}
//UI

function   App9(){
	const  size=useWinSize()
	return(
		<div>页面size:{size.width},{size.height}</div>
	)
	
}

export default App9;

效果图