react如何监测窗口
监测窗口大小变化
使用 useEffect 和 useState 结合 window.addEventListener 监听 resize 事件。在组件挂载时添加事件监听器，卸载时移除监听器。
import { useState, useEffect } from 'react';
function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowSize;
}使用自定义 Hook
将上述逻辑封装为自定义 Hook，方便在多个组件中复用。调用 useWindowSize 即可获取实时窗口尺寸。
function MyComponent() {
const { width, height } = useWindowSize();
return (
<div>
Window width: {width}, height: {height}
</div>
);
}防抖优化性能
对于频繁触发的 resize 事件，可通过防抖（debounce）减少状态更新频率。使用 lodash.debounce 或自定义防抖函数。
import { debounce } from 'lodash';
function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
const handleResize = debounce(() => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}, 200);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
handleResize.cancel();
};
}, []);
return windowSize;
}监听窗口滚动事件
类似地，可通过 scroll 事件监听窗口滚动位置。注意在 useEffect 清理阶段移除监听。
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 兼容性：在服务端渲染（SSR）时，
window对象不存在，需通过条件判断避免报错。 - 性能影响：高频事件（如
resize、scroll）可能引发性能问题，务必在组件卸载时移除监听器。
