欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react hook监听窗口大小

程序员文章站 2022-06-21 12:29:34
...

学习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;