React SSR下使用useEffect判断移动端适配Logo的问题求助

开发者阿泽

2026-8-6

重构后的NavbarLogo组件方案

解决SSR环境下window is not defined错误的核心思路是延迟到客户端渲染完成后再访问window对象，同时监听屏幕尺寸变化以动态更新Logo。以下是重构后的代码：

import React, { useState, useEffect } from "react";

export default function NavbarLogo(props) {
  // SSR阶段默认使用桌面版Logo，避免 hydration 内容闪烁
  const [isMobileScreen, setIsMobileScreen] = useState(false);

  useEffect(() => {
    // 仅在浏览器环境执行逻辑
    if (typeof window === 'undefined') return;

    // 创建移动端媒体查询实例
    const mobileMediaQuery = window.matchMedia("(max-width: 768px)");

    // 定义更新屏幕状态的函数
    const updateMobileStatus = (e) => {
      setIsMobileScreen(e.matches);
    };

    // 初始化当前屏幕状态
    updateMobileStatus(mobileMediaQuery);

    // 监听屏幕尺寸变化，实时更新状态
    mobileMediaQuery.addEventListener("change", updateMobileStatus);

    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      mobileMediaQuery.removeEventListener("change", updateMobileStatus);
    };
  }, []);

  return (
    <img
      className="navbar__brand navbar__logo"
      src={isMobileScreen ? "imagelink2.png" : "imagelink1.png"}
      alt="网站Logo"
    />
  );
}

关键细节说明：

状态初始化：SSR阶段默认isMobileScreen为false，先渲染桌面版Logo，避免客户端与服务端渲染内容不一致导致的闪烁。
useEffect 执行时机：useEffect回调会在组件挂载到客户端DOM后触发，此时window对象已存在，不会触发SSR环境下的未定义错误。
动态监听：通过matchMedia的change事件监听屏幕尺寸变化，确保窗口缩放时能自动切换对应Logo。
变量修正：修复原代码中未定义的isScreen变量，统一使用isMobileScreen保持逻辑一致性。