React中matchMedia刷新页面不生效 侧边栏初始状态异常如何解决

两个异常本质是React生命周期逻辑和事件绑定写法错误：

• 首屏刷新不自动折叠：第一版代码只给window绑定了resize监听，组件首次挂载完成时从未执行过视口宽度判断逻辑，只有手动拖动窗口触发resize事件才会运行侧边栏状态设置代码，自然首屏状态和实际视口不匹配。
• 手动打开侧边栏立刻自动关闭：第二版代码的useEffect没有传入依赖数组，每次组件状态更新（比如点击按钮修改侧边栏展开状态触发重渲染），都会重新执行handleResize，强制把侧边栏重置为匹配当前视口的折叠状态，直接覆盖了用户的手动操作。
• 额外隐患：每次触发resize都重复创建matchMedia查询、重复绑定onchange事件，直接操作DOM类名也不符合React单向数据流的设计，且没有做事件清理，容易造成内存泄漏。

matchMedia本身的change事件只会在视口跨越设置的765px断点时触发，性能远好于全局监听resize事件，不需要额外绑定resize。实现时注意区分「断点触发的自动折叠」和「用户手动操作」的状态，逻辑只在组件挂载时初始化一次，卸载时清理监听即可：

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

const MOBILE_BREAKPOINT = 765;

export default function Layout() {
  // 初始化状态时直接匹配当前视口宽度，从根源解决首屏状态错误问题
  const [isMenuMinified, setIsMenuMinified] = useState(() => window.innerWidth <= MOBILE_BREAKPOINT);

  // 手动切换侧边栏的方法
  const changeMenuMinified = useCallback((status) => {
    setIsMenuMinified(typeof status === 'boolean' ? status : prev => !prev);
  }, []);

  useEffect(() => {
    const layout = document.getElementById('home-layout');
    const mediaQuery = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`);
    
    // 断点变化时的处理逻辑
    const handleBreakpointChange = (e) => {
      const isMobile = e.matches;
      changeMenuMinified(isMobile);
      layout?.classList.toggle('extended-layout', isMobile);
    };

    // 绑定媒体查询监听，兼容旧版浏览器API
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handleBreakpointChange);
    } else {
      mediaQuery.addListener(handleBreakpointChange);
    }

    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', handleBreakpointChange);
      } else {
        mediaQuery.removeListener(handleBreakpointChange);
      }
    };
  }, [changeMenuMinified]); // 仅依赖稳定的回调函数，不会重复触发执行

  return (
    <div id="home-layout" className={isMenuMinified ? 'extended-layout' : ''}>
      {/* 页面、侧边栏内容 */}
      <button onClick={() => changeMenuMinified()}>切换侧边栏</button>
    </div>
  );
}

• 初始状态直接在useState初始化阶段读取当前视口宽度，首屏加载就会匹配正确的侧边栏状态，不需要额外手动触发一次判断。
• 移除冗余的resize事件监听，只用matchMedia自带的change事件监听断点变化，大幅减少不必要的回调执行，性能更好。
• useEffect传入稳定的依赖项，初始化逻辑仅在挂载时执行一次，不会在每次重渲染时强制覆盖用户手动切换的侧边栏状态。
• 保留你原本直接操作layout类名的写法，降低改造成本，同时增加了事件清理逻辑，避免内存泄漏。
• 做了旧版浏览器的matchMedia API兼容，适配范围更广。

侧边栏效果参考：

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