react hook监听窗口大小

学习hook使用小demo：

import React,{useCallback,useState,useEffect} from 'react';function ChangeSize(){const [size,setSize] = useState({width:document.documentElement.clientWidth,hieght: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;
}

使用：

// 使用 在组件中引入方法ChangeSize;
// let size  = ChangeSize();
//     size.width;//get width;
//     size.height;//get height;

react hook监听窗口大小相关推荐

React Hook 监听路由切换实时同步渲染页面功能
场景对于全局共用的顶部,需要在不同的路由状态下显示不同的信息.而一般情况下顶部通栏都是公共组件,一次引入各个页面通用.所以需要监听路由变化,实时渲染页面功能. // App.tsx export d ...
python hook技术,python hook监听事件详解
本文实例为大家分享了python hook监听事件的具体代码,供大家参考,具体内容如下 # -*- coding: utf-8 -*- # # by oldj http://oldj.net/ # i ...
android 回退函数,详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用发布时间:2020-09-29 09:25:52 来源:脚本之家阅读:137 作者:lqh 详解React Native监听A ...
jquery监听窗口大小改变事件jquery.resizeend
方法一: $(function(){// Bind the resize event. When any test element's size changes, update its// corre ...
回退监听android,详解React Native监听Android回退按键与程序化退出应用
详解React Native监听Android回退按键与程序化退出应用前言我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控an ...
react如何监听路由url变化
"componentWillReceiveProps" "shouldComponentUpdate" "componentWillUpdate&qu ...
响应式onresize监听窗口大小
Onresize是框架/对象(Frame/Object)事件中的一个属性,窗口或框架被重新调整大小.或监听窗口被重新调整了大小. 1.以下 HTMl 标签支持 onresize事件 <a> ...
react取消监听scroll事件
如果要移除事件addEventListener的执行函数必须使用外部函数而不能直接使用匿名函数错误写法: // 这样写是移除不了滚动事件的 componentDidMount() {// 添加滚动监 ...
react 数据监听
监听组件传递的值:componentWillReceiveProps(newProps){参数为给组件传递的参数}监听组件内部状态的变化: componentDidUpdate(prevProps,p ...

react hook监听窗口大小

react hook监听窗口大小相关推荐

最新文章

热门文章