React-resize窗口监听

最新推荐文章于 2025-03-06 18:26:47 发布

奥特曼老师

最新推荐文章于 2025-03-06 18:26:47 发布

阅读量3.8k

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/Principal_Z/article/details/105801080

版权

React 专栏收录该内容

1 篇文章

订阅专栏

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

// 创建自定义函数来写入方法
function UseWillSize() {
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  })
  // 写入方法
  // 使用 useCallback 缓存方法
  const onResize = useCallback(() => {
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
    })
  }, [])
  useEffect(() => {
    window.addEventListener('resize', onResize)
    return () => {
      window.removeEventListener('resize',  onResize)
    }
  }, [onResize])
  return size
}

function ExampleIndex() {
  const size = UseWillSize()
  return (
    <>
      <h2>
        高：{ size.height }
      </h2>
      
      <h2>
        宽：{ size.width }
      </h2>
    </>
  )
}

export default ExampleIndex