react如何获取window对象
获取 window 对象的方法
在 React 中，window 对象是全局的浏览器 API，可以直接访问。以下是几种常见的使用场景：
直接访问全局对象
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;在组件生命周期或 Hook 中访问
通过 useEffect Hook 可以在组件挂载后安全访问 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 对象不存在，需要先判断环境：
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;
}注意事项
- 避免在渲染阶段直接调用
window方法，可能导致 SSR 报错 - 事件监听需在
useEffect中清理，防止内存泄漏 - 对于 TypeScript 项目，可直接使用
window类型，无需额外声明
