为何空依赖useEffect绑定的resize函数会在窗口缩放时持续触发？

你的代码 #

const [innerWidth, setInnerWidth] = useState(window.innerWidth)

function resized () {
    setInner(window.innerWidth)
}

useEffect(()=>{
    window.addEventListener('resize', resized)

    return () => {
      window.removeEventListener('resize', resized)
    }
}, [])

核心误解 #

你混淆了「事件绑定的执行次数」和「事件触发的次数」：

• useEffect空依赖确实只会在组件挂载时执行一次，也就是只给window绑定了一次resize事件监听，这部分完全符合你的预期。
• 但resize事件本身的特性就是：只要浏览器窗口尺寸发生变化，就会持续触发这个事件——哪怕只绑定一次，每次窗口缩放都会调用resized函数，这是浏览器的原生行为，和绑定次数无关。

额外代码错误 #

你代码里的resized函数调用了setInner，但你声明的状态更新函数是setInnerWidth，这里会导致报错，需要改成setInnerWidth(window.innerWidth)。

优化方案（如果想减少触发频率） #

如果你的需求是避免窗口缩放时频繁更新状态，可以给事件处理加防抖：

const [innerWidth, setInnerWidth] = useState(window.innerWidth)

useEffect(()=>{
  // 防抖定时器
  let timer = null
  const resized = () => {
    clearTimeout(timer)
    // 窗口停止缩放200ms后再更新状态
    timer = setTimeout(() => {
      setInnerWidth(window.innerWidth)
    }, 200)
  }

  window.addEventListener('resize', resized)

  return () => {
    window.removeEventListener('resize', resized)
    // 组件卸载时清理定时器
    clearTimeout(timer)
  }
}, [])

内容的提问来源于stack exchange，提问作者Akshay Tambe