react如何监测窗口
监听窗口大小变化
在React中，可以通过useEffect钩子和window.addEventListener监听resize事件。当窗口大小变化时，更新组件状态以触发重新渲染。
import React, { useState, useEffect } from 'react';
function WindowSizeTracker() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return (
<div>
Window Width: {windowSize.width}, Height: {windowSize.height}
</div>
);
}自定义Hook封装
将窗口监听逻辑封装为自定义Hook，便于复用。
import { useState, useEffect } from 'react';
function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowSize;
}
// 使用示例
function App() {
const { width, height } = useWindowSize();
return <div>Current Width: {width}</div>;
}防抖优化性能
频繁触发resize事件可能影响性能，通过防抖（debounce）限制触发频率。
import { useState, useEffect } from 'react';
function useDebouncedWindowSize(delay = 250) {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
let timeoutId;
const handleResize = () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}, delay);
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
clearTimeout(timeoutId);
};
}, [delay]);
return windowSize;
}监听窗口滚动事件
类似地，可以通过scroll事件监听窗口滚动位置。
import { useState, useEffect } from 'react';
function useWindowScroll() {
const [scrollY, setScrollY] = useState(window.scrollY);
useEffect(() => {
const handleScroll = () => {
setScrollY(window.scrollY);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return scrollY;
}注意事项
- 在组件卸载时务必移除事件监听，避免内存泄漏。
- 服务端渲染（SSR）场景需兼容
window对象是否存在，可通过typeof window !== 'undefined'判断。 - 复杂场景可结合第三方库（如
lodash.debounce）优化性能。
