React Hook监听页面大小

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

// 函数要以use开头
function useWindowSize() {
    
    
    const getWindowSize = () => ({
    
    
        innerHeight: window.innerHeight,
        innerWidth: window.innerWidth,
    })

    const [windowSize, setWindowSize] = useState(getWindowSize())

    const handleResize = () => {
    
    
        setWindowSize(getWindowSize())
    }

    useEffect(() => {
    
    
    	// 监听
        window.addEventListener('resize', handleResize)
        
        // 销毁
        return () => window.removeEventListener('resize', handleResize)
    })

    return windowSize
}

猜你喜欢

转载自blog.csdn.net/weixin_44953227/article/details/105736332