当前位置：首页 > React

react如何获取window对象

2026-01-24 10:52:13React

获取 window 对象的方法

在 React 中，window 对象是全局的浏览器 API，可以直接访问。以下是几种常见的使用场景：

直接访问全局对象

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

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

通过 useEffect Hook 可以在组件挂载后安全访问 window 对象：

react如何获取window对象

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('Window width:', window.innerWidth);
    const handleResize = () => {
      console.log('Window resized:', window.innerWidth);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return <div>Check console for window size</div>;
}

SSR 环境下的兼容处理

在服务端渲染（SSR）时，window 对象不存在，需要先判断环境：

react如何获取window对象

if (typeof window !== 'undefined') {
  console.log('Window is available:', window.location.href);
}

自定义 Hook 封装

可以创建一个可复用的 Hook 来获取窗口尺寸：

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({
    width: typeof window !== 'undefined' ? window.innerWidth : 0,
    height: typeof window !== 'undefined' ? window.innerHeight : 0,
  });

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

  return size;
}

注意事项