React监听浏览器窗口大小的改变

直接上干货

1.使用 react 函数时组件获取

import React, { useState, useEffect, } from 'react';const App = () => {// 浏览器的高度 默认设置为0；const [height, setHeight] = useState(0); const resizeUpdate = (e) => {// 通过事件对象获取浏览器窗口的高度let h = e.target.innerHeight;setHeight(h);};useEffect(() => {// 页面刚加载完成后获取浏览器窗口的大小let h = window.innerHeight;setHeight(h)// 页面变化时获取浏览器窗口的大小 window.addEventListener('resize', resizeUpdate);return () => {// 组件销毁时移除监听事件window.removeEventListener('resize', resizeUpdate);}}, []);return (<div>浏览器的高度为：{height}</div>);
};export default App;

2. 类式组件

import React, { Component } from 'react';class App extends Component { constructor(props){super(props);this.state = {height: 0}}resizeUpdate = (e) => {// 通过事件对象获取浏览器窗口高度let h = e.target.innerHeight;this.setState({height: h})}componentDidMount(){// 页面加载完成获取高度let h = window.innerHeight;this.setState({height: h});// 当页面大小改变后获取高度window.addEventListener('resize', this.resizeUpdate);}componentWillUnmount(){// 离开页面时移除监听事件window.removeEventListener('resize', this.resizeUpdate);}render() {return (<div>浏览器窗口的高度是：{this.state.height}</div>)}
}export default App;

React监听浏览器窗口大小的改变相关推荐

vue监听浏览器窗口大小变化,做对应的操作
页面初始化mounted的时候,通过document.body.clientWidth和document.body.clientHeight获取到浏览器的宽和高,然后通过 window.onresiz ...
js 监听浏览器窗口大小变化
监听浏览器大小变化 window.addEventListener('resize', function() {// 变化后需要做的事console.log("bianhuale====== ...
html5 浏览器退回事件,html5的pushstate以及监听浏览器返回事件的实现
这篇文章主要介绍了html5的pushstate以及监听浏览器返回事件的实现,主要介绍了pushstate的使用,以及监听浏览器的解决等问题,感兴趣的可以一起来了解一下 pushstate与监听浏览器 ...
html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
09_Filter过滤器(访问所有资源前，首先执行自定义过滤器类的doFilter方法)_Listener监听器(监听域对象的改变)
Filter 什么是Web过滤器? 如何使用Filter过滤器? 自定义Filter类的生命周期过滤器可以拦截哪些资源路径? 拦截方式配置:资源被访问的方式过滤器链的默认执行顺序是什么? 如何配置 ...
linux输入数字切换浏览器tab,js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 --IT唐伯虎摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventList ...
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
popState 监听浏览器切换路由
浏览器内 popState 监听器使用在前端开发过程中,在一些业务场景中可能会遇到监听浏览器前进/后退.控制路由等情况.我们可以使用Web API提供的popState事件来处理这些情况,提到pop ...
react 监听组合键_投资组合中需要的5个React项目
react 监听组合键 You've put in the work and now you have a solid understanding of the React library. 您已经完 ...

React监听浏览器窗口大小的改变

直接上干货

React监听浏览器窗口大小的改变相关推荐

最新文章

热门文章