React组件窗口Resize时未动态更新，求助解决方法

你的代码只在组件挂载（以及每次重渲染）时执行了一次truncateText，但没有监听窗口的resize事件，所以动态调整页面尺寸时不会触发状态更新。可以通过以下方式修复：

基础修复版本 #

const About = () => {
  // 初始状态直接根据当前窗口宽度设置，避免初始为空
  const [bioType, setBioType] = useState(window.innerWidth > 1024 ? "desktop" : "mobile");

  const truncateText = () => {
    setBioType(window.innerWidth > 1024 ? "desktop" : "mobile");
  };

  useEffect(() => {
    // 添加窗口resize事件监听
    window.addEventListener('resize', truncateText);
    
    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('resize', truncateText);
    };
  }, []); // 空依赖数组，确保只在挂载/卸载时执行一次

  return (
    <div>
      {bioType === 'desktop' ? <p>桌面版完整内容</p> : <p>移动端截断内容</p>}
    </div>
  );
};

性能优化（防抖处理） #

如果窗口频繁调整尺寸，上面的代码会触发多次状态更新，建议添加防抖函数减少触发频率：

// 防抖工具函数
const debounce = (func, delay = 200) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

const About = () => {
  const [bioType, setBioType] = useState(window.innerWidth > 1024 ? "desktop" : "mobile");

  const truncateText = () => {
    setBioType(window.innerWidth > 1024 ? "desktop" : "mobile");
  };

  // 创建防抖后的处理函数
  const debouncedTruncateText = debounce(truncateText);

  useEffect(() => {
    window.addEventListener('resize', debouncedTruncateText);
    return () => {
      window.removeEventListener('resize', debouncedTruncateText);
    };
  }, []);

  return (
    <div>
      {bioType === 'desktop' ? <p>桌面版完整内容</p> : <p>移动端截断内容</p>}
    </div>
  );
};

关键说明 #

• 初始状态直接基于window.innerWidth设置，避免组件渲染时出现空状态
• 通过useEffect添加resize事件监听，确保窗口尺寸变化时同步更新状态
• 必须在组件卸载时移除事件监听，防止内存泄漏
• 防抖函数可以降低状态更新的频率，提升组件性能

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