react如何获取window对象

获取 window 对象的方法

在 React 中，window 对象是全局的浏览器对象，可以通过直接访问 window 来获取。以下是几种常见场景下的使用方法：

直接访问全局对象

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
console.log(`窗口宽度: ${windowWidth}, 高度: ${windowHeight}`);

在组件生命周期或 Hooks 中访问

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

function WindowSizeTracker() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>当前窗口尺寸: {size.width} x {size.height}</div>;
}

注意事项

• 在服务端渲染（SSR）时，window 对象不存在，需通过 typeof window !== 'undefined' 进行防护：

  

  useEffect(() => {
  if (typeof window !== 'undefined') {
    // 安全访问 window
  }
  }, []);

• 对于 TypeScript 项目，可通过声明全局类型解决类型检查问题：

  declare global {
  interface Window {
    myCustomProp: string;
  }
  }

典型用例

1. 监听窗口事件（如 resize）
2. 调用浏览器 API（如 localStorage）
3. 使用第三方库依赖 window 对象（如地图 SDK）