useWindowResize

源码

// 创建文件 src/hook/useWindowResize.ts，其代码如下
import { useState, useEffect } from 'react'

export function useWindowResize() {
  const [clientRectangle, setClientRectangle] = useState({ width: 0, height: 0 })
  const handleResize = () => {
    window.addEventListener('resize', () => {
      const newRect = { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }
      setClientRectangle(newRect)
    })
  }
  useEffect(() => {
    window.addEventListener('resize', handleResize)
    return () => {// 卸载组件时卸载事件监听器
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return clientRectangle
}

// 业务组件中使用
import './App.css'
import { useWindowResize } from './hook/useWindowResize'

function App() {
  const clientRectangle = useWindowResize()
  return (
    <div className='app'>
      <p>clientWidth:{clientRectangle.width}</p>
      <p>clientHeight:{clientRectangle.height}</p>
    </div>
  )
}

export default App