React如何实现窗口resize时自动更新window.innerWidth的state值

你的代码无法在视口缩放时自动更新宽度，核心是两个问题：

• 你给useEffect设置的依赖是width，每次调用setWidth都会触发width变更，进而再次触发effect执行，反而会造成死循环，也完全没有监听窗口尺寸变化的逻辑。
• 没有注册resize事件监听器，浏览器窗口尺寸变化时不会主动触发你的更新逻辑。

修复后的代码 #

import { useState, useEffect } from 'react';

const [width, setWidth] = useState('');

useEffect(() => {
  // 非浏览器环境直接返回，避免服务端渲染报错
  if (typeof window === 'undefined') return;

  // 定义更新宽度的处理函数
  const handleResize = () => {
    setWidth(window.innerWidth);
  };

  // 组件挂载时先获取一次初始宽度
  handleResize();

  // 注册窗口尺寸变化的监听事件
  window.addEventListener('resize', handleResize);

  // 组件卸载时清除事件监听，避免内存泄漏
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 依赖数组留空，仅在组件挂载时执行一次注册逻辑

console.log(width);

可选优化 #

如果觉得resize事件触发频率太高，可以加防抖逻辑减少状态更新次数，避免不必要的重渲染：

// 防抖函数，默认200ms延迟
const debounce = (func, delay = 200) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
};

// 用防抖包裹处理函数
const handleResize = debounce(() => {
  setWidth(window.innerWidth);
});

内容的提问来源于stack exchange，提问作者abood alwa7sh