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

React Hook监听页面大小

程序员文章站 2022-03-04 17:56:18
...
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
}