react如何获取window对象

获取 window 对象的方法

在 React 中获取 window 对象可以通过以下几种方式实现：

直接访问全局对象

由于 window 是浏览器的全局对象，在组件中可以直接通过 window 访问。但需要注意组件是否在浏览器环境中运行（避免 SSR 报错）。

const currentUrl = window.location.href;
console.log(currentUrl);

通过 useEffect 确保客户端渲染

在 Next.js 或服务端渲染（SSR）场景中，可以通过 useEffect 确保代码仅在客户端执行，避免 window is not defined 错误。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log(window.innerWidth);
  }, []);
  return <div>Check console for window width</div>;
}

动态导入避免 SSR 问题

对于需要依赖 window 的第三方库，可使用动态导入（dynamic import）延迟加载。

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(
  () => import('../components/WindowDependentComponent'),
  { ssr: false }
);

类型检查（TypeScript）

使用 TypeScript 时，可通过类型断言或条件判断处理可能的 undefined 情况。

if (typeof window !== 'undefined') {
  const scrollY = window.scrollY;
}

注意事项

• 避免在渲染阶段直接调用 window 相关属性，可能导致 SSR 应用报错。
• 事件监听（如 resize）需在 useEffect 中注册并清理。
• 对于响应式设计，推荐使用 CSS 媒体查询而非频繁读取 window.innerWidth。